How to install Three.js

Created Mar 2, 2021 at 11:14

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.

You can clone a repository from GitHub.com to your local computer.

Cloning with HTTPS URLs

git clone https://github.com/mrdoob/three.js.git

Cloning with SSH URLs

git clone [email protected]:mrdoob/three.js.git

Cloning with GitHub CLI

gh repo clone mrdoob/three.js

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]

yarn add [email protected]

Bower

bower install three

Example

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;

init();

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 );

}