Three.js ! Another Js library but why ?    

Introduction

Three.js is an open-source, lightweight JavaScript library that works in any browser.

It uses WebGL behind the scenes to render 3D graphics on an HTML <canvas> element. This means you can create animated, GPU-accelerated 3D graphics directly in a web browser.

WebGL alone is powerful, but it’s low-level. Without a library, you’d need to write custom shader code just to display a single triangle on screen. Three.js removes that complexity. It handles the low-level operations for you, so you can focus on building graphics instead of graphics programming.

Why Three.js Instead of Raw WebGL or Another Engine

It’s worth being specific about why Three.js is usually the first pick, rather than raw WebGL or one of its competitors. Raw WebGL means writing your own shaders and matrix math for even the simplest object — most teams don’t have the time or the specialized graphics-programming background for that, and Three.js exists specifically to remove that barrier.

Compared to other libraries, it’s more a set of trade-offs than a clear winner. Babylon.js, built and maintained by Microsoft, leans closer to a full game engine — it ships more built-in tooling for physics, audio, and scene editing, which helps if you’re building something closer to a game than a website. PlayCanvas takes a similar approach with a hosted visual editor, which suits teams who want non-developers involved in scene building. Three.js, by comparison, stays leaner and closer to the metal — it gives you the building blocks without opinions about how your project should be structured, which is exactly why it tends to show up more in marketing sites, product configurators, and portfolio work than in full game development.

Quick overlook:

Getting started with Three.js takes just two steps.

1. Install Three.js using npm:

npm install three

2. Start a development server so you can preview your changes in the browser. A bundler like Parcel makes this simple:

npx parcel index.html

With that, you’re ready to start building.

Some important methods:

1. Scene: The Container for Everything

Think of a Three.js scene like a movie set. It’s the space where everything else lives — your camera, lights, and objects (called meshes).
Create a scene like this:

const scene = new THREE.Scene()

Every object you build afterward gets added to this scene.

2. Camera: Your Eyes Inside the 3D World

A scene by itself shows you nothing. You need a camera to actually see what’s happening inside it.

Three.js offers several camera types, but two are most common:

• Orthographic camera – best for flat, 2D-style scenes. It ignores perspective.
• Perspective camera – best for 3D scenes. It mimics how the human eye sees depth.

Here’s how to create a perspective camera and add it to your scene:

const aspect = window.innerWidth / window.innerHeight
const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 100)
scene.add(camera)

The PerspectiveCamera constructor takes four arguments. Each one matters:

• FOV (field of view) – the angle between the top and bottom of the camera’s view
• Aspect ratio – typically your canvas width divided by its height
• Near – the closest distance the camera can “see”
• Far – the farthest distance the camera can “see” before objects are no longer rendered

3. Renderer: Where Everything Comes Together

Once your scene has a camera, you’re ready to render it.

The renderer does the heavy lifting. It calculates the position of every object relative to the camera and the rest of the scene, then draws the final image onto your canvas.

Here’s how to set one up:

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
renderer.setClearColor(0x222222)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(window.devicePixelRatio)

To actually display your scene, call the renderer’s render() method. It takes two arguments: the scene, and the camera to view it from.

renderer.render(scene, camera)

In plain terms, this says: “Renderer, show me the scene through this camera’s view.”

4. Building a Box: Geometry, Material, and Mesh

A 3D object in Three.js is built from three parts: its shape, its appearance, and the combination of the two. Let’s break each one down.

Geometry: The Shape

Geometry defines an object’s shape — its vertices, edges, and faces. Think of it as the skeleton.

Three.js includes ready-made geometries like boxes, planes, and spheres. You can also build custom ones. The official Three.js documentation has an interactive sandbox for each geometry type, so you can experiment with the parameters and see the shape change in real time. It’s worth trying before building your own.

Material: The Appearance

Material is what makes a shape visible and gives it a “look.” It controls how an object appears — including how it reacts to light.

Different materials support different features, like textures, height maps, and normal maps. The documentation covers each material type and its specific options in detail.

Mesh: Putting It Together

A mesh combines geometry and material into one renderable object.

Here’s an example using BoxGeometry, which takes six arguments (width, height, depth, and three segment counts). We’ll only use the first three and leave the rest at their defaults:

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

Why You Might See Nothing at First

At this point, you might expect to see a cube — but the scene may look empty.

Here’s why: every object added to a scene starts at position x=0, y=0, z=0 by default. Since your camera starts at that same position, you’re technically viewing the scene from inside the cube.

The fix is simple — move the camera. Add this line right after creating the camera, before adding it to the scene:

camera.position.z = 2

Now you’ll see the cube. But it may look flat, since you’re facing it head-on.

To fix that, move the camera to a different angle and point it at the center of the scene:

camera.position.set(2, 2, 2)
camera.lookAt(0, 0, 0)

Now you’ll see the cube in proper 3D.

A Few Other Things That Trip People Up Early

The empty-scene problem above is the most common early snag, but a few others show up just as often.

Forgetting to handle window resizing is one — if you don’t update the camera’s aspect ratio and the renderer’s size when the browser window changes, your scene will look stretched or cropped. A simple resize listener that updates both usually fixes it.

Another is sticking with MeshBasicMaterial when you actually want lighting effects. MeshBasicMaterial ignores lights entirely, which is fine for flat-shaded objects but confusing if you’ve just added lights and nothing changes — that’s the material, not the lights, which is why the lighting section switches to MeshStandardMaterial.

Performance issues also show up fast if you create new geometries or materials inside the animation loop instead of once, outside it. Three.js objects aren’t free — creating hundreds of them every frame will visibly slow a scene down. Build objects once, then just update their position, rotation, or scale properties inside the loop.

5. Lights: Bringing Your Scene to Life

Three.js supports many types of lights, each with different behavior. For this example, we’ll use two:

• Ambient light – lights every object equally from all directions
• Point light – acts like a light bulb, glowing outward from a single position in 3D space

Before adding lights, update your material to one that reacts to lighting:

const material = new THREE.MeshStandardMaterial({ color: 0x781CE5 })

Then add your lights to the scene:

const ambient = new THREE.AmbientLight(0x404040, 5)
const point = new THREE.PointLight(0xE4FF00, 1, 10)
point.position.set(3, 3, 2)
scene.add(ambient)
scene.add(point)

Your cube should now show shading and highlights, just like a real, lit object would.

6. Adding Animation

So far, your scene renders only once — when render() is called. To make the cube spin, you need to render the scene repeatedly, adjusting its rotation slightly each time.

The browser gives you a built-in tool for this: requestAnimationFrame. It calls a function right before each screen repaint — typically 60 times per second, matching most displays’ refresh rate.

Here’s how to use it. We’ll create an animate() function that renders the scene, updates the cube’s rotation slightly, and calls itself again:

function animate() {
  mesh.rotation.x += 0.003
  mesh.rotation.y += 0.004
  mesh.rotation.z += 0.005
  renderer.render(scene, camera)
  window.requestAnimationFrame(animate)
}
animate()

*Run this, and your cube will spin smoothly on all three axes.

See the final result here: LINK

Conclusion

You’ve now covered the core building blocks of Three.js: scenes, cameras, renderers, meshes, lights, and animation.

Like any new library, Three.js can feel like a lot at first. But once the basics click, adding motion and depth to your web projects becomes surprisingly simple — without needing deep WebGL expertise.

From here, the best next step is experimentation. Try different geometries, materials, and lighting setups to see how they change your scene.