three.js THREE.BoxGeometry


THREE.BoxGeometry builds boxes such as cuboids and cubes.


Cubes created using THREE.BoxGeometry would use the same length for all sides.


//Creates scene and camera

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

//Creates renderer and adds it to the DOM

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//The Box!

//BoxGeometry (makes a geometry)
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
//Material to apply to the cube (green)
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
//Applies material to BoxGeometry
var cube = new THREE.Mesh( geometry, material );
//Adds cube to the scene
scene.add( cube );

//Sets camera's distance away from cube (using this explanation only for simplicity's sake - in reality this actually sets the 'depth' of the camera's position)

camera.position.z = 5;


function render() {
  requestAnimationFrame( render );
  renderer.render( scene, camera );

Notice the 'render' function. This renders the cube 60 times a second.

Full Code (with HTML)

<!DOCTYPE html>
    <script src=""></script>


      //Above JavaScript goes here



The line var geometry = new THREE.BoxGeometry( 1, 1, 1 ); gives us a cube. To make a cuboid, just change the parameters - they define the length, height and depth of the cube respectively.


//Longer cuboid
var geometry = new THREE.BoxGeometry( 2, 1, 1 );

More (proving the cube is three-dimensional)

The cube may seem to be just a square. To prove that it is, without doubt, three-dimensional, add the following lines of code to the 'render' function:

cube.rotation.x += 0.05;
cube.rotation.y += 0.05;

And watch as the merry cube spins round... and round... and round...


Not for the faint-hearted...

The uniform colour for the entire cube is... green. Boring. To make each face a different colour, we've to dig to the geometry's faces.

var geometry = new THREE.BoxGeometry(3, 3, 3, 1, 1, 1);

/*Right of spawn face*/
geometry.faces[0].color = new THREE.Color(0xd9d9d9);
geometry.faces[1].color = new THREE.Color(0xd9d9d9);

/*Left of spawn face*/
geometry.faces[2].color = new THREE.Color(0x2196f3);
geometry.faces[3].color = new THREE.Color(0x2196f3);

/*Above spawn face*/
geometry.faces[4].color = new THREE.Color(0xffffff);
geometry.faces[5].color = new THREE.Color(0xffffff);

/*Below spawn face*/
geometry.faces[6].color = new THREE.Color(1, 0, 0);
geometry.faces[7].color = new THREE.Color(1, 0, 0);

/*Spawn face*/
geometry.faces[8].color = new THREE.Color(0, 1, 0);
geometry.faces[9].color = new THREE.Color(0, 1, 0);

/*Opposite spawn face*/
geometry.faces[10].color = new THREE.Color(0, 0, 1);
geometry.faces[11].color = new THREE.Color(0, 0, 1);

var material = new THREE.MeshBasicMaterial( {color: 0xffffff, vertexColors: THREE.FaceColors} );
var cube = new THREE.Mesh(geometry, material);

NOTE: The method of colouring the faces is not the best method, but it works well (enough).


Where's the canvas in the HTML document's body?

There is no need to add a canvas to the body manually. The following three lines

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

create the renderer, its canvas and add the canvas to the DOM.