Pure THREE.JS template

by shravanimmy

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

var scene, scene2, controls,camera,renderer,m1,m2,m3;

init();
animate();

function init()
{	
    var webglEl = document.getElementById('webgl');

    var width  = window.innerWidth,
		height = window.innerHeight;

	scene = new THREE.Scene();
    scene2 = new THREE.Scene();

	camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000);
	camera.position.z = 1.5;

	renderer = new THREE.WebGLRenderer();
	renderer.setSize(width, height);

	scene.add(new THREE.AmbientLight(0x333333));
	scene2.add(new THREE.AmbientLight(0x333333));
    
    m1 = new THREE.Mesh(
        new THREE.PlaneGeometry(1,1),
        new THREE.MeshLambertMaterial({color: 0xaa00aa, side: THREE.DoubleSide})
    );    
    scene.add(m1);

     m2 = new THREE.Mesh(
        new THREE.PlaneGeometry(1,1),
        new THREE.MeshLambertMaterial({color: 0xaaaaaa, side: THREE.DoubleSide})
    );    
    scene.add(m2);
    
     m3 = new THREE.Mesh(wire01
        new THREE.PlaneGeometry(1,1),
        new THREE.MeshLambertMaterial({color: 0x0000aa, side: THREE.DoubleSide})
    );    
    scene.add(m3);    
    
    controls = new THREE.OrbitControls (camera, renderer.domElement);
    document.body.appendChild( renderer.domElement );

    renderer.sortObjects = true;
    
	animate(0);
  
}

function animate(time)
{   m1.rotation.z = time/1000; 
    m2.rotation.z = time/2000; 
    m3.rotation.z = time/3000; 
	controls.update();
    requestAnimationFrame ( animate );  
    renderer.clear();
    renderer.render( scene, camera );
 
    m1.renderOrder = 10*Math.sin(time/1000);
    m2.renderOrder = 10*Math.cos(time/1000); 
    m3.renderOrder = (m1.renderOrder + m2.renderOrder)/2;
 
}