Make delicious recipes!

Introduction to Three.js


Three.js is a JavaScript animation framework based on WebGL.
Below is a sample of some Three.JS capabilities.

Check out the ThreeJS API reference to know more details.

You can also browse three.js source-code directly.

Example:

Briefly, any scene in Three.JS consists of the following elements:
  1. Camera: Helps to position your view of the scene.
  2. Geometry: Defines geometry of the object to be drawn.
    Each of the above objects has a different geometry -
    Octahedron,  Icosahedron,   Plane
    Cylinder,    Tetrahedron,   Cube
    Torus,       TorusKnot,     Sphere
    
  3. Material: Defines the material of which the object is made of.
    MeshBasicMaterial is used for four transparent objects above and MeshNormalMaterial are used for remaining two opaque objects.
  4. Mesh: Mesh is just another name given to the object. All 6 objects above are meshes.
  5. Scene: Scene is where meshes are added to.
  6. Renderer: Renderer is what hooks up every mesh and scene and displays it all.

Three.JS code for the above:
var camera;
var scene;
var renderer;
var mesh1, mesh2, mesh3, mesh4, mesh5, mesh6, mesh7, mesh8, mesh9;
var maxX, maxY, maxZ;
var first=true;

window.onload = function()
{
    init();
    animate();
};

function init()
{
    var sceneWidth = window.innerWidth/2;
    var sceneHeight = window.innerHeight/2 + 100;
    // camera: vertical-field-of-view, aspect-ratio, near, far
    camera = new THREE.PerspectiveCamera( 75, sceneWidth / sceneHeight, 1, 10000 );
    camera.position.z = 1000;    
    
    // Define the geometry of the object
    geometry1 = new THREE.OctahedronGeometry( 200, 0 );
    geometry2 = new THREE.IcosahedronGeometry( 200, 0 );
    geometry3 = new THREE.PlaneGeometry( 200, 200, 10, 10 );
    geometry4 = new THREE.CylinderGeometry( 200, 300, 300, 32, 3, true );
    geometry5 = new THREE.TetrahedronGeometry( 200, 0 );
    geometry6 = new THREE.CubeGeometry( 200, 200, 200, 3, 3, 3 );
    geometry7 = new THREE.TorusGeometry( 200, 32, 8, 32 );
    geometry8 = new THREE.TorusKnotGeometry( 200, 32, 8, 16 , 1, 2);
    geometry9 = new THREE.SphereGeometry( 200, 32, 32 );

    // An object becomes visible only if its material-type is defined.
    material1 = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
    material2 = new THREE.MeshNormalMaterial( { color: 0xff0000, wireframe: false } );

    // Mesh actually creates the 3D object from the geometry and the material
    mesh1 = new THREE.Mesh( geometry1, material1 );
    mesh2 = new THREE.Mesh( geometry2, material1 );
    mesh3 = new THREE.Mesh( geometry3, material1 );
    mesh4 = new THREE.Mesh( geometry4, material1 );
    mesh5 = new THREE.Mesh( geometry5, material2 );
    mesh6 = new THREE.Mesh( geometry6, material2 );
    mesh7 = new THREE.Mesh( geometry7, material1 );
    mesh8 = new THREE.Mesh( geometry8, material1 );
    mesh9 = new THREE.Mesh( geometry9, material1 );

    scene = new THREE.Fog(0x55AAFF);
    scene = new THREE.Scene();
    scene.add( mesh1 );
    scene.add( mesh2 );
    scene.add( mesh3 );
    scene.add( mesh4 );
    scene.add( mesh5 );
    scene.add( mesh6 );
    scene.add( mesh7 );
    scene.add( mesh8 );
    scene.add( mesh9 );
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( sceneWidth, sceneHeight );
    maxX = sceneWidth/2;
    maxY = sceneHeight/2;
    maxZ = maxX/2;

    document.getElementById("main").appendChild( renderer.domElement );

    /* Move the objects away from each other */
    var x1=560, x2=-560;
    
    mesh1.position.x = x2;
    mesh1.position.y = x1;
    
    mesh2.position.x = 0;
    mesh2.position.y = x1;
    
    mesh3.position.x = x1;
    mesh3.position.y = x1;
    
    mesh4.position.x = x2;
    mesh4.position.y = 0;
    
    mesh5.position.x = 0;
    mesh5.position.y = 0;
    
    mesh6.position.x = x1;
    mesh6.position.y = 0;
    
    mesh7.position.x = x2;
    mesh7.position.y = x2;
    
    mesh8.position.x = 0;
    mesh8.position.y = x2;
    
    mesh9.position.x = x1;
    mesh9.position.y = x2;
    
    // Render finally
    renderer.render( scene, camera );    
}    

function animate()
{
    // Calls its function argument when the browser page is available to be refreshed
    requestAnimationFrame( animate );
    
    // make some changes to the object so that it appears in motion
    rotate(mesh1);
    rotate(mesh2);
    rotate(mesh3);
    rotate(mesh4);
    rotate(mesh5);
    rotate(mesh6);
    rotate(mesh7);
    rotate(mesh8);
    rotate(mesh9);
    
    renderer.render( scene, camera );    
}

function rotate (m)
{
    m.rotation.x += 0.01;
    m.rotation.y += 0.02;
    m.rotation.z += 0.03;
}











Like us on Facebook to remain in touch
with the latest in technology and tutorials!


Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email: (Your email is not shared with anybody)
Comment:

Facebook comments:

Site Owner: Sachin Goyal