2.5 Putting It All Together: Your First Three.js Setup | Chapter 2: The Foundation: Scenes, Cameras, and Renderers | Three.js for Creators: A Beginner's Guide to 3D Web Experiences

Now that we've explored the core components of a Three.js application – the Scene, Camera, and Renderer – it's time to bring them together and create our very first, albeit simple, 3D web experience. This section will guide you step-by-step through setting up a basic Three.js project.

We'll start by creating an HTML file that will serve as the container for our 3D canvas. This is where our Three.js magic will happen. We'll also need a JavaScript file where we'll write our Three.js code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Three.js Scene</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="module" src="main.js"></script>
</body>
</html>

In the HTML above, we've set up a basic page. The key elements are the <title> for our browser tab and the <style> block which ensures the canvas takes up the full screen by removing default margins and setting the canvas to display as a block. Most importantly, we include our JavaScript file main.js using <script type="module" src="main.js"></script>. Using type="module" allows us to use modern JavaScript features like import and export which are essential for larger Three.js projects.

Now, let's create our main.js file and begin constructing our 3D scene.

// Import necessary Three.js components
import * as THREE from 'three';

// 1. Create a Scene
const scene = new THREE.Scene();

// 2. Create a Camera
// Field of View (FOV): 75 degrees
// Aspect Ratio: window.innerWidth / window.innerHeight
// Near Clipping Plane: 0.1 (objects closer than this won't be rendered)
// Far Clipping Plane: 1000 (objects further than this won't be rendered)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Position the camera back so we can see something
camera.position.z = 5;

// 3. Create a Renderer
const renderer = new THREE.WebGLRenderer();

// Set the size of the renderer to fill the window
renderer.setSize(window.innerWidth, window.innerHeight);

// Append the renderer's DOM element (the canvas) to our HTML body
document.body.appendChild(renderer.domElement);

// --- We'll add objects and animation next! ---

Let's break down what's happening in the main.js file:

Import Three.js: We start by importing the entire Three.js library using import * as THREE from 'three';. This makes all Three.js classes and functions available under the THREE namespace.
Create the Scene: const scene = new THREE.Scene(); initializes an empty scene where we will place all our objects, lights, and cameras.
Create the Camera: const camera = new THREE.PerspectiveCamera(...) creates a perspective camera. We configure its field of view, aspect ratio (which we'll dynamically update later), and clipping planes. We then move the camera back along the Z-axis using camera.position.z = 5; so that it's not inside any objects we might add.
Create the Renderer: const renderer = new THREE.WebGLRenderer(); creates a WebGL renderer. This object is responsible for drawing our 3D scene onto an HTML <canvas> element.
Set Renderer Size: renderer.setSize(window.innerWidth, window.innerHeight); makes the renderer's canvas fill the browser window. This is a common setup for 3D applications.
Append Canvas: document.body.appendChild(renderer.domElement); takes the canvas element created by the renderer and adds it to the HTML document's <body>. This makes our 3D canvas visible in the browser.

At this point, if you open your index.html file in a browser, you'll see a blank black screen. This is correct! We have successfully set up the fundamental structure, but we haven't added any 3D objects yet. The next step is to introduce geometry and materials to bring our scene to life.

graph TD
    A[HTML File] --> B{Link to main.js}
    B --> C[main.js File]
    C --> D[Import THREE]
    D --> E[Create Scene]
    E --> F[Create Camera]
    F --> G[Create Renderer]
    G --> H[Set Renderer Size]
    H --> I[Append Renderer Canvas to DOM]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First Three.js Scene</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script type="module" src="main.js"></script> </body> </html>

// Import necessary Three.js components import * as THREE from 'three'; // 1. Create a Scene const scene = new THREE.Scene(); // 2. Create a Camera // Field of View (FOV): 75 degrees // Aspect Ratio: window.innerWidth / window.innerHeight // Near Clipping Plane: 0.1 (objects closer than this won't be rendered) // Far Clipping Plane: 1000 (objects further than this won't be rendered) const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // Position the camera back so we can see something camera.position.z = 5; // 3. Create a Renderer const renderer = new THREE.WebGLRenderer(); // Set the size of the renderer to fill the window renderer.setSize(window.innerWidth, window.innerHeight); // Append the renderer's DOM element (the canvas) to our HTML body document.body.appendChild(renderer.domElement); // --- We'll add objects and animation next! ---

graph TD A[HTML File] --> B{Link to main.js} B --> C[main.js File] C --> D[Import THREE] D --> E[Create Scene] E --> F[Create Camera] F --> G[Create Renderer] G --> H[Set Renderer Size] H --> I[Append Renderer Canvas to DOM]