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:

1. Scene: Think of this as your 3D world. It's where you place all the objects, lights, and cameras.
2. 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).
3. 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.
4. 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.
5. Materials: Materials define how the surface of 3D object interact with light. Different materials can produce effects like shiny, matte, or transparent surfaces.
6. Meshes: A Mesh is the combination of a geometry and a material. It's what you see when you render an object.
7. Lights: Lights illuminate your scene. Three.js supports various light types, including ambient, directional, point ,and spotlights.