Something to animate
Something to animate :
Just about anything using three.js can be animated including cameras and lights along with anything else you build and place in your scene. These include models from simple geometries to lavish models that you can import from tools such as Blender
Prior to the advent of three.js, simply building a cube to animate using WebGL would have taken mountains of code involving multiple arrays, an in depth knowledge of shaders and a healthy respect for matrix theory.
With three.js, the same can be achieved with just three lines of easy to understand code.
For simplicity we will begin with a very basic model.
A Cube.
A cube possesses a distinct geometry. It has six equal square sides and can be described using about 200 lines of WebGL code (if not more!). Here three.js comes to the rescue creating this geometry with a rather simple 'call' with BoxGeometry (THREE.BoxGeometry) passing arguments for the dimensions.
Using BoxGeometry you can pass different arguments for the dimensions that will result in creating a rectangular cuboid instead of a cube.
'Rectangular Cuboid Geometry' is somewhat of a mouthful though so I guess that is why the authors of three.js settled on 'Box Geometry' instead.
For this tutorial we will stick with a cube.
Our first line of code will create this geometry here with each side of the cube being 4 units (arbitrarily).
var geometry = new THREE.BoxGeometry( 4,4,4 );
O.K so we have a geometry but for it to be 'real' in the sense of our animation it must be made out of something. This 'something' is referred to as 'Material'. Three.js offers many such materials with manifold options to custom and tailor - truly if you can picture it, you can use it.
This tutorial is already getting quite large so we shall restrict our use of material to one called 'MeshLambertMaterial' (THREE.MeshLambertMaterial) and give it a simple color. This is done with the line of code here.
var material = new THREE.MeshLambertMaterial( {color: 0x009900} );
Now that we have a geometry and a material we simply combine them to create an object reffered to as a 'Mesh'.
This is done with the following line of code.
var cube = new THREE.Mesh( geometry, material );
With the line of code above we have created the object called 'cube' by 'meshing' the BoxGeometry called 'geometry' with the material called 'material'.
This sounds complicated as it is quite abstract in its concepts but after completing this tutorial and coming back here to this part of your code to experiment you should realise that it is actually quite simple.
The last thing we need to do here is add this cube to our scene and position our camera.
scene.add( cube );
By default objects are added to the scene (scene.add) to co-ordinates 0,0,0 so to avoid conflicts with our cube and camera we simply move the camera with the following -
camera.position.z = 30;
All the above line of code has done is moved the camera 30 units in the z axis towards you.
Your code should now look like the following -
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera
( 40,( window.innerWidth)/(window.innerHeight), 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var light = new THREE.PointLight(0xffffff);
light.position.set(-100,200,100);
scene.add(light);
var geometry = new THREE.BoxGeometry( 4,4,4 );
var material = new THREE.MeshLambertMaterial({color: 0x009900});
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 30;
</script>
If you look at your page now with a browser you will still see nothing.
However all we need to do now is add some animation and render it.
This last step is suprisingly simple.
