# three.js THREE.BoxGeometry

## Example

THREE.BoxGeometry builds boxes such as cuboids and cubes.

## Cubes

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

JavaScript

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

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

//Rendering

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

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

Full Code (with HTML)

``````<!DOCTYPE html>
<html>

<title>THREE.BoxGeometry</title>
<script src="http://threejs.org/build/three.js"></script>

<body>

<script>
//Above JavaScript goes here
</script>

</body>

</html>
``````

## Cuboids

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.

Example:

``````...
//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...

## Colourful

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.color = new THREE.Color(0xd9d9d9);
geometry.faces.color = new THREE.Color(0xd9d9d9);

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

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

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

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

/*Opposite spawn face*/
geometry.faces.color = new THREE.Color(0, 0, 1);
geometry.faces.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).

## Notes

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. PDF - Download three.js for free