A Beginner’s Guide to ThreeJs

Source: Dev.to

[![ ](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4qdmnqxhtflnlep6qjr3.png)](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4qdmnqxhtflnlep6qjr3.png)

Sometime ago, I was told that no matter what you’re learning in tech—whether it’s a new method, a new language, a new framework, or a new tool—you can always approach it by asking three questions:

1. **What does it take?**  
2. **What does it return?**  
3. **What does it do?**

Unfortunately, with **Three.js** this approach failed me the first time. After three attempts, I’m writing this intro to Three.js for anyone struggling with it, just like I was.

---

## What is Three.js?

Three.js is a high‑level JavaScript library for creating 3D graphics in web browsers. It simplifies 3D creation and animation so you don’t need to write raw WebGL code.

* To render 3D graphics in a browser we need the GPU (Graphics Processing Unit), the part of your computer that’s really good at drawing graphics.  
* **WebGL** is the tool that lets JavaScript talk to the GPU. It acts like a translator, helping the browser tell the GPU what to render on the screen.  
* Three.js is built on top of WebGL; it abstracts the complicated WebGL API into an easy‑to‑use JavaScript API, so you don’t have to deal with the low‑level details.

To understand or use Three.js, it’s important to know that everything revolves around **three core objects**. These form the foundation of the Three.js workflow:

1. **Scene**  
2. **Camera**  
3. **Renderer**

In this tutorial we’ll explore these three concepts while building a small example. Before we begin, install the required packages:

```bash
# three.js
npm install --save three

# vite (optional, for a dev server)
npm install --save-dev vite

---

1. Scene

A scene in Three.js is the world where everything exists. It contains everything you want to see (objects, lights, etc.). Think of it as a movie set that holds all the props, actors, and lights. Without a scene there’s nothing to film.

import * as THREE from 'three';

const scene = new THREE.Scene();

At this point we have an empty world. Nothing will appear on the screen yet because the scene has no objects, no camera, and nothing is being rendered. So we need a camera.

---

2. Camera

The camera is the viewer’s eye. It looks at everything inside the scene. In a movie set the camera is literally the cameraman. Three.js provides several camera types:

• PerspectiveCamera
• OrthographicCamera
• CubeCamera
• ArrayCamera
• StereoCamera

The most common is the PerspectiveCamera, which mimics how the human eye sees the world (farther objects appear smaller).

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 parameters explained

Together the near and far values define the view frustum, which determines what the camera can see. Using 0.1 and 1000 means anything between those distances will be visible.

---

3. Renderer

The renderer draws everything on the screen. Think of it as a painter that takes all the objects in the scene, looks through the camera, and paints the final image onto your browser. The most commonly used renderer is WebGLRenderer.

import * as THREE from 'three';

// Create the renderer
const renderer = new THREE.WebGLRenderer();

// Set the size (usually the window size)
renderer.setSize(window.innerWidth, window.innerHeight);

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

Now that we have a scene, a camera, and a renderer, let’s add a 3D object. In Three.js, creating an object happens in three main steps:

1. Create the geometry – defines the shape (the XYZ points) of the object. Three.js includes many built‑in geometries such as cubes, spheres, cones, and planes.

(The tutorial continues with geometry, material, mesh creation, animation loop, etc.)

## 1. Create the geometry  

We'll use a sphere:

```js
const geometry = new THREE.SphereGeometry(15, 32, 16);

• 15 – radius of the sphere
• 32 – number of horizontal segments
• 16 – number of vertical segments

These values give us a smooth‑looking sphere.

---

2. Create the material

The material defines how the geometry looks – think of it as the wrapping paper for your 3D shape.
Three.js offers many materials (see the docs). Some respond to light (e.g., MeshStandardMaterial), while others don’t. For simplicity, we’ll use MeshBasicMaterial, which does not rely on lights:

const material = new THREE.MeshBasicMaterial({
  color: 0xf9a8d4,
  wireframe: true,
});

• color – sets the sphere’s color
• wireframe: true – displays the sphere as a wireframe so you can see its structure

---

3. Create a mesh

A mesh combines geometry and material. It is the actual object you add to the scene.

const sphere = new THREE.Mesh(geometry, material);
sphere.position.set(8, -30, 0);
scene.add(sphere);

Now the sphere exists in the scene, ready to be rendered.

---

4. Animate the sphere

Make the sphere spin to add some dynamism:

const animate = () => {
  requestAnimationFrame(animate);

  sphere.rotation.x += 0.01;
  sphere.rotation.y += 0.005;
  sphere.rotation.z += 0.01;

  renderer.render(scene, camera);
};

animate();

At this point you have a 3D animated sphere rotating on your screen!

---

What’s next?

• Add lights to your scene.
• Experiment with different materials, colors, and geometries.
• Play around with what you’ve built and see how changes affect the scene.

Check out the examples in the official Three.js documentation. They’re a great source of inspiration and learning. Once you’ve mastered the basics, you can dive into more detailed tutorials and build even more exciting projects!