R3F Flashcards
(18 cards)
Como inicializar uma cena com <Canvas>?</Canvas>
import { Canvas } from ‘@react-three/fiber’;
<Canvas
camera={{ fov: 45, near: 0.1, far: 100, position: [1, 2, 6] }}
>
<Experience></Experience>
</Canvas>
Como adicionar controles de câmera com Drei?
import { OrbitControls } from ‘@react-three/drei’;
<OrbitControls></OrbitControls>
Como mover/rotacionar/escalar um objeto com gizmo de controle?
import { TransformControls } from ‘@react-three/drei’;
<TransformControls>
<mesh>{/* ... */}</mesh>
</TransformControls>
Como adicionar um gizmo estético para mover objetos com controle de posição relativa?
import { PivotControls } from ‘@react-three/drei’;
<PivotControls anchor={[0, 0, 0]} depthTest={false}>
<mesh>{/* ... */}</mesh>
</PivotControls>
Como adicionar um elemento HTML preso a um objeto 3D?
import { Html } from ‘@react-three/drei’;
<mesh>
<Html position={[1, 1, 0]} wrapperClass="label" center>
That's a sphere 👍
</Html>
</mesh>
Como renderizar texto 3D leve e nítido?
import { Text } from ‘@react-three/drei’;
<Text
font=”./bangers-v20-latin-regular.woff”
fontSize={1}
color=”salmon”
maxWidth={2}
textAlign=”center”
>
I LOVE R3F
</Text>
Como fazer um objeto flutuar como um balão?
import { Float } from ‘@react-three/drei’;
<Float speed={5} floatIntensity={2}>
<Text>I LOVE R3F</Text>
</Float>
Como adicionar reflexos a um plano?
import { MeshReflectorMaterial } from ‘@react-three/drei’;
<mesh>
<planeGeometry></planeGeometry>
<MeshReflectorMaterial
resolution={512}
blur={[1000, 1000]}
mixBlur={1}
mirror={0.5}
color="greenyellow"
/>
</mesh>
Como usar Leva para adicionar controles no UI?
import { useControls } from ‘leva’;
const { position, color } = useControls(‘sphere’, {
position: { value: { x: 0, y: 0 }, step: 0.01, joystick: ‘invertY’ },
color: ‘#ff0000’
})
Como monitorar FPS, draw calls e memória com Drei?
import { Perf } from ‘r3f-perf’;
<Perf></Perf>
Como adicionar um céu físico realista?
import { Sky } from ‘@react-three/drei’;
<Sky sunPosition={[1, 2, 3]} />
Como aplicar sombras suaves do tipo PCSS?
import { SoftShadows } from ‘@react-three/drei’;
<SoftShadows size={25} samples={10} focus={0} />
Como criar sombras realistas acumulativas com luzes aleatórias?
import { AccumulativeShadows, RandomizedLight } from ‘@react-three/drei’;
<AccumulativeShadows frames={100} blend={100} temporal>
<RandomizedLight position={[1, 2, 3]} amount={8} radius={1} intensity={3} />
</AccumulativeShadows>
Como criar sombras suaves de contato no chão?
import { ContactShadows } from ‘@react-three/drei’;
<ContactShadows
position={[0, -0.99, 0]}
scale={10}
resolution={512}
color=”#1d8f75”
opacity={0.4}
blur={2.8}
frames={1}
/>
Como usar um mapa HDRI ou CubeMap para iluminação global?
import { Environment } from ‘@react-three/drei’;
<Environment></Environment>
Como usar um HDRI customizado?
<Environment></Environment>
Como adicionar elementos personalizados na iluminação da cena?
<Environment>
<Lightformer position-z={-5} scale={5} color="red" intensity={10} form="ring" />
</Environment>
Como configurar rapidamente uma cena com luz, ambiente e sombra?
import { Stage } from ‘@react-three/drei’;
<Stage
shadows={{ type: ‘contact’, opacity: 0.2, blur: 3 }}
environment=”sunset”
preset=”portrait”
intensity={3.5}
>
<mesh>{/* ... */}</mesh>
</Stage>
