How to install Three.js


The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.

Three.js allows the creation of graphical processing unit (GPU)-accelerated 3D animations using the JavaScript language as part of a website without relying on proprietary browser plugins. This is possible due to the advent of WebGL.


You can download the latest version of Three.js from the GitHub releases or use a Three.js CDN.

Cloning a repository

You can clone a repository from to your local computer.
Cloning with HTTPS URLs
git clone
Cloning with SSH URLs
git clone [email protected]:mrdoob/three.js.git
Cloning with GitHub CLI
gh repo clone mrdoob/three.js

Install via NPM package

Run the following command to locally install the package and its dependencies with NPM.
Downloading and installing packages locally
npm i three
npm install three
yarn add three
Downloading and installing packages globally
npm i -g three
yarn global add three
Install Specific Version of a Package
npm install [email protected]
bower install three


This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

import * as THREE from './js/three.module.js';

let camera, scene, renderer;
let geometry, material, mesh;


function init() {

  camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
  camera.position.z = 1;

  scene = new THREE.Scene();

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

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

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


function animation( time ) {

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

  renderer.render( scene, camera );