Three.js Intro: Your First 3D Scene in the Browser

In this Three.js intro you will build your first three-dimensional scene running in the browser from scratch. When people talk about 3D on the web, the underlying technology is WebGL; but working with raw WebGL means wrestling with hundreds of lines of shader and matrix code. This is exactly where Three.js steps in and reduces the same work to a few readable lines.

What is WebGL?

WebGL (Web Graphics Library) is a graphics API called from JavaScript that gives the browser direct access to your graphics card (GPU). It is based on the OpenGL ES standard and draws hardware-accelerated graphics onto a <canvas> element without any plugin. That means 3D models, particle systems and real-time lighting are no longer exclusive to desktop applications; they are possible on a web page too.

The catch is that WebGL is very low level. Just to draw a single triangle you need to write vertex and fragment shaders, create buffers and compute projection matrices by hand. An abstraction layer is essential for productivity, and Three.js provides exactly that layer.

What does Three.js make easier?

Three.js is an open-source JavaScript library that sits on top of WebGL. It works with a scene graph model: instead of turning each object into shaders yourself, you think in terms of a logical hierarchy. Out of the box it gives you:

• Geometries: ready-made shapes such as cubes, spheres, planes and cylinders.
• Materials: surface definitions that either react to light or not.
• Lights and cameras: perspective camera, directional light, ambient light.
• Loaders: ready tools for 3D model formats like .glb/.gltf.

Three core concepts: scene, camera, renderer

At the heart of every Three.js application live three objects. The Scene is the container into which all objects are placed. The Camera defines the angle from which you look at the scene. The Renderer takes the scene from the camera's point of view and draws it onto the canvas. Once you wire up this trio, the skeleton is ready:

import * as THREE from 'three';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,                                   // field of view (degrees)
  window.innerWidth / window.innerHeight, // aspect ratio
  0.1,                                  // near clipping plane
  1000                                  // far clipping plane
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

The PerspectiveCamera mimics the human eye, making distant objects appear smaller. If we don't move the camera back along the z axis, it stays inside the object and we see nothing.

Creating the first cube

Now let's add an object to the scene. In Three.js a visible object is usually a Mesh; a Mesh is the combination of a geometry (shape) and a material (surface).

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00aaff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

MeshBasicMaterial is unaffected by light; it always shows a flat color, which makes it ideal for first experiments. Once you move on to lighting you'll need to use MeshStandardMaterial and add a DirectionalLight to the scene, otherwise the object will appear pitch black.

The animation loop

Drawing a single frame is not enough; for a smooth animation we have to render the scene again on every screen refresh. The correct way to do this is with requestAnimationFrame, because it stays in sync with the screen's refresh rate (usually 60 FPS) and automatically slows down when the tab is in the background.

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}
animate();

When this loop runs you'll see the blue cube slowly rotating on two axes. Congratulations, you've just set up your first real-time 3D scene in the browser.

Handling window size and next steps

In a real project you should update the camera and renderer when the window is resized, so the image doesn't get distorted:

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

From here, topics worth exploring include: rotating the scene with the mouse via OrbitControls, loading ready-made 3D models with GLTFLoader, plus shadows, textures and post-processing effects. The basic skeleton always stays the same; only the objects you add to the scene grow richer.

Frequently Asked Questions

Do I need advanced math to learn Three.js?

Not to get started. Grasping the logic of scene, camera and mesh is enough. Later on, when you want to write custom shaders or complex camera moves, basic knowledge of vectors and trigonometry helps, but it isn't required for your first projects.

Can I add Three.js to a React project?

Yes. The react-three-fiber library lets you write Three.js as React components and manages the scene graph through the component tree. Since the underlying logic is still plain Three.js, understanding the raw library first is a big advantage.

Why does my cube look black?

You're most likely using a material that reacts to light (such as MeshStandardMaterial) but there is no light in the scene. Either add a light to the scene, or switch to MeshBasicMaterial for a quick test.

Dreaming of a 3D web experience? Whether it's interactive product visualizations, animated intro scenes or WebGL-based portfolios, we can work on it together. Get in touch and let's bring your idea to life.