DEV Community

Arhan Khan
Arhan Khan

Posted on

Three.js for Beginners: Build 3D Worlds in the Browser With JavaScript

#threejs #javascript #webdev #beginners

Three.js is a JavaScript library that brings 3D graphics to the browser. It wraps WebGL — the browser's raw 3D API — into something a normal developer can use. With it you can build product viewers, data visualisations, games, and interactive scenes, all running in a web page with no plugin and no install.

A 3D scene needs three things: a scene, a camera, and a renderer. Here is the smallest working example — a spinning cube:

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0x00ff00 })
);
scene.add(cube);
camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
Enter fullscreen mode Exit fullscreen mode

Twenty lines, and you have a spinning green cube in your browser. From there you add lights, textures, models, and controls — the pattern stays the same.

Three.js is a good first 3D library because it hides the hardest parts of WebGL while teaching you the real concepts: geometry, materials, lights, cameras, and the render loop. Those concepts are the same in game engines and professional 3D tools, so what you learn here transfers everywhere.

How to start: use the CDN or install it with npm install three, then paste the cube example into an HTML file and open it. Change the colour, the size, and the rotation speed. Then add a second cube, add a light, and try loading a real 3D model in glTF format. Your first project: a small product viewer — a rotating shoe, a chair, or a phone — with orbit controls so the user can drag it around.

Who is it for? Frontend developers who want to add 3D to a website, game developers, data-visualisation builders, and anyone who finds flat pages boring. If your site is mostly text and forms, you do not need Three.js — but when you need a 3D view, there is nothing simpler.

The limits are honest: 3D work needs performance care — too many objects and your page will stutter on old phones — and building realistic scenes takes real art skill, not just code. Start simple, measure performance, and keep your scenes light.

Your first step today: get the spinning cube running in your browser. Then change one thing — the colour, the shape, the speed — and watch it change. You have just built your first 3D scene, and the browser is your canvas.

Top comments (0)