01 / Start with the basics
Your first 3D scene.
Look around a real Three.js scene. Discover how shapes, surfaces, light, and a camera work together.
Drag to look around
- Draw calls
- 0
- Triangles
- 0
- Pixel ratio
- 1
Read the scene walkthrough and code exercises →
Try this
- Change your viewpoint. Drag the scene to orbit. Scroll or pinch to get closer. Your camera moves while the objects stay in the scene.
- Pause and look. Stop the motion and notice the reflections on the knot, the shadows on the floor, and the small cubes around it.
- Start again. Use Reset view, or focus the scene and press R, to return to the original camera angle.
What makes this scene work?
- Geometry
- The shapes: a knot, a ring, a floor, and cubes.
- Materials
- How each surface reflects light and what color it has.
- Lights
- What illuminates the objects and creates shadows.
- Camera
- The viewpoint you move by dragging the scene.