shuttle run

by k6e2n0t12

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,runner2;

// Runner constructor (class 第一個字母大寫)
var Runner = function (boundary,speed,zAxis,colorGet){
 	// properties ...
    this.bound = boundary;
    this.speed = speed;
    this.z = zAxis;
	var cubeGeometry = new THREE.BoxGeometry (10,10,10);
	var cubeMaterial = new THREE.MeshLambertMaterial ({color: colorGet});
	this.mesh = new THREE.Mesh (cubeGeometry, cubeMaterial);
    scene.add (this.mesh);
    
    this.xx = 0;
    this.sign = 1;
    
    // 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 (0x888888);
    
    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,0.5,0,0x1ec876);
    runner2 = new Runner (30,2.5,50,0xffff76);
    runner3 = new Runner (100,10.5,-50,0x99ff99);
    runner4 = new Runner (60,-0.5,-25,0x080077);
    
	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...