Guide · Open source

How to use three.js: scene, camera, cube and renderer

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Three.js is an open-source JavaScript library for creating 3D scenes and showing them in a web page. This guide walks through the example from its README: you will create a scene, a camera and a cube, render them with a WebGL renderer, and animate the cube. It is written for people who already know some JavaScript and want to start with 3D on the web.

three.jsmrdoob/three.js · ★ 117k · MIT Install options & downloads

Quick start

1Check your browser. Confirm you are using a modern web browser with WebGL support.
2Get the source. Run the shallow clone command from the README to download the repository with reduced size.
3Set up a page. Create an HTML page and a JavaScript file that can use ES module imports; the README does not specify the setup, so a bundler or Node.js may be needed for the npm package.
4Create the scene and camera. Add a PerspectiveCamera and a Scene, then position the camera along the z-axis.
5Add the cube. Create a BoxGeometry and a MeshNormalMaterial, combine them in a Mesh and add it to the scene.
6Render and animate. Create a WebGLRenderer, attach its canvas to the page, and use setAnimationLoop to rotate the cube and render each frame.

What three.js is and who it is for

The project describes its aim as an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current builds include WebGL and WebGPU renderers, and SVG and CSS3D renderers are available as addons.

It suits web developers adding interactive 3D graphics to a website, developers building browser-based visualizations or simple 3D animations, and people who already know JavaScript. It is a code library, not a finished app, and it is focused on 3D, so it is not the right tool if you only need 2D graphics.

Best for: web developers adding interactive 3D to a site
Best for: browser-based visualizations and simple 3D animations
Not for: 2D-only graphics
Not for: beginners with no JavaScript experience

What you need before you start

You need a modern web browser with WebGL support. The README does not list other requirements, but it notes that Node.js or a bundler is likely needed to use the npm package, although it does not specify which.

The example uses ES module syntax (import * as THREE from 'three'), so you should be comfortable with modules and basic browser code.

A modern web browser with WebGL support
Node.js or a bundler is likely needed for the npm package (the README does not specify)
Basic JavaScript and familiarity with modules

Get the three.js source code

To get a copy of the repository without its full history, use a shallow clone. Cloning with all history results in a download of about 2 GB, and the depth parameter significantly reduces that size.

The README also lists the project's Examples, Docs, Manual and Discord pages, which are useful references once the basics work.

git clone --depth=1 https://github.com/mrdoob/three.js.git

Create a scene, camera, cube and renderer

The example creates a scene, a camera and a box geometry, then adds the cube to the scene. It creates a WebGLRenderer for the scene and camera, adds its canvas to document.body, and sets an animation loop that rotates the cube and renders each frame.

If everything goes well, the README says you should see a rotating cube in the browser.

PerspectiveCamera sets the field of view, aspect ratio and near and far planes
BoxGeometry defines the cube shape, and MeshNormalMaterial colours it
renderer.setAnimationLoop(animate) drives the animation

import * as THREE from 'three';

const width = window.innerWidth, height = window.innerHeight;

// init

const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

// animation

function animate( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;

	renderer.render( scene, camera );

}

Where to go next

The README points to several resources: the Examples page for working demos, the Docs for API reference, the Manual for guided learning, and the Wiki for further notes. A migration guide is also linked for moving between versions.

For questions, the README links to a Stack Overflow tag, a Discourse forum and a Discord server.

Examples: https://threejs.org/examples/
Docs: https://threejs.org/docs/
Manual: https://threejs.org/manual/
Questions: Stack Overflow tag three.js

What people use it for

Adding an interactive 3D model or animation to a website
Building browser-based data visualizations
Creating simple 3D animations that run in the browser
Learning 3D concepts such as cameras, geometry and materials with JavaScript

Frequently asked questions

Is three.js free to use?

Yes. Three.js is released under the MIT licence, which is a permissive open-source licence. Check the repository's licence file for the full terms before using it in a project.

What do I need to install three.js?

The README says you need a modern browser with WebGL support. It also notes that Node.js or a bundler is likely needed to use the npm package, though it does not specify the exact setup.

How do I get the three.js source code?

The README gives a shallow clone command: git clone --depth=1 https://github.com/mrdoob/three.js.git. The depth flag reduces download size compared with cloning the full history, which is about 2 GB.

Can three.js make 2D graphics?

It is focused on 3D scenes. The README mentions SVG and CSS3D renderers as addons, but if you only need 2D graphics, a 2D library is likely a better fit.

What are alternatives to three.js?

Comparable projects include Babylon.js, the PlayCanvas engine, OGL and Pixi.js. Pixi.js is more focused on 2D, while the others are 3D libraries that you can compare against your project needs.

Why is my three.js scene not showing?

The README says the example should show a rotating cube if everything goes well. Check that your browser supports WebGL and that the renderer's canvas is added to the page, as the example does with document.body.appendChild. The README does not list other troubleshooting steps.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Three.js suits web developers and JavaScript users who want to add 3D graphics to a browser page or build simple 3D animations. It is a code library, not a finished app, so people wanting a ready-made tool or 2D-only graphics should choose something else.

Install options & downloads