How to Initialize a Basic Scene in Three.js

This guide provides a straightforward tutorial on how to initialize a basic 3D scene using Three.js. You will learn about the three essential components required for any Three.js application—the scene, the camera, and the renderer—and how to combine them with a simple 3D object to render your very first graphic in the browser.

To create a 3D world with Three.js, you must set up three core elements: a Scene to hold your objects, a Camera to view the scene, and a Renderer to draw the scene onto your screen.

Step 1: Set Up the HTML Structure

First, create a basic HTML file with a container where Three.js can project the 3D graphics.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Quickstart</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="module">
        import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';
        
        // Three.js code will go here
    </script>
</body>
</html>

Step 2: Create the Scene, Camera, and Renderer

Inside your script tag, initialize the three primary components.

  1. The Scene: This acts as a container for all your 3D objects, lights, and cameras.
  2. The Camera: A PerspectiveCamera mimics human eye perception. It requires four parameters: Field of View (FOV), Aspect Ratio, Near clipping plane, and Far clipping plane.
  3. The Renderer: The WebGLRenderer actually draws the 3D graphics onto your webpage.
// 1. Create the scene
const scene = new THREE.Scene();

// 2. Create the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5; // Move the camera back so we can see the object

// 3. Create the renderer and append it to the HTML document
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Step 3: Add a 3D Object

To see something on the screen, you need to add an object. An object (known as a Mesh) is created by combining a Geometry (the shape) and a Material (the appearance or color).

// Create a box geometry and a basic green material
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Combine geometry and material into a mesh, then add it to the scene
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Step 4: Create the Animation Loop

To display the graphics and make them interactive, you must create a render loop. This loop continuously redraws the scene every time the screen refreshes (typically 60 times per second) and allows you to animate your objects.

function animate() {
    requestAnimationFrame(animate);

    // Rotate the cube for some basic animation
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // Render the scene from the perspective of the camera
    renderer.render(scene, camera);
}

// Start the animation loop
animate();

Step 5: Handle Window Resizing

To prevent the scene from distorting when the browser window is resized, add an event listener to update the camera’s aspect ratio and the renderer’s size dynamically.

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});