runners

by YouTingKuo

HTML

<script src="http://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>

CSS

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

JavaScript

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

var Runner = function (boundary, zz, sign) {
 	// properties ...
    this.bound = boundary;
    this.zz = zz;
    this.sign = sign;
	var cubeGeometry = new THREE.BoxGeometry (10,10,10);
	var cubeMaterial = new THREE.MeshLambertMaterial ({color: 0x1ec876});
	this.mesh = new THREE.Mesh (cubeGeometry, cubeMaterial);
    scene.add (this.mesh);
    
    this.xx = 0;
};

//method
Runner.prototype.update = function () {
    if (Math.abs (this.xx) > this.bound) {
            this.sign *= -1;
        }
        this.xx += this.sign;
        this.mesh.position.set (this.xx, 0, this.zz);
};

init();
animate();

function init()
{
	var width = window.innerWidth;
	var height = window.innerHeight;
    
	renderer = new THREE.WebGLRenderer( {antialias:true} );

	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();
    
    runner1 = new Runner (30, 0, 3);
    runner2 = new Runner (40, -50, 2);
    runner3 = new Runner (80, 50, 4);

	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 skyboxGeometry = new THREE.BoxGeometry (1000,1000,1000);
	var skyboxMaterial = new THREE.MeshBasicMaterial ({color: 0x1f1f1f, side:THREE.BackSide});
	var skybox = new THREE.Mesh (skyboxGeometry, skyboxMaterial);
	scene.add (skybox);

	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 (0,300,200);
	scene.add (pointLight);
	
	window.addEventListener ('resize',...