3JS_GoodStart_2

by ikatyang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/Detector.js"></script>

CSS

canvas {
    position: fixed;
    top: 0;
    left: 0;
}

JavaScript

var clock = new THREE.Clock();
var scene, renderer, camera;
var cubes = [];
var turn = 1;

THREE.Mesh.prototype.setUpdate = function (dir, speed, xLo, xHi) {
    this.dir   = dir   || 1;
    this.speed = speed || 2;
    this.xLo   = xLo   || -30;
    this.xHi   = xHi   || 30;
};
THREE.Mesh.prototype.update = function () {
	this.position.set (
        this.position.x + this.dir * this.speed, 
        this.position.y, 
        this.position.z
    );
    if (this.position.x > this.xHi) this.dir = -1;
    else if (this.position.x < this.xLo) this.dir = 1;
};

init();
animate();

function init()
{
	var width = window.innerWidth;
	var height = window.innerHeight;

	 //create and start the renderer; choose antialias setting.
	if ( Detector.webgl )
		renderer = new THREE.WebGLRenderer( {antialias:true} );
	else
		renderer = new THREE.CanvasRenderer(); 	

	renderer.setSize (width, height);
	document.body.appendChild (renderer.domElement);
	
	// STATS
	stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.top = '0px';
	stats.domElement.style.zIndex = 100;
	document.body.appendChild( stats.domElement );	
    
	scene = new THREE.Scene();

	var cubeGeometry = new THREE.BoxGeometry (10,10,10);
	var cubeMaterial = new THREE.MeshLambertMaterial ({color: 0x1ec876});
	//cubeMaterial = new THREE.MeshBasicMaterial ({color: 0xff0000, vertexColors: THREE.VertexColor});
	
    var cube1 = new THREE.Mesh (cubeGeometry, cubeMaterial);
    cube1.position.set (0, 0, -30);
    cube1.setUpdate(1, 3, -50, 50);
    cubes.push(cube1);
    
    var cube2 = new THREE.Mesh (cubeGeometry, cubeMaterial);
    cube2.position.set (0, 0, 0);
    cube2.setUpdate(-1, 2, 0, 50);
    cubes.push(cube2);
    
    var cube3 = new THREE.Mesh (cubeGeometry, cubeMaterial);
    cube3.position.set (0, 0, 30);
    cube3.setUpdate(1, 1, -30, 0);
    cubes.push(cube3);
    
    for (var i = 0; i < cubes.length; i++)
        scene.add (cubes[i]);

	camera = new...