← all topics

3D Scene

Three.js

React Three Fiber wraps Three.js as React components. OrbitControls lets you rotate and zoom. Drag the canvas to orbit, scroll to zoom.

loading…
Controls
geometry
color
1
0.5
2

concepts

scene graph

Three.js organizes a scene as a tree: Mesh = Geometry + Material. Lights affect how PBR materials render. Everything hangs on a root Scene object.

geometry

Defines the shape as vertices, normals, and UVs. IcosahedronGeometry, BoxGeometry, TorusKnotGeometry etc. are built-in primitives you can swap without touching the material.

material

MeshStandardMaterial uses physically-based rendering and responds to lights. MeshBasicMaterial ignores lights entirely — useful for wireframes and UI overlays.

React Three Fiber

JSX bindings for Three.js: <mesh> = new THREE.Mesh(), <pointLight> = new THREE.PointLight(). React state changes automatically update the underlying 3D objects.

core pattern

<Canvas>
  <ambientLight intensity={0.5} />
  <pointLight position={[5, 5, 5]} intensity={2} />

  <mesh>
    <icosahedronGeometry args={[1, 1]} />
    <meshStandardMaterial color="#6d6aff" wireframe={false} />
  </mesh>

  <OrbitControls autoRotate autoRotateSpeed={1} />
</Canvas>