three.js Geometries 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 );
//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;
//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>
<head>
<title>THREE.BoxGeometry</title>
<script src="http://threejs.org/build/three.js"></script>
</head>
<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[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).
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.
