Three.js and WebGL: Your First Scene
Three.js and WebGL: Your First Scene
Welcome to the first step of building 3D worlds in the browser. By the end of this lesson you will have a running Three.js page with a scene, a camera, a renderer and a live animation loop — even though there is nothing visible yet, this is the exact skeleton every other example in this course builds on.
What We Build
Every 3D page needs four things:
1. A Scene — the container that holds everything you create. 2. A Camera — your eyes into the scene. 3. A Renderer — the engine that draws the scene to the screen. 4. An Animation Loop — a function that redraws the scene every frame, so later we can animate things.
The Shared Skeleton
This project grows across lessons. From now on, when a lesson says "the skeleton stays the same", it means this exact file. Copy this once, then extend it in later lessons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js – First Scene</title>
<style>body{margin:0;overflow:hidden;background:#0b0f1a}</style>
</head>
<body>
<script type="importmap">
{ "imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
} }
</script>
<script type="module">
import * as THREE from 'three'; const scene = new THREE.Scene();
scene.background = new THREE.Color(0x0b0f1a);
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
How to Run It
You do not need any build tools, servers or Python. Save the file as index.html, then open it in any modern browser (Chrome, Edge, Firefox, Safari). Three.js is loaded from a CDN, so the page loads everything it needs over the internet. The screenshot above shows what running this first example looks like — a dark empty scene, ready for content.
Step by Step
The import map. The <script type="importmap"> block tells the browser where to find the Three.js modules. It maps the bare name three to the actual CDN URL and does the same for the three/addons/ (helper modules like OrbitControls that we add later). This is the modern, tool-free way to use Three.js.
Importing. import * as THREE from 'three' gives us the whole library under the THREE namespace, so we can write THREE.Scene(), THREE.PerspectiveCamera(), and so on.
Scene. new THREE.Scene() is an empty container. Think of it as an empty 3D world. We also set a dark background colour so the page is obviously "3D" rather than browser-white.
Camera. new THREE.PerspectiveCamera(60, ...) simulates how a human eye sees the world — objects farther away look smaller. The 60 is the vertical field of view in degrees, and the two last numbers are the near and far clipping planes.
Renderer. new THREE.WebGLRenderer({ antialias: true }) creates a canvas that uses WebGL to draw. We set its size to fill the window and append it to the document body so it appears on the page.
Animation loop. animate() calls requestAnimationFrame(animate) so it keeps running, then calls renderer.render(scene, camera). On this frame nothing is drawn yet, but the engine is alive and ready — the very next lesson drops a box into it.
Try It Yourself
- Change the background colour from
0x0b0f1ato something like0x112244or0x330000. - Change the field of view from
60to90and watch the camera feel more "wide angle". - Change the size: instead of
innerWidth/innerHeight, use640/480to force a fixed-size canvas.
Summary
You set up the core of any Three.js application: scene, camera, renderer and an animation loop. You also learned how the importmap loads Three.js from the CDN, which means no server or build step is required — just open the HTML file. This skeleton is the foundation for every remaining lesson.
Next Lesson
Now that the engine runs, it's time to see something. In the next lesson you add your first 3D object — a red box — using a geometry and a material.
Quiz - Quiz - First Scene
1. Which object must exist for Three.js to draw anything to the screen?
2. What does the import map do?
3. The PerspectiveCamera field of view is measured in