Welcome to the exciting world of 3D on the web! Before we can start creating stunning visuals, we need to understand the fundamental building blocks of any Three.js application. Think of these as the essential trio that work together to bring your 3D scene to life. Without them, nothing will appear on your screen. These three components are the Scene, the Camera, and the Renderer.
Let's break down each of these crucial elements:
- The Scene: Imagine the scene as your virtual stage or canvas. It's a container where you'll place all your 3D objects, lights, and other elements that make up your virtual world. Everything you want to see in your 3D experience needs to be added to the scene.
const scene = new THREE.Scene();- The Camera: The camera defines the viewpoint from which you observe the scene. Just like in photography or filmmaking, the camera determines what part of the scene is visible and from what angle. Three.js offers various camera types, but we'll start with the most common one for beginners: the PerspectiveCamera, which mimics how our eyes perceive depth and distance.
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);The PerspectiveCamera constructor takes three main arguments: the field of view (FOV) in degrees, the aspect ratio (usually the width of your canvas divided by its height), and the near and far clipping planes. These planes determine the range of distances from the camera where objects will be rendered. Objects closer than the near plane or further than the far plane will not be visible.
- The Renderer: The renderer is responsible for taking the scene and camera information and drawing it onto an HTML
<canvas>element. It essentially translates your 3D scene into a 2D image that your browser can display. The most common renderer in Three.js is the WebGLRenderer, which leverages the power of your graphics card for efficient rendering.
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);We then need to append the renderer's DOM element (which is a canvas) to our HTML document to see anything.
document.body.appendChild(renderer.domElement);These three components are inextricably linked. The scene holds the world, the camera dictates what we see of that world, and the renderer draws it all for us. Understanding how they interact is the first and most crucial step in your Three.js journey.
graph TD;
Scene["Scene: The Virtual World"]
Camera["Camera: The Viewpoint"]
Renderer["Renderer: The Painter"]
Scene --> Renderer;
Camera --> Renderer;
Renderer --> Canvas["HTML Canvas: The Display"];