Your First Three.js Scene: A Hello World in 3D | Chapter 1: Welcome to the 3D Web! | Three.js for Creators: A Beginner's Guide to 3D Web Experiences

Welcome to the exciting world of 3D on the web! In this chapter, we'll embark on our journey by creating our very first Three.js scene. Think of this as our 'Hello, World!' moment in three dimensions. We'll be setting up the fundamental building blocks that make any Three.js experience possible: a scene, a camera, and a renderer.

Before we write any code, let's understand the core components of a Three.js scene. We need three main things:

graph TD;
    A[Scene] --> B(Camera);
    A --> C(Renderer);
    B --> C;
    C --> D[HTML Canvas];

Scene: This is like your virtual stage. It's where you'll place all your 3D objects, lights, and other elements.

Camera: This is your viewpoint into the 3D world. It determines what the user sees and from what angle.

Renderer: This component takes everything you've defined in your scene and rendered by your camera, and then draws it onto an HTML <canvas> element on your webpage.

Let's start by setting up our HTML file. We'll need a basic HTML structure and a <canvas> element where our 3D scene will be rendered.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Hello World</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

In this HTML, we've included the Three.js library from a CDN. This makes the Three.js functionality available to our JavaScript. We also have a <canvas> element with the ID myCanvas, and we're linking to a script.js file where our Three.js code will live.

Now, let's create our script.js file and write the code to set up our scene, camera, and renderer.

// Get the canvas element
const canvas = document.getElementById('myCanvas');

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

// 2. Create a Camera
// PerspectiveCamera(fov, aspect, near, far)
// fov: Field of view (in degrees)
// aspect: Aspect ratio (width / height)
// near: Closest object that can be rendered
// far: Farthest object that can be rendered
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 objects

// 3. Create a Renderer
const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);

// Function to render the scene
function render() {
    renderer.render(scene, camera);
}

// Initial render
render();

Let's break down the JavaScript code:

We first get a reference to our HTML <canvas> element.

new THREE.Scene() creates our empty stage.

new THREE.PerspectiveCamera(...) creates a camera that mimics how the human eye sees, with a field of view, aspect ratio, and near/far clipping planes. We then move it back along the Z-axis so it's not inside any potential objects.

new THREE.WebGLRenderer(...) creates our renderer. We pass our canvas element to it and enable antialias for smoother edges. setSize sets the dimensions of the renderer, and setPixelRatio helps ensure sharpness on high-density displays.

The render() function is what actually draws the scene to the canvas using the camera's perspective. We call it once initially.

If you open your index.html file in a browser now, you'll see a blank black canvas. This is because we have a scene and a camera, but we haven't added anything to the scene yet! In the next section, we'll learn how to add our first 3D object to this scene.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Three.js Hello World</title> <style> body { margin: 0; overflow: hidden; } canvas { display: block; } </style> </head> <body> <canvas id="myCanvas"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="script.js"></script> </body> </html>

// Get the canvas element const canvas = document.getElementById('myCanvas'); // 1. Create a Scene const scene = new THREE.Scene(); // 2. Create a Camera // PerspectiveCamera(fov, aspect, near, far) // fov: Field of view (in degrees) // aspect: Aspect ratio (width / height) // near: Closest object that can be rendered // far: Farthest object that can be rendered 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 objects // 3. Create a Renderer const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); // Function to render the scene function render() { renderer.render(scene, camera); } // Initial render render();