The Core Components
At the heart of Three.js, there are several core components that you will need to understand to start building 3D scenes:
- Scene: Think of this as your 3D world. It's where you place all the objects, lights, and cameras.
- Renderer: The renderer takes your 3D scene and displays it on the user's screen. Three.js supports both WebGLRenderer (for modern browsers) and CanvasRenderer (for older ones).
- Camera: Just like a real-world photography, the camera determines the perspective of your scene. It defines what the user sees and how they see it.
- Geometry: Geometries define the shape of 3D objects. Three.js provides basic geometries like cubes, spheres, and planes, but you can create custom geometries too.
- Materials: Materials define how the surface of 3D object interact with light. Different materials can produce effects like shiny, matte, or transparent surfaces.
- Meshes: A Mesh is the combination of a geometry and a material. It's what you see when you render an object.
- Lights: Lights illuminate your scene. Three.js supports various light types, including ambient, directional, point ,and spotlights.