shuttle run

by Alan Lin

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

body {
    overflow: hidden;
}

JavaScript

var clock = new THREE.Clock();
var scene, renderer, camera;
var runner1;

// Runner constructor (class 第一個字母大寫)

//boundary 邊界, z z座標
var Runner = function (boundary,speed,z,color) {
 	// properties ...
    this.bound = boundary;
	var cubeGeometry = new THREE.BoxGeometry (10,10,10);
	var cubeMaterial = new THREE.MeshLambertMaterial ({color});
	this.mesh = new THREE.Mesh (cubeGeometry, cubeMaterial);
    scene.add (this.mesh);
    
    this.xx = 0 ;
    this.sign = 1;
    this.speed = speed || 1;
    this.z = z || 0;
    
    // methods ...
    this.update = function() {
        if (Math.abs (this.xx) > this.bound) {
            this.sign *= -1;
        }
        
        this.xx += this.sign * this.speed;
        this.mesh.position.set (this.xx, 0,this.z);
    };
};

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);
	renderer.setClearColor (0x000000);	
    
    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();

    // create one runner ...
    runner1 = new Runner (20,2,0,0xff0000);
    runner2 = new Runner (50,3,-30,0x00ff00);
    runner3 = new Runner (70,1,30,0x0000ff);
    
	camera = new THREE.PerspectiveCamera (45, width/height, 0.1, 10000);
	camera.position.y = 160;
	camera.position.z = 400;
	camera.lookAt (new THREE.Vector3(0,0,0));

	var gridXZ = new THREE.GridHelper(100, 10);
	gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
	scene.add(gridXZ);

	var pointLight = new THREE.PointLight (0xffffff);
	pointLight.position.set...