Merge pull request #14843 from looeee/examples_car_controls

Examples: update webgl_materials_cars

examples/files.js

@@ -149,7 +149,6 @@ var files = {
 		"webgl_materials_cubemap_balls_reflection",
 		"webgl_materials_cubemap_balls_refraction",
 		"webgl_materials_cubemap_dynamic",
-		"webgl_materials_cubemap_dynamic2",
 		"webgl_materials_cubemap_refraction",
 		"webgl_materials_curvature",
 		"webgl_materials_displacementmap",

examples/js/Car.js

@@ -1,407 +1,305 @@
 /**
  * @author alteredq / http://alteredqualia.com/
+ * @author Lewy Blue https://github.com/looeee
+ *
+ * The model is expected to follow real world car proportions. You can try unusual car types
+ * but your results may be unexpected. Scaled models are also not supported.
+ *
+ * Defaults are rough estimates for a real world scale car model
+ *
  */
 
-THREE.Car = function () {
+THREE.Car = ( function ( ) {
 
-	var scope = this;
+	// private variables
+	var steeringWheelSpeed = 1.5;
+	var maxSteeringRotation = 0.6;
 
-	// car geometry manual parameters
+	var acceleration = 0;
 
-	this.modelScale = 1;
+	var maxSpeedReverse, accelerationReverse, deceleration;
 
-	this.backWheelOffset = 2;
+	var controlKeys = { LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, BRAKE: 32 };
 
-	this.autoWheelGeometry = true;
+	var wheelOrientation = 0;
+	var carOrientation = 0;
 
-	// car geometry parameters automatically set from wheel mesh
-	// 	- assumes wheel mesh is front left wheel in proper global
-	//    position with respect to body mesh
-	//	- other wheels are mirrored against car root
-	//	- if necessary back wheels can be offset manually
+	var root = null;
 
-	this.wheelOffset = new THREE.Vector3();
+	var frontLeftWheelRoot = null;
+	var frontRightWheelRoot = null;
 
-	this.wheelDiameter = 1;
+	var frontLeftWheel = new THREE.Group();
+	var frontRightWheel = new THREE.Group();
+	var backLeftWheel = null;
+	var backRightWheel = null;
 
-	// car "feel" parameters
+	var steeringWheel = null;
 
-	this.MAX_SPEED = 2200;
-	this.MAX_REVERSE_SPEED = - 1500;
+	var wheelDiameter = 1;
+	var length = 1;
 
-	this.MAX_WHEEL_ROTATION = 0.6;
+	var loaded = false;
 
-	this.FRONT_ACCELERATION = 1250;
-	this.BACK_ACCELERATION = 1500;
+	var controls = {
 
-	this.WHEEL_ANGULAR_ACCELERATION = 1.5;
-
-	this.FRONT_DECCELERATION = 750;
-	this.WHEEL_ANGULAR_DECCELERATION = 1.0;
-
-	this.STEERING_RADIUS_RATIO = 0.0023;
-
-	this.MAX_TILT_SIDES = 0.05;
-	this.MAX_TILT_FRONTBACK = 0.015;
-
-	// internal control variables
-
-	this.speed = 0;
-	this.acceleration = 0;
-
-	this.wheelOrientation = 0;
-	this.carOrientation = 0;
-
-	// car rigging
-
-	this.root = new THREE.Object3D();
-
-	this.frontLeftWheelRoot = new THREE.Object3D();
-	this.frontRightWheelRoot = new THREE.Object3D();
-
-	this.bodyMesh = null;
-
-	this.frontLeftWheelMesh = null;
-	this.frontRightWheelMesh = null;
-
-	this.backLeftWheelMesh = null;
-	this.backRightWheelMesh = null;
-
-	this.bodyGeometry = null;
-	this.wheelGeometry = null;
-
-	this.bodyMaterials = null;
-	this.wheelMaterials = null;
-
-	// internal helper variables
-
-	this.loaded = false;
-
-	this.meshes = [];
-
-	// API
-
-	this.enableShadows = function ( enable ) {
-
-		for ( var i = 0; i < this.meshes.length; i ++ ) {
-
-			this.meshes[ i ].castShadow = enable;
-			this.meshes[ i ].receiveShadow = enable;
-
-		}
-
-	};
-
-	this.setVisible = function ( enable ) {
-
-		for ( var i = 0; i < this.meshes.length; i ++ ) {
-
-			this.meshes[ i ].visible = enable;
-			this.meshes[ i ].visible = enable;
-
-		}
-
-	};
-
-	this.loadPartsJSON = function ( bodyURL, wheelURL ) {
-
-		var loader = new THREE.JSONLoader();
-
-		loader.load( bodyURL, function( geometry, materials ) {
-
-			createBody( geometry, materials )
-
-		} );
-		loader.load( wheelURL, function( geometry, materials ) {
-
-			createWheels( geometry, materials )
-
-		} );
-
-	};
-
-	this.loadPartsBinary = function ( bodyURL, wheelURL ) {
-
-		var loader = new THREE.BinaryLoader();
-
-		loader.load( bodyURL, function( geometry, materials ) {
-
-			createBody( geometry, materials )
-
-		} );
-		loader.load( wheelURL, function( geometry, materials ) {
-
-			createWheels( geometry, materials )
-
-		} );
+		brake: false,
+		moveForward: false,
+		moveBackward: false,
+		moveLeft: false,
+		moveRight: false
 
 	};
 
-	this.updateCarModel = function ( delta, controls ) {
-
-		// speed and wheels based on controls
+	function Car( maxSpeed, acceleration, brakePower, turningRadius, keys ) {
 
-		if ( controls.moveForward ) {
+		this.enabled = true;
 
-			this.speed = THREE.Math.clamp( this.speed + delta * this.FRONT_ACCELERATION, this.MAX_REVERSE_SPEED, this.MAX_SPEED );
-			this.acceleration = THREE.Math.clamp( this.acceleration + delta, - 1, 1 );
+		this.elemNames = {
+			flWheel: 'wheel_fl',
+			frWheel: 'wheel_fr',
+			rlWheel: 'wheel_rl',
+			rrWheel: 'wheel_rr',
+			steeringWheel: 'steering_wheel', // set to null to disable
+		};
 
-		}
+		// km/hr
+		this.maxSpeed = maxSpeed || 180;
+		maxSpeedReverse = - this.maxSpeed * 0.25;
 
-		if ( controls.moveBackward ) {
+		// m/s
+		this.acceleration = acceleration || 10;
+		accelerationReverse = this.acceleration * 0.5;
 
+		// metres
+		this.turningRadius = turningRadius || 6;
 
-			this.speed = THREE.Math.clamp( this.speed - delta * this.BACK_ACCELERATION, this.MAX_REVERSE_SPEED, this.MAX_SPEED );
-			this.acceleration = THREE.Math.clamp( this.acceleration - delta, - 1, 1 );
+		// m/s
+		deceleration = this.acceleration * 2;
 
-		}
+		// multiplied with deceleration, so breaking deceleration = ( acceleration * 2 * brakePower ) m/s
+		this.brakePower = brakePower || 10;
 
-		if ( controls.moveLeft ) {
+		// exposed so that a user can use this for various effect, e.g blur
+		this.speed = 0;
 
-			this.wheelOrientation = THREE.Math.clamp( this.wheelOrientation + delta * this.WHEEL_ANGULAR_ACCELERATION, - this.MAX_WHEEL_ROTATION, this.MAX_WHEEL_ROTATION );
+		// keys used to control car - by default the arrow keys and space to brake
+		controlKeys = keys || controlKeys;
 
-		}
+		// local axes of rotation - these are likely to vary between models
+		this.wheelRotationAxis = 'x';
+		this.wheelTurnAxis = 'z';
+		this.steeringWheelTurnAxis = 'y';
 
-		if ( controls.moveRight ) {
+		document.addEventListener( 'keydown', this.onKeyDown, false );
+		document.addEventListener( 'keyup', this.onKeyUp, false );
 
-			this.wheelOrientation = THREE.Math.clamp( this.wheelOrientation - delta * this.WHEEL_ANGULAR_ACCELERATION, - this.MAX_WHEEL_ROTATION, this.MAX_WHEEL_ROTATION );
+	}
 
-		}
+	Car.prototype = {
 
-		// speed decay
+		constructor: Car,
 
-		if ( ! ( controls.moveForward || controls.moveBackward ) ) {
+		onKeyDown: function ( event ) {
 
-			if ( this.speed > 0 ) {
+			switch ( event.keyCode ) {
 
-				var k = exponentialEaseOut( this.speed / this.MAX_SPEED );
+				case controlKeys.BRAKE:
+					controls.brake = true;
+					controls.moveForward = false;
+					controls.moveBackward = false;
+					break;
 
-				this.speed = THREE.Math.clamp( this.speed - k * delta * this.FRONT_DECCELERATION, 0, this.MAX_SPEED );
-				this.acceleration = THREE.Math.clamp( this.acceleration - k * delta, 0, 1 );
+				case controlKeys.UP: controls.moveForward = true; break;
 
-			} else {
+				case controlKeys.DOWN: controls.moveBackward = true; break;
 
-				var k = exponentialEaseOut( this.speed / this.MAX_REVERSE_SPEED );
+				case controlKeys.LEFT: controls.moveLeft = true; break;
 
-				this.speed = THREE.Math.clamp( this.speed + k * delta * this.BACK_ACCELERATION, this.MAX_REVERSE_SPEED, 0 );
-				this.acceleration = THREE.Math.clamp( this.acceleration + k * delta, - 1, 0 );
+				case controlKeys.RIGHT: controls.moveRight = true; break;
 
 			}
 
+		},
 
-		}
+		onKeyUp: function ( event ) {
 
-		// steering decay
+			switch ( event.keyCode ) {
 
-		if ( ! ( controls.moveLeft || controls.moveRight ) ) {
+				case controlKeys.BRAKE: controls.brake = false; break;
 
-			if ( this.wheelOrientation > 0 ) {
+				case controlKeys.UP: controls.moveForward = false; break;
 
-				this.wheelOrientation = THREE.Math.clamp( this.wheelOrientation - delta * this.WHEEL_ANGULAR_DECCELERATION, 0, this.MAX_WHEEL_ROTATION );
+				case controlKeys.DOWN: controls.moveBackward = false; break;
 
-			} else {
+				case controlKeys.LEFT: controls.moveLeft = false; break;
 
-				this.wheelOrientation = THREE.Math.clamp( this.wheelOrientation + delta * this.WHEEL_ANGULAR_DECCELERATION, - this.MAX_WHEEL_ROTATION, 0 );
+				case controlKeys.RIGHT: controls.moveRight = false; break;
 
 			}
 
-		}
-
-		// car update
+		},
 
-		var forwardDelta = this.speed * delta;
+		dispose: function () {
 
-		this.carOrientation += ( forwardDelta * this.STEERING_RADIUS_RATIO ) * this.wheelOrientation;
+			document.removeEventListener( 'keydown', this.onKeyDown, false );
+			document.removeEventListener( 'keyup', this.onKeyUp, false );
 
-		// displacement
+		},
 
-		this.root.position.x += Math.sin( this.carOrientation ) * forwardDelta;
-		this.root.position.z += Math.cos( this.carOrientation ) * forwardDelta;
+		update: function ( delta ) {
 
-		// steering
+			if ( ! loaded || ! this.enabled ) return;
 
-		this.root.rotation.y = this.carOrientation;
+			var brakingDeceleration = 1;
 
-		// tilt
+			if ( controls.brake ) brakingDeceleration = this.brakePower;
 
-		if ( this.loaded ) {
+			if ( controls.moveForward ) {
 
-			this.bodyMesh.rotation.z = this.MAX_TILT_SIDES * this.wheelOrientation * ( this.speed / this.MAX_SPEED );
-			this.bodyMesh.rotation.x = - this.MAX_TILT_FRONTBACK * this.acceleration;
+				this.speed = THREE.Math.clamp( this.speed + delta * this.acceleration, maxSpeedReverse, this.maxSpeed );
+				acceleration = THREE.Math.clamp( acceleration + delta, - 1, 1 );
 
-		}
-
-		// wheels rolling
-
-		var angularSpeedRatio = 1 / ( this.modelScale * ( this.wheelDiameter / 2 ) );
-
-		var wheelDelta = forwardDelta * angularSpeedRatio;
+			}
 
-		if ( this.loaded ) {
+			if ( controls.moveBackward ) {
 
-			this.frontLeftWheelMesh.rotation.x += wheelDelta;
-			this.frontRightWheelMesh.rotation.x += wheelDelta;
-			this.backLeftWheelMesh.rotation.x += wheelDelta;
-			this.backRightWheelMesh.rotation.x += wheelDelta;
+				this.speed = THREE.Math.clamp( this.speed - delta * accelerationReverse, maxSpeedReverse, this.maxSpeed );
+				acceleration = THREE.Math.clamp( acceleration - delta, - 1, 1 );
 
-		}
+			}
 
-		// front wheels steering
+			if ( controls.moveLeft ) {
 
-		this.frontLeftWheelRoot.rotation.y = this.wheelOrientation;
-		this.frontRightWheelRoot.rotation.y = this.wheelOrientation;
+				wheelOrientation = THREE.Math.clamp( wheelOrientation + delta * steeringWheelSpeed, - maxSteeringRotation, maxSteeringRotation );
 
-	};
+			}
 
-	// internal helper methods
+			if ( controls.moveRight ) {
 
-	function createBody ( geometry, materials ) {
+				wheelOrientation = THREE.Math.clamp( wheelOrientation - delta * steeringWheelSpeed, - maxSteeringRotation, maxSteeringRotation );
 
-		scope.bodyGeometry = geometry;
-		scope.bodyMaterials = materials;
+			}
 
-		createCar();
+			// this.speed decay
+			if ( ! ( controls.moveForward || controls.moveBackward ) ) {
 
-	}
+				if ( this.speed > 0 ) {
 
-	function createWheels ( geometry, materials ) {
+					var k = exponentialEaseOut( this.speed / this.maxSpeed );
 
-		scope.wheelGeometry = geometry;
-		scope.wheelMaterials = materials;
+					this.speed = THREE.Math.clamp( this.speed - k * delta * deceleration * brakingDeceleration, 0, this.maxSpeed );
+					acceleration = THREE.Math.clamp( acceleration - k * delta, 0, 1 );
 
-		createCar();
+				} else {
 
-	}
+					var k = exponentialEaseOut( this.speed / maxSpeedReverse );
 
-	function createCar () {
+					this.speed = THREE.Math.clamp( this.speed + k * delta * accelerationReverse * brakingDeceleration, maxSpeedReverse, 0 );
+					acceleration = THREE.Math.clamp( acceleration + k * delta, - 1, 0 );
 
-		if ( scope.bodyGeometry && scope.wheelGeometry ) {
+				}
 
-			// compute wheel geometry parameters
+			}
 
-			if ( scope.autoWheelGeometry ) {
+			// steering decay
+			if ( ! ( controls.moveLeft || controls.moveRight ) ) {
 
-				scope.wheelGeometry.computeBoundingBox();
+				if ( wheelOrientation > 0 ) {
 
-				var bb = scope.wheelGeometry.boundingBox;
+					wheelOrientation = THREE.Math.clamp( wheelOrientation - delta * steeringWheelSpeed, 0, maxSteeringRotation );
 
-				scope.wheelOffset.addVectors( bb.min, bb.max );
-				scope.wheelOffset.multiplyScalar( 0.5 );
+				} else {
 
-				scope.wheelDiameter = bb.max.y - bb.min.y;
+					wheelOrientation = THREE.Math.clamp( wheelOrientation + delta * steeringWheelSpeed, - maxSteeringRotation, 0 );
 
-				scope.wheelGeometry.center();
+				}
 
 			}
 
-			// rig the car
-
-			var s = scope.modelScale,
-				delta = new THREE.Vector3();
-
-			var bodyFaceMaterial = scope.bodyMaterials;
-			var wheelFaceMaterial = scope.wheelMaterials;
-
-			// body
-
-			scope.bodyMesh = new THREE.Mesh( scope.bodyGeometry, bodyFaceMaterial );
-			scope.bodyMesh.scale.set( s, s, s );
-
-			scope.root.add( scope.bodyMesh );
+			var forwardDelta = - this.speed * delta;
 
-			// front left wheel
+			carOrientation -= ( forwardDelta * this.turningRadius * 0.02 ) * wheelOrientation;
 
-			delta.multiplyVectors( scope.wheelOffset, new THREE.Vector3( s, s, s ) );
+			// movement of car
+			root.position.x += Math.sin( carOrientation ) * forwardDelta * length;
+			root.position.z += Math.cos( carOrientation ) * forwardDelta * length;
 
-			scope.frontLeftWheelRoot.position.add( delta );
+			// angle of car
+			root.rotation.y = carOrientation;
 
-			scope.frontLeftWheelMesh = new THREE.Mesh( scope.wheelGeometry, wheelFaceMaterial );
-			scope.frontLeftWheelMesh.scale.set( s, s, s );
+			// wheels rolling
+			var angularSpeedRatio = - 2 / wheelDiameter;
 
-			scope.frontLeftWheelRoot.add( scope.frontLeftWheelMesh );
-			scope.root.add( scope.frontLeftWheelRoot );
+			var wheelDelta = forwardDelta * angularSpeedRatio * length;
 
-			// front right wheel
+			frontLeftWheel.rotation[ this.wheelRotationAxis ] -= wheelDelta;
+			frontRightWheel.rotation[ this.wheelRotationAxis ] -= wheelDelta;
+			backLeftWheel.rotation[ this.wheelRotationAxis ] -= wheelDelta;
+			backRightWheel.rotation[ this.wheelRotationAxis ] -= wheelDelta;
 
-			delta.multiplyVectors( scope.wheelOffset, new THREE.Vector3( - s, s, s ) );
+			// rotation while steering
+			frontLeftWheelRoot.rotation[ this.wheelTurnAxis ] = wheelOrientation;
+			frontRightWheelRoot.rotation[ this.wheelTurnAxis ] = wheelOrientation;
 
-			scope.frontRightWheelRoot.position.add( delta );
+			steeringWheel.rotation[ this.steeringWheelTurnAxis ] = -wheelOrientation * 6;
 
-			scope.frontRightWheelMesh = new THREE.Mesh( scope.wheelGeometry, wheelFaceMaterial );
+		},
 
-			scope.frontRightWheelMesh.scale.set( s, s, s );
-			scope.frontRightWheelMesh.rotation.z = Math.PI;
+		setModel: function ( model, elemNames ) {
 
-			scope.frontRightWheelRoot.add( scope.frontRightWheelMesh );
-			scope.root.add( scope.frontRightWheelRoot );
+			if ( elemNames ) this.elemNames = elemNames;
 
-			// back left wheel
+			root = model;
 
-			delta.multiplyVectors( scope.wheelOffset, new THREE.Vector3( s, s, - s ) );
-			delta.z -= scope.backWheelOffset;
+			this.setupWheels();
+			this.computeDimensions();
 
-			scope.backLeftWheelMesh = new THREE.Mesh( scope.wheelGeometry, wheelFaceMaterial );
+			loaded = true;
 
-			scope.backLeftWheelMesh.position.add( delta );
-			scope.backLeftWheelMesh.scale.set( s, s, s );
+		},
 
-			scope.root.add( scope.backLeftWheelMesh );
+		setupWheels: function () {
 
-			// back right wheel
+			frontLeftWheelRoot = root.getObjectByName( this.elemNames.flWheel );
+			frontRightWheelRoot = root.getObjectByName( this.elemNames.frWheel );
+			backLeftWheel = root.getObjectByName( this.elemNames.rlWheel );
+			backRightWheel = root.getObjectByName( this.elemNames.rrWheel );
 
-			delta.multiplyVectors( scope.wheelOffset, new THREE.Vector3( - s, s, - s ) );
-			delta.z -= scope.backWheelOffset;
+			if ( this.elemNames.steeringWheel !== null ) steeringWheel = root.getObjectByName( this.elemNames.steeringWheel );
 
-			scope.backRightWheelMesh = new THREE.Mesh( scope.wheelGeometry, wheelFaceMaterial );
+			while ( frontLeftWheelRoot.children.length > 0 ) frontLeftWheel.add( frontLeftWheelRoot.children[ 0 ] );
+			while ( frontRightWheelRoot.children.length > 0 ) frontRightWheel.add( frontRightWheelRoot.children[ 0 ] );
 
-			scope.backRightWheelMesh.position.add( delta );
-			scope.backRightWheelMesh.scale.set( s, s, s );
-			scope.backRightWheelMesh.rotation.z = Math.PI;
+			frontLeftWheelRoot.add( frontLeftWheel );
+			frontRightWheelRoot.add( frontRightWheel );
 
-			scope.root.add( scope.backRightWheelMesh );
+		},
 
-			// cache meshes
+		computeDimensions: function () {
 
-			scope.meshes = [ scope.bodyMesh, scope.frontLeftWheelMesh, scope.frontRightWheelMesh, scope.backLeftWheelMesh, scope.backRightWheelMesh ];
+			var bb = new THREE.Box3().setFromObject( frontLeftWheelRoot );
 
-			// callback
+			var size = new THREE.Vector3();
+			bb.getSize( size );
 
-			scope.loaded = true;
+			wheelDiameter = Math.max( size.x, size.y, size.z );
 
-			if ( scope.callback ) {
+			bb.setFromObject( root );
 
-				scope.callback( scope );
-
-			}
+			size = bb.getSize( size );
+			length = Math.max( size.x, size.y, size.z );
 
 		}
 
-	}
-
-	function quadraticEaseOut( k ) {
-
-		return - k * ( k - 2 );
-
-	}
-	function cubicEaseOut( k ) {
-
-		return -- k * k * k + 1;
-
-	}
-	function circularEaseOut( k ) {
-
-		return Math.sqrt( 1 - -- k * k );
-
-	}
-	function sinusoidalEaseOut( k ) {
-
-		return Math.sin( k * Math.PI / 2 );
+	};
 
-	}
 	function exponentialEaseOut( k ) {
 
 		return k === 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1;
 
 	}
 
-};
+	return Car;
+
+} )();

examples/webgl_materials_cars.html

@@ -6,58 +6,53 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
 			body {
-				background:#000;
-				color:#fff;
-				padding:0;
-				margin:0;
-				overflow:hidden;
-				font-family:georgia;
-				text-align:center;
+				font-family: Monospace;
+				background-color: #000;
+				color: #000;
+				margin: 0px;
+				overflow: hidden;
+			}
+			#info {
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+			}
+			#info a {
+				color: red;
+				font-weight: bold;
 			}
-			h1 { }
-			a { color:skyblue; text-decoration:none }
-			canvas { pointer-events:none; z-index:10; position:relative; }
-
-			#d { position:absolute; width: 100%; text-align:center; margin:1em 0 -4.5em 0; z-index:1000; }
-
-			.bwrap { margin:0.5em 0 0 0 }
-			button { font-family:georgia; border:0; background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer; border-radius:3px; }
-			button:hover { background:#333 }
-			#buttons_cars button { color:#fa0 }
-
-			#car_info { text-align:center; }
-			#car_name { font-size:1em }
-			#car_author { font-size:1em }
-
-			#oldie { background:rgb(50,0,0) !important; color:#fff !important; margin-top:7em!important }
 		</style>
 	</head>
 
 	<body>
-		<div id="d">
-			<div id="info">
-				<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl demo :
-				texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a> :
-				<span id="car_info">
-					<span id="car_name">Bugatti Veyron model</span>
-					by <span id="car_author"><a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a></span>
-				</span>
-
-			</div>
-
-			<div id="buttons_cars" class="bwrap">
-				<button id="veyron">Bugatti Veyron</button>
-				<button id="gallardo">Lamborghini Gallardo</button>
-				<button id="f50">Ferrari F50</button>
-				<button id="camaro">Chevrolet Camaro</button>
-			</div>
-
-			<div id="buttons_materials" class="bwrap"></div>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> car materials demo :
+			Ferrari 458 Italia model by <a href="https://sketchfab.com/models/57bf6cc56931426e87494f554df1dab6" target="_blank" rel="noopener">vicent091036</a>
+			<br><br>
+			<strong>MATERIALS:</strong>
+			<span>Body: <select id="body-mat"></select></span>
+			<span>Rims / Trim: <select id="rim-mat"></select></span>
+			<span>Glass: <select id="glass-mat"></select></span><br>
+			<span><strong>Driving Mode</strong>(arrow keys and space)<input type="checkbox" id="drive-toggle"></span>
 		</div>
 
+		<div id="container"></div>
+
 		<script src="../build/three.js"></script>
 
-		<script src="js/loaders/BinaryLoader.js"></script>
+		<script src="js/loaders/DRACOLoader.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
+
+		<script src="js/Car.js"></script>
+
+		<script src="js/controls/OrbitControls.js"></script>
+
+		<script src="js/pmrem/PMREMGenerator.js"></script>
+		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
+		<script src="js/loaders/RGBELoader.js"></script>
+		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
 
 		<script src="js/Detector.js"></script>
 		<script src="js/libs/stats.min.js"></script>
@@ -66,388 +61,262 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var STATS_ENABLED = false;
-
-			var CARS = {
-
-				"veyron": 	{
-
-					name:	"Bugatti Veyron",
-					url: 	"obj/veyron/VeyronNoUv_bin.js",
-					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a>',
-					init_rotation: [ 0, 0, 0 ],
-					scale: 5.5,
-					init_material: 4,
-					body_materials: [ 2 ],
-
-					object: null,
-					buttons: null,
-					materials: null
+			var camera, scene, renderer, controls, stats, carModel, materialsLib, envMap;
 
-				},
+			var bodyMatSelect = document.getElementById( 'body-mat' );
+			var rimMatSelect = document.getElementById( 'rim-mat' );
+			var glassMatSelect = document.getElementById( 'glass-mat' );
 
-				"gallardo": {
+			var driveModeToggle = document.getElementById( 'drive-toggle' );
+			driveModeToggle.addEventListener( 'change', onDriveModeToggle );
 
-					name: 	"Lamborghini Gallardo",
-					url:	"obj/gallardo/GallardoNoUv_bin.js",
-					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank" rel="noopener">machman_3d</a>',
-					init_rotation: [ 0, 0, 0 ],
-					scale: 3.7,
-					init_material: 9,
-					body_materials: [ 3 ],
-
-					object:	null,
-					buttons: null,
-					materials: null
-
-				},
-
-				"f50": {
-
-					name: 	"Ferrari F50",
-					url:	"obj/f50/F50NoUv_bin.js",
-					author: '<a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1687" target="_blank" rel="noopener">daniel sathya</a>',
-					init_rotation: [ 0, 0, 0 ],
-					scale: 0.175,
-					init_material: 2,
-					body_materials: [ 3, 6, 7, 8, 9, 10, 23, 24 ],
-
-					object:	null,
-					buttons: null,
-					materials: null
-
-				},
-
-				"camaro": {
-
-					name: 	"Chevrolet Camaro",
-					url:	"obj/camaro/CamaroNoUv_bin.js",
-					author: '<a href="http://www.turbosquid.com/3d-models/blender-camaro/411348" target="_blank" rel="noopener">dskfnwn</a>',
-					init_rotation: [ 0.0, 0.0, 0.0 /*0, 1, 0*/ ],
-					scale: 75,
-					init_material: 0,
-					body_materials: [ 0 ],
-
-					object:	null,
-					buttons: null,
-					materials: null
-
-				}
+			var lightHolder = new THREE.Group();
+			var clock = new THREE.Clock();
+			var car = new THREE.Car();
+			car.enabled = false;
 
+			var carParts = {
+				body: [],
+				rims:[],
+				glass: [],
 			};
 
 
-			var container, stats;
-
-			var camera, scene, renderer;
-
-			var m, mi;
-
-			var directionalLight, pointLight;
-
-			var mouseX = 0, mouseY = 0;
-
-			var windowHalfX = window.innerWidth / 2;
-			var windowHalfY = window.innerHeight / 2;
-
-			var loader = new THREE.BinaryLoader();
-
-			init();
-			animate();
+			var damping = 5.0;
+			var distance = 5;
+			var cameraTarget = new THREE.Vector3();
+			var origin = new THREE.Vector3();
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				// CAMERAS
+				var container = document.getElementById( 'container' );
 
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 100000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 200 );
+				camera.position.set( 3.25, 1.25, -5 );
 
-				// SCENE
-
-				var textureCube = new THREE.CubeTextureLoader()
-					.setPath( 'textures/cube/Bridge2/')
-					.load( [ 'posx.jpg', 'negx.jpg', 'posy.jpg', 'negy.jpg', 'posz.jpg', 'negz.jpg' ] );
+				controls = new THREE.OrbitControls( camera, container );
+				controls.enableDamping = true;
+				controls.dampingFactor = 0.25;
+				controls.target.set( 0, 0.75, 0 );
 
 				scene = new THREE.Scene();
-				scene.background = textureCube;
-
-				// LIGHTS
-
-				var ambient = new THREE.AmbientLight( 0x050505 );
-				scene.add( ambient );
-
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 2 );
-				directionalLight.position.set( 2, 1.2, 10 ).normalize();
-				scene.add( directionalLight );
-
-				directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
-				directionalLight.position.set( -2, 1.2, -10 ).normalize();
-				scene.add( directionalLight );
-
-				pointLight = new THREE.PointLight( 0xffaa00, 2 );
-				pointLight.position.set( 2000, 1200, 10000 );
-				scene.add( pointLight );
-
-				//
-
-				renderer = new THREE.WebGLRenderer();
+				scene.fog = new THREE.Fog( 0xa0a0a0, 10, 80 );
+
+				scene.background = new THREE.CubeTextureLoader()
+					.setPath( 'textures/cube/skybox/')
+					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
+
+				ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2400, 2400 ), new THREE.MeshStandardMaterial( { color: 0xffffff, metalness: 0, roughness: 1 } ) );
+				ground.rotation.x = - Math.PI / 2;
+				ground.receiveShadow = true;
+				scene.add( ground );
+
+				var grid = new THREE.GridHelper( 2400, 120, 0x000000, 0x000000 );
+				grid.material.opacity = 0.2;
+				grid.material.transparent = true;
+				scene.add( grid );
+
+				var hemiLight = new THREE.HemisphereLight( 0xfefeb4, 0x99ccff, 0.3 );
+				hemiLight.position.set( -1.5, 1.5, 1.5 );
+				scene.add( hemiLight );
+
+				shadowLight  = new THREE.DirectionalLight( 0xffffff, 0.3 );
+				shadowLight.position.set( -1.5, 1.5, 1.5 );
+				shadowLight.castShadow = true;
+				shadowLight.shadow.width = 1024;
+				shadowLight.shadow.height = 1024;
+				shadowLight.shadow.camera.top = 2;
+				shadowLight.shadow.camera.bottom = -2;
+				shadowLight.shadow.camera.left = -2.5;
+				shadowLight.shadow.camera.right = 2.5;
+				shadowLight.shadow.camera.far = 5.5;
+				shadowLight.shadow.bias = -0.025;
+
+				lightHolder.add( shadowLight, shadowLight.target );
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.gammaOutput = true;
+				renderer.shadowMap.enabled = true;
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
-				if ( STATS_ENABLED ) {
-
-					stats = new Stats();
-					container.appendChild( stats.dom );
-
-				}
-
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-
-				// common materials
+				stats = new Stats();
+				container.appendChild( stats.dom );
 
-				var mlib = {
+				initCar();
 
-				"Orange": 	new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
-				"Blue": 	new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.3 } ),
-				"Red": 		new THREE.MeshLambertMaterial( { color: 0x660000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
-				"Black": 	new THREE.MeshLambertMaterial( { color: 0x000000, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.15 } ),
-				"White":	new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
-
-				"Carmine": 	new THREE.MeshPhongMaterial( { color: 0x770000, specular:0xffaaaa, envMap: textureCube, combine: THREE.MultiplyOperation } ),
-				"Gold": 	new THREE.MeshPhongMaterial( { color: 0xaa9944, specular:0xbbaa99, shininess:50, envMap: textureCube, combine: THREE.MultiplyOperation } ),
-				"Bronze":	new THREE.MeshPhongMaterial( { color: 0x150505, specular:0xee6600, shininess:10, envMap: textureCube, combine: THREE.MixOperation, reflectivity: 0.25 } ),
-				"Chrome": 	new THREE.MeshPhongMaterial( { color: 0xffffff, specular:0xffffff, envMap: textureCube, combine: THREE.MultiplyOperation } ),
+				window.addEventListener( 'resize', onWindowResize, false );
 
-				"Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: textureCube, combine: THREE.MultiplyOperation } ),
-				"Blue metal": 	new THREE.MeshLambertMaterial( { color: 0x001133, envMap: textureCube, combine: THREE.MultiplyOperation } ),
-				"Red metal": 	new THREE.MeshLambertMaterial( { color: 0x770000, envMap: textureCube, combine: THREE.MultiplyOperation } ),
-				"Green metal": 	new THREE.MeshLambertMaterial( { color: 0x007711, envMap: textureCube, combine: THREE.MultiplyOperation } ),
-				"Black metal":	new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube, combine: THREE.MultiplyOperation } ),
+				renderer.setAnimationLoop( function() {
 
-				"Pure chrome": 	new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: textureCube } ),
-				"Dark chrome":	new THREE.MeshLambertMaterial( { color: 0x444444, envMap: textureCube } ),
-				"Darker chrome":new THREE.MeshLambertMaterial( { color: 0x222222, envMap: textureCube } ),
+					update();
 
-				"Black glass": 	new THREE.MeshLambertMaterial( { color: 0x101016, envMap: textureCube, opacity: 0.975, transparent: true } ),
-				"Dark glass":	new THREE.MeshLambertMaterial( { color: 0x101046, envMap: textureCube, opacity: 0.25, transparent: true } ),
-				"Blue glass":	new THREE.MeshLambertMaterial( { color: 0x668899, envMap: textureCube, opacity: 0.75, transparent: true } ),
-				"Light glass":	new THREE.MeshBasicMaterial( { color: 0x223344, envMap: textureCube, opacity: 0.25, transparent: true, combine: THREE.MixOperation, reflectivity: 0.25 } ),
+					renderer.render( scene, camera );
 
-				"Red glass":	new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.75, transparent: true } ),
-				"Yellow glass":	new THREE.MeshLambertMaterial( { color: 0xffffaa, opacity: 0.75, transparent: true } ),
-				"Orange glass":	new THREE.MeshLambertMaterial( { color: 0x995500, opacity: 0.75, transparent: true } ),
+				} );
 
-				"Orange glass 50":	new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5, transparent: true } ),
-				"Red glass 50": 	new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } ),
+			}
 
-				"Fullblack rough":	new THREE.MeshLambertMaterial( { color: 0x000000 } ),
-				"Black rough":		new THREE.MeshLambertMaterial( { color: 0x050505 } ),
-				"Darkgray rough":	new THREE.MeshLambertMaterial( { color: 0x090909 } ),
-				"Red rough":		new THREE.MeshLambertMaterial( { color: 0x330500 } ),
+			var genCubeUrls = function( prefix, postfix ) {
+				return [
+					prefix + 'px' + postfix, prefix + 'nx' + postfix,
+					prefix + 'py' + postfix, prefix + 'ny' + postfix,
+					prefix + 'pz' + postfix, prefix + 'nz' + postfix
+				];
+			};
 
-				"Darkgray shiny":	new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x050505 } ),
-				"Gray shiny":		new THREE.MeshPhongMaterial( { color: 0x050505, shininess: 20 } )
+			var hdrUrls = genCubeUrls( './textures/cube/pisaHDR/', '.hdr' );
+			new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
 
-				};
+				var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
+				pmremGenerator.update( renderer );
 
-				// Gallardo materials
+				var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+				pmremCubeUVPacker.update( renderer );
 
-				CARS[ "gallardo" ].materials = {
+				var hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
 
-					body: [
+				envMap = hdrCubeRenderTarget.texture;
 
-						[ "Orange", 	mlib[ "Orange" ] ],
-						[ "Blue", 		mlib[ "Blue" ] ],
-						[ "Red", 		mlib[ "Red" ] ],
-						[ "Black", 		mlib[ "Black" ] ],
-						[ "White", 		mlib[ "White" ] ],
+				initMaterials();
+				initMaterialSelectionMenus();
 
-						[ "Orange metal", 	mlib[ "Orange metal" ] ],
-						[ "Blue metal", 	mlib[ "Blue metal" ] ],
-						[ "Green metal", 	mlib[ "Green metal" ] ],
-						[ "Black metal", 	mlib[ "Black metal" ] ],
+				hdrCubeMap.dispose();
+				pmremGenerator.dispose();
+				pmremCubeUVPacker.dispose();
 
-						[ "Carmine", 	mlib[ "Carmine" ] ],
-						[ "Gold", 		mlib[ "Gold" ] ],
-						[ "Bronze", 	mlib[ "Bronze" ] ],
-						[ "Chrome", 	mlib[ "Chrome" ] ]
+			} );
 
-					]
 
-				};
+			function initCar() {
 
-				m = CARS[ "gallardo" ].materials;
-				mi = CARS[ "gallardo" ].init_material;
+				THREE.DRACOLoader.setDecoderPath( 'js/libs/draco/gltf/' );
 
-				CARS[ "gallardo" ].mmap = {
+				var loader = new THREE.GLTFLoader();
+				loader.setDRACOLoader( new THREE.DRACOLoader() );
 
-					0: mlib[ "Pure chrome" ], 	// wheels chrome
-					1: mlib[ "Black rough" ],   // tire
-					2: mlib[ "Black glass" ], 	// windshield
-					3: m.body[ mi ][ 1 ], 		// body
-					4: mlib[ "Red glass" ],    	// back lights
-					5: mlib[ "Yellow glass" ],  // front lights
-					6: mlib[ "Dark chrome" ]	// windshield rim
+				loader.load( 'models/fbx/ferrari.glb', function( gltf ) {
 
-				};
+					carModel = gltf.scene.children[ 0 ];
 
-				// Veyron materials
+					// add lightHolder to car so that the shadow will track the car as it moves
+					carModel.add( lightHolder );
 
-				CARS[ "veyron" ].materials = {
+					car.setModel( carModel );
 
-					body: [
+					carModel.traverse( function ( child ) {
 
-						[ "Orange metal", 	mlib[ "Orange metal" ] ],
-						[ "Blue metal", 	mlib[ "Blue metal" ] ],
-						[ "Red metal", 		mlib[ "Red metal" ] ],
-						[ "Green metal",	mlib[ "Green metal" ] ],
-						[ "Black metal", 	mlib[ "Black metal" ] ],
+						if ( child.isMesh ) {
 
-						[ "Gold", 		mlib[ "Gold" ] ],
-						[ "Bronze", 	mlib[ "Bronze" ] ],
-						[ "Chrome", 	mlib[ "Chrome" ] ]
+							child.castShadow = true;
+							child.receiveShadow = true;
+							child.material.envMap = envMap;
 
-					]
+						}
 
-				};
+					} );
 
-				m = CARS[ "veyron" ].materials;
-				mi = CARS[ "veyron" ].init_material;
+					scene.add( carModel );
 
-				CARS[ "veyron" ].mmap = {
+					// car parts for material selection
+					carParts.body.push( carModel.getObjectByName( 'body' ) );
 
-					0: mlib[ "Black rough" ],		// tires + inside
-					1: mlib[ "Pure chrome" ],		// wheels + extras chrome
-					2: m.body[ mi ][ 1 ], 			// back / top / front torso
-					3: mlib[ "Dark glass" ],		// glass
-					4: mlib[ "Pure chrome" ],		// sides torso
-					5: mlib[ "Pure chrome" ],		// engine
-					6: mlib[ "Red glass 50" ],		// backlights
-					7: mlib[ "Orange glass 50" ]	// backsignals
+					carParts.rims.push(
+						carModel.getObjectByName( 'rim_fl' ),
+						carModel.getObjectByName( 'rim_fr' ),
+						carModel.getObjectByName( 'rim_rr' ),
+						carModel.getObjectByName( 'rim_rl' ),
+						carModel.getObjectByName( 'trim' ),
+					);
 
-				};
+					carParts.glass.push(
+						carModel.getObjectByName( 'glass' ),
+					 );
 
-				// F50 materials
+					updateMaterials();
 
-				CARS[ "f50" ].materials = {
+				});
 
-					body: [
+			}
 
-						[ "Orange", 	mlib[ "Orange" ] ],
-						[ "Blue", 		mlib[ "Blue" ] ],
-						[ "Red", 		mlib[ "Red" ] ],
-						[ "Black", 		mlib[ "Black" ] ],
-						[ "White", 		mlib[ "White" ] ],
+			function initMaterials() {
 
-						[ "Orange metal", 	mlib[ "Orange metal" ] ],
-						[ "Blue metal", 	mlib[ "Blue metal" ] ],
-						[ "Black metal", 	mlib[ "Black metal" ] ],
+				materialsLib = {
 
-						[ "Carmine", 	mlib[ "Carmine" ] ],
-						[ "Gold", 		mlib[ "Gold" ] ],
-						[ "Bronze", 	mlib[ "Bronze" ] ],
-						[ "Chrome", 	mlib[ "Chrome" ] ]
+					main: [
 
-					]
+						new THREE.MeshStandardMaterial( { color: 0xff6600, envMap: envMap, metalness: 0.25, roughness: 0.15, name: 'orange' } ),
+						new THREE.MeshStandardMaterial( { color: 0x001133, envMap: envMap, metalness: 0.25, roughness: 0.15, name: 'blue' } ),
+						new THREE.MeshStandardMaterial( { color: 0x660000, envMap: envMap, metalness: 0.25, roughness: 0.15, name: 'red' } ),
+						new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 1, roughness: 0, name: 'black' } ),
+						new THREE.MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 0.25, roughness: 0.15, name: 'white' } ),
+						new THREE.MeshStandardMaterial( { color: 0xcccccc, envMap: envMap, metalness: 1, roughness: 0, name: 'metallic' } ),
 
-				};
+					],
 
-				m = CARS[ "f50" ].materials;
-				mi = CARS[ "f50" ].init_material;
+					glass: [
 
-				CARS[ "f50" ].mmap = {
+						new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 0.0, roughness: 0.25, opacity: 0.5, transparent: true, refractionRatio: 0.25, name: 'clear'} ),
+						new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 0, roughness: 0.25, opacity: 0.75, transparent: true, refractionRatio: 0.75, name: 'smoked' } ),
+						new THREE.MeshStandardMaterial( { color: 0x001133, envMap: envMap, metalness: 0, roughness: 0.25, opacity: 0.5, transparent: true, refractionRatio: 0.75, name: 'blue' } ),
 
-					0:  mlib[ "Dark chrome" ], 		// interior + rim
-					1:  mlib[ "Pure chrome" ], 		// wheels + gears chrome
-					2:  mlib[ "Blue glass" ], 		// glass
-					3:  m.body[ mi ][ 1 ], 			// torso mid + front spoiler
-					4:  mlib[ "Darkgray shiny" ], 	// interior + behind seats
-					5:  mlib[ "Darkgray shiny" ], 	// tiny dots in interior
-					6:  m.body[ mi ][ 1 ], 			// back torso
-					7:  m.body[ mi ][ 1 ], 			// right mirror decal
-					8:  m.body[ mi ][ 1 ], 			// front decal
-					9:  m.body[ mi ][ 1 ], 			// front torso
-					10: m.body[ mi ][ 1 ], 			// left mirror decal
-					11: mlib[ "Pure chrome" ], 		// engine
-					12: mlib[ "Darkgray rough" ],	// tires side
-					13: mlib[ "Darkgray rough" ],	// tires bottom
-					14: mlib[ "Darkgray shiny" ], 	// bottom
-					15: mlib[ "Black rough" ],		// ???
-					16: mlib[ "Orange glass" ],		// front signals
-					17: mlib[ "Dark chrome" ], 		// wheels center
-					18: mlib[ "Red glass" ], 		// back lights
-					19: mlib[ "Black rough" ], 		// ???
-					20: mlib[ "Red rough" ], 		// seats
-					21: mlib[ "Black rough" ], 		// back plate
-					22: mlib[ "Black rough" ], 		// front light dots
-					23: m.body[ mi ][ 1 ], 			// back torso
-					24: m.body[ mi ][ 1 ] 			// back torso center
+					],
 
-				};
+				}
 
+			}
 
-				// Camero materials
+			function initMaterialSelectionMenus() {
 
-				CARS[ "camaro" ].materials = {
+				function addOption( name, menu ) {
 
-					body: [
+					var option = document.createElement( 'option' );
+					option.text = name;
+					option.value = name;
+					menu.add( option );
 
-						[ "Orange", 	mlib[ "Orange" ] ],
-						[ "Blue", 		mlib[ "Blue" ] ],
-						[ "Red", 		mlib[ "Red" ] ],
-						[ "Black", 		mlib[ "Black" ] ],
-						[ "White", 		mlib[ "White" ] ],
+				}
 
-						[ "Orange metal", 	mlib[ "Orange metal" ] ],
-						[ "Blue metal", 	mlib[ "Blue metal" ] ],
-						[ "Red metal", 		mlib[ "Red metal" ] ],
-						[ "Green metal", 	mlib[ "Green metal" ] ],
-						[ "Black metal", 	mlib[ "Black metal" ] ],
+				materialsLib.main.forEach( function( material ) {
 
-						[ "Gold", 		mlib[ "Gold" ] ],
-						[ "Bronze", 	mlib[ "Bronze" ] ],
-						[ "Chrome", 	mlib[ "Chrome" ] ]
+					addOption( material.name, bodyMatSelect );
+					addOption( material.name, rimMatSelect );
 
-					]
+				} );
 
-				};
+				materialsLib.glass.forEach( function( material ) {
 
-				m = CARS[ "camaro" ].materials;
-				mi = CARS[ "camaro" ].init_material;
+					addOption( material.name, glassMatSelect );
 
-				CARS[ "camaro" ].mmap = {
+				} );
 
-					0: m.body[ mi ][ 1 ], 			// car body
-					1: mlib[ "Pure chrome" ], 		// wheels chrome
-					2: mlib[ "Pure chrome" ], 		// grille chrome
-					3: mlib[ "Dark chrome" ], 		// door lines
-					4: mlib[ "Light glass" ], 		// windshield
-					5: mlib[ "Gray shiny" ],        // interior
-					6: mlib[ "Black rough" ],       // tire
-					7: mlib[ "Fullblack rough" ],   // tireling
-					8: mlib[ "Fullblack rough" ]    // behind grille
+				bodyMatSelect.selectedIndex = 2;
+				rimMatSelect.selectedIndex = 4;
+				glassMatSelect.selectedIndex = 0;
 
-				};
+				bodyMatSelect.addEventListener( 'change', updateMaterials );
+				rimMatSelect.addEventListener( 'change', updateMaterials );
+				glassMatSelect.addEventListener( 'change', updateMaterials );
 
-				loader.load( CARS[ "veyron" ].url, function( geometry ) { createScene( geometry, "veyron" ) } );
+			}
 
-				for( var c in CARS ) initCarButton( c );
+			// set materials to the current values of the selection menus
+			function updateMaterials() {
 
-				//
+				var bodyMat = materialsLib.main[ bodyMatSelect.selectedIndex ];
+				var rimMat = materialsLib.main[ rimMatSelect.selectedIndex ];
+				var glassMat = materialsLib.glass[ glassMatSelect.selectedIndex ];
 
-				window.addEventListener( 'resize', onWindowResize, false );
+				carParts.body.forEach( function ( part ) { part.material = bodyMat; } );
+				carParts.rims.forEach( function ( part ) { part.material = rimMat; } );
+				carParts.glass.forEach( function ( part ) { part.material = glassMat; } );
 
 			}
 
 			function onWindowResize() {
 
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
@@ -455,152 +324,71 @@
 
 			}
 
-			function initCarButton( car ) {
-
-				$( car ).addEventListener( 'click', function() {
+			function onDriveModeToggle() {
 
-					if ( ! CARS[ car ].object ) {
+				car.enabled = !car.enabled;
+				controls.enabled = !car.enabled;
 
-						loader.load( CARS[ car ].url, function( geometry ) { createScene( geometry, car ) } );
-
-					} else {
-
-						switchCar( car );
-
-					}
-
-				}, false );
+				controls.reset();
+				carModel.position.copy( origin );
 
 			}
 
-			function $( id ) { return document.getElementById( id ) }
-			function button_name( car, index ) { return "m_" + car  + "_" + index }
-
-			function switchCar( car ) {
-
-				for ( var c in CARS ) {
+			function update() {
 
-					if ( c != car && CARS[ c ].object ) {
+				var delta = clock.getDelta();
 
-						CARS[ c ].object.visible = false;
-						CARS[ c ].buttons.style.display = "none";
+				if ( carModel && !controls.enabled ) {
 
-					}
-				}
-
-				CARS[ car ].object.visible = true;
-				CARS[ car ].buttons.style.display = "block";
+					car.update( delta );
 
-				$( "car_name" ).innerHTML = CARS[ car ].name + " model";
-				$( "car_author" ).innerHTML = CARS[ car ].author;
-
-			}
+					updateCamera( delta );
 
-			function createButtons( materials, car ) {
+					resetPosition();
 
-				var buttons, i, src = "";
+					// keep the light (and shadow) pointing in the same direction as the car rotates
+					lightHolder.rotation.y = -carModel.rotation.y;
 
-				for( i = 0; i < materials.length; i ++ ) {
+				} else {
 
-					src += '<button id="' + button_name( car, i ) + '">' + materials[ i ][ 0 ] + '</button> ';
+					controls.update();
 
 				}
 
-				buttons = document.createElement( "div" );
-				buttons.innerHTML = src;
-
-				$( "buttons_materials" ).appendChild( buttons );
-
-				return buttons;
-
-			}
-
-			function attachButtonMaterials( materials, faceMaterials, material_indices, car ) {
-
-				for( var i = 0; i < materials.length; i ++ ) {
-
-					$( button_name( car, i ) ).counter = i;
-					$( button_name( car, i ) ).addEventListener( 'click', function() {
-
-						for ( var j = 0; j < material_indices.length; j ++ ) {
-
-							faceMaterials[ material_indices [ j ] ] = materials[ this.counter ][ 1 ];
-
-						}
-
-					}, false );
-
-				}
+				stats.update();
 
 			}
 
-			function createScene( geometry, car ) {
-
-				geometry.sortFacesByMaterialIndex();
-
-				var m = [],
-					s = CARS[ car ].scale * 1,
-					r = CARS[ car ].init_rotation,
-					materials = CARS[ car ].materials,
-					mi = CARS[ car ].init_material,
-					bm = CARS[ car ].body_materials;
-
-				for ( var i in CARS[ car ].mmap ) {
-
-					m[ i ] = CARS[ car ].mmap[ i ];
-
-				}
-
-				var mesh = new THREE.Mesh( geometry, m );
-
-				mesh.rotation.x = r[ 0 ];
-				mesh.rotation.y = r[ 1 ];
-				mesh.rotation.z = r[ 2 ];
+			function updateCamera( delta ) {
 
-				mesh.scale.x = mesh.scale.y = mesh.scale.z = s;
+				carModel.getWorldPosition( cameraTarget );
+				cameraTarget.y = 2.5;
+				cameraTarget.z += distance;
 
-				scene.add( mesh );
-
-				CARS[ car ].object = mesh;
-
-				CARS[ car ].buttons = createButtons( materials.body, car );
-				attachButtonMaterials( materials.body, m, bm, car );
-
-				switchCar( car );
+				camera.position.lerp( cameraTarget, delta * damping );
+				camera.lookAt( carModel.position );
 
 			}
 
-			function onDocumentMouseMove(event) {
+			function resetPosition() {
 
-				mouseY = ( event.clientY - window.innerHeight );
+				if( carModel.position.distanceTo( origin ) > 1200 ) {
 
-			}
+					carModel.position.copy( origin );
+					car.speed = 0;
+					car.enabled = false;
 
-			//
+					setTimeout( function() {
 
-			function animate() {
+						car.enabled = true;
 
-				requestAnimationFrame( animate );
+					}, 1500 )
 
-				render();
+				}
 
 			}
 
-			function render() {
-
-				var timer = -0.0002 * Date.now();
-
-				camera.position.x = 1000 * Math.cos( timer );
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-				camera.position.z = 1000 * Math.sin( timer );
-
-				camera.lookAt( scene.position );
-
-				renderer.render( scene, camera );
-
-				if ( STATS_ENABLED ) stats.update();
-
-			}
+			init();
 
 		</script>
 

examples/webgl_materials_cubemap_dynamic.html

@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html lang="en">
 	<head>
 		<title>three.js webgl - materials - dynamic cube reflection</title>
@@ -6,982 +6,208 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<style>
 			body {
-				background: #000;
-				color: #333;
-				padding: 0;
-				margin: 0;
+				background-color: #000000;
+				margin: 0px;
 				overflow: hidden;
-				font-family: georgia;
-				font-size:1em;
-				text-align: center;
 			}
-			a { color: white }
 
-			#info { position: absolute; top: 10px; width: 100%; }
-			#container { position: absolute; top: 0px; }
-			#footer { position: absolute; bottom: 10px; width: 100%; }
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				font-weight: bold;
+				text-align:center;
+			}
 
-			.h { color: skyblue }
-			.c { display: inline; margin-left: 1em }
+			a {
+				color: #ffffff;
+			}
 		</style>
 	</head>
-
 	<body>
-		<div id="container"></div>
-
-		<div id="info">
-			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl dynamic cube reflection demo -
-			veyron by <a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1129" target="_blank" rel="noopener">Troyano</a> -
-			gallardo by <a href="http://artist-3d.com/free_3d_models/dnm/model_disp.php?uid=1711" target="_blank" rel="noopener">machman_3d</a>
-		</div>
-
-		<div id="footer">
-			cars control: <span class="h">WASD</span> / <span class="h">arrows</span>
 
-			<div class="c">cameras: <span class="h">1</span> / <span class="h">2</span> / <span class="h">3</span> / <span class="h">4</span>
-			/ <span class="h">5</span> / <span class="h">6</span>
-			</div>
-
-			<div class="c">
-			day / night: <span class="h">n</span>
-			</div>
-
-			<div class="c">
-			motion blur: <span class="h">b</span>
-			</div>
-		</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js webgl</a> - materials - dynamic cube reflection<br/>Photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">J&oacute;n Ragnarsson</a>.</div>
 
 		<script src="../build/three.js"></script>
 
-		<script src="js/loaders/BinaryLoader.js"></script>
-
-		<script src="js/shaders/BleachBypassShader.js"></script>
-		<script src="js/shaders/BlendShader.js"></script>
-		<script src="js/shaders/ConvolutionShader.js"></script>
-		<script src="js/shaders/CopyShader.js"></script>
-		<script src="js/shaders/FXAAShader.js"></script>
-		<script src="js/shaders/HorizontalTiltShiftShader.js"></script>
-		<script src="js/shaders/VerticalTiltShiftShader.js"></script>
-		<script src="js/shaders/TriangleBlurShader.js"></script>
-		<script src="js/shaders/VignetteShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/BloomPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/SavePass.js"></script>
-
-		<script src="js/Car.js"></script>
-		<script src="js/Detector.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
 		<script>
 
-			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
-
-			var FOLLOW_CAMERA = false;
-
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
-
-			var SHADOW_MAP_WIDTH = 1024, SHADOW_MAP_HEIGHT = 1024;
-
-			var container, stats;
-
-			var camera, cameraTarget, scene, renderer;
-			var renderTarget;
-
-			var spotLight, ambientLight;
-
-			var cubeCamera;
-
-			var clock = new THREE.Clock();
-
-			var controlsGallardo = {
-
-				moveForward: false,
-				moveBackward: false,
-				moveLeft: false,
-				moveRight: false
-
-			};
-
-			var controlsVeyron = {
+			var camera, scene, renderer;
+			var cube, sphere, torus, material;
 
-				moveForward: false,
-				moveBackward: false,
-				moveLeft: false,
-				moveRight: false
+			var count = 0, cubeCamera1, cubeCamera2;
 
-			};
+			var lon = 0, lat = 0;
+			var phi = 0, theta = 0;
 
-			var mlib;
+			var textureLoader = new THREE.TextureLoader();
 
-			var gallardo, veyron, currentCar;
+			textureLoader.load( 'textures/2294472375_24a3b8ef46_o.jpg', function ( texture ) {
 
-			var composer, effectSave, effectBlend, effectFXAA, effectBloom;
-			var hblur, vblur;
+				texture.mapping = THREE.UVMapping;
 
-			var config = {
-				"veyron"	: { r: 0.5,	 model: null, backCam: new THREE.Vector3( 550, 100, -1000 ) },
-				"gallardo"	: { r: 0.35, model: null, backCam: new THREE.Vector3( 550,   0, -1500 ) }
-			};
+				init( texture );
+				animate();
 
-			var flareA, flareB;
-			var sprites = [];
+			} );
 
-			var ground, groundBasic;
+			function init( texture ) {
 
-			var blur = false;
-
-			var v = 0.9, vdir = 1;
-
-			init();
-			animate();
-
-			function init() {
-
-				container = document.getElementById( 'container' );
-
-				camera = new THREE.PerspectiveCamera( 18, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
-				camera.position.set( 3000, 0, 3000 );
-
-				cameraTarget = new THREE.Vector3();
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				scene = new THREE.Scene();
-				scene.background = new THREE.Color().setHSL( 0.51, 0.6, 0.6 );
-				scene.fog = new THREE.Fog( scene.background, 3000, 10000 );
-
-				createScene();
-
-				// LIGHTS
-
-				ambientLight = new THREE.AmbientLight( 0x555555 );
-				scene.add( ambientLight );
-
-				spotLight = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI/2 );
-				spotLight.position.set( 0, 1800, 1500 );
-				spotLight.target.position.set( 0, 0, 0 );
-				spotLight.castShadow = true;
 
-				spotLight.shadow.camera.near = 100;
-				spotLight.shadow.camera.far = camera.far;
-				spotLight.shadow.camera.fov = 50;
+				var mesh = new THREE.Mesh( new THREE.SphereBufferGeometry( 500, 32, 16 ), new THREE.MeshBasicMaterial( { map: texture } ) );
+				mesh.geometry.scale( - 1, 1, 1 );
+				scene.add( mesh );
 
-				spotLight.shadow.bias = -0.00125;
-				spotLight.shadow.mapSize.width = SHADOW_MAP_WIDTH;
-				spotLight.shadow.mapSize.height = SHADOW_MAP_HEIGHT;
-
-				scene.add( spotLight );
-
-				// RENDERER
-
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-				container.appendChild( renderer.domElement );
-
-				// SHADOW
-
-				renderer.shadowMap.enabled = true;
-
-				// STATS
-
-				stats = new Stats();
-				container.appendChild( stats.dom );
-
-				// CUBE CAMERA
-
-				cubeCamera = new THREE.CubeCamera( 1, 100000, 128 );
-				scene.add( cubeCamera );
-
-				// MATERIALS
-
-				var cubeTexture = cubeCamera.renderTarget.texture;
-
-				mlib = {
-
-					body: [],
-
-					"Chrome": new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeTexture  } ),
-
-					"Dark chrome": new THREE.MeshLambertMaterial( { color: 0x444444, envMap: cubeTexture } ),
-
-					"Black rough": new THREE.MeshLambertMaterial( { color: 0x050505, } ),
-
-					"Dark glass": new THREE.MeshLambertMaterial( { color: 0x101020, envMap: cubeTexture, opacity: 0.5, transparent: true } ),
-					"Orange glass": new THREE.MeshLambertMaterial( { color: 0xffbb00, opacity: 0.5, transparent: true } ),
-					"Red glass": new THREE.MeshLambertMaterial( { color: 0xff0000, opacity: 0.5, transparent: true } ),
-
-					"Black metal": new THREE.MeshLambertMaterial( { color: 0x222222, envMap: cubeTexture, combine: THREE.MultiplyOperation } ),
-					"Orange metal": new THREE.MeshLambertMaterial( { color: 0xff6600, envMap: cubeTexture, combine: THREE.MultiplyOperation } )
-
-				};
-
-				mlib.body.push( [ "Orange", new THREE.MeshLambertMaterial( { color: 0x883300, envMap: cubeTexture, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
-				mlib.body.push( [ "Blue", new THREE.MeshLambertMaterial( { color: 0x113355, envMap: cubeTexture, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
-				mlib.body.push( [ "Red", new THREE.MeshLambertMaterial( { color: 0x660000, envMap: cubeTexture, combine: THREE.MixOperation, reflectivity: 0.1 } ) ] );
-				mlib.body.push( [ "Black", new THREE.MeshLambertMaterial( { color: 0x000000, envMap: cubeTexture, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
-				mlib.body.push( [ "White", new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeTexture, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
-
-				mlib.body.push( [ "Carmine", new THREE.MeshPhongMaterial( { color: 0x770000, specular: 0xffaaaa, envMap: cubeTexture, combine: THREE.MultiplyOperation } ) ] );
-				mlib.body.push( [ "Gold", new THREE.MeshPhongMaterial( { color: 0xaa9944, specular: 0xbbaa99, shininess: 50, envMap: cubeTexture, combine: THREE.MultiplyOperation } ) ] );
-				mlib.body.push( [ "Bronze", new THREE.MeshPhongMaterial( { color: 0x150505, specular: 0xee6600, shininess: 10, envMap: cubeTexture, combine: THREE.MixOperation, reflectivity: 0.2 } ) ] );
-				mlib.body.push( [ "Chrome", new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, envMap: cubeTexture, combine: THREE.MultiplyOperation } ) ] );
-
-				// FLARES
-				var textureLoader = new THREE.TextureLoader();
-
-				flareA = textureLoader.load( "textures/lensflare/lensflare0.png" );
-				flareB = textureLoader.load( "textures/lensflare/lensflare3.png" );
-
-				// CARS - VEYRON
-
-				veyron = new THREE.Car();
-
-				veyron.modelScale = 3;
-				veyron.backWheelOffset = 2;
-
-				veyron.callback = function( object ) {
-
-					addCar( object, -300, -215, 0, 0 );
-					setMaterialsVeyron( object );
-
-					var sa = 2, sb = 5;
-
-					var params  = {
-
-						"a" : { map: flareA, color: 0xffffff, blending: THREE.AdditiveBlending },
-						"b" : { map: flareB, color: 0xffffff, blending: THREE.AdditiveBlending },
-
-						"ar" : { map: flareA, color: 0xff0000, blending: THREE.AdditiveBlending },
-						"br" : { map: flareB, color: 0xff0000, blending: THREE.AdditiveBlending }
-
-					};
-
-					var flares = [
-						// front
-						[ "a", sa, [ 47, 38, 120 ] ], [ "a", sa, [ 40, 38, 120 ] ], [ "a", sa, [ 32, 38, 122 ] ],
-						[ "b", sb, [ 47, 38, 120 ] ], [ "b", sb, [ 40, 38, 120 ] ], [ "b", sb, [ 32, 38, 122 ] ],
-						[ "a", sa, [ -47, 38, 120 ] ], [ "a", sa, [ -40, 38, 120 ] ], [ "a", sa, [ -32, 38, 122 ] ],
-						[ "b", sb, [ -47, 38, 120 ] ], [ "b", sb, [ -40, 38, 120 ] ], [ "b", sb, [ -32, 38, 122 ] ],
-						// back
-						[ "ar", sa, [ 22, 50, -123 ] ], [ "ar", sa, [ 32, 49, -123 ] ],
-						[ "br", sb, [ 22, 50, -123 ] ], [ "br", sb, [ 32, 49, -123 ] ],
-						[ "ar", sa, [ -22, 50, -123 ] ], [ "ar", sa, [ -32, 49, -123 ] ],
-						[ "br", sb, [ -22, 50, -123 ] ], [ "br", sb, [ -32, 49, -123 ] ],
-					];
-
-					for ( var i = 0; i < flares.length; i ++ ) {
-
-						var p = params[ flares[ i ][ 0 ] ];
-
-						var s = flares[ i ][ 1 ];
-
-						var x = flares[ i ][ 2 ][ 0 ];
-						var y = flares[ i ][ 2 ][ 1 ];
-						var z = flares[ i ][ 2 ][ 2 ];
-
-						var material = new THREE.SpriteMaterial( p );
-						var sprite = new THREE.Sprite( material );
-
-						var spriteWidth = 16;
-						var spriteHeight = 16;
-
-						sprite.scale.set( s * spriteWidth, s * spriteHeight, s );
-						sprite.position.set( x, y, z );
-
-						object.bodyMesh.add( sprite );
-
-						sprites.push( sprite );
-
-					}
-
-				};
-
-				veyron.loadPartsBinary( "obj/veyron/parts/veyron_body_bin.js", "obj/veyron/parts/veyron_wheel_bin.js" );
-
-				// CARS - GALLARDO
-
-				gallardo = new THREE.Car();
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				gallardo.modelScale = 2;
-				gallardo.backWheelOffset = 45;
+				cubeCamera1 = new THREE.CubeCamera( 1, 1000, 256 );
+				cubeCamera1.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
+				scene.add( cubeCamera1 );
 
-				gallardo.callback = function( object ) {
+				cubeCamera2 = new THREE.CubeCamera( 1, 1000, 256 );
+				cubeCamera2.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
+				scene.add( cubeCamera2 );
 
-					addCar( object, 300, -110, 0, -110 );
-					setMaterialsGallardo( object );
-
-					var sa = 2, sb = 5;
-
-					var params  = {
-
-						"a" : { map: flareA, color: 0xffffff, blending: THREE.AdditiveBlending },
-						"b" : { map: flareB, color: 0xffffff, blending: THREE.AdditiveBlending },
-
-						"ar" : { map: flareA, color: 0xff0000, blending: THREE.AdditiveBlending },
-						"br" : { map: flareB, color: 0xff0000, blending: THREE.AdditiveBlending }
-
-					};
-
-					var flares = [
-						// front
-						[ "a", sa, [ 70, 10, 160 ] ], [ "a", sa, [ 66, -1, 175 ] ], [ "a", sa, [ 66, -1, 165 ] ],
-						[ "b", sb, [ 70, 10, 160 ] ], [ "b", sb, [ 66, -1, 175 ] ], [ "b", sb, [ 66, -1, 165 ] ],
-						[ "a", sa, [ -70, 10, 160 ] ], [ "a", sa, [ -66, -1, 175 ] ], [ "a", sa, [ -66, -1, 165 ] ],
-						[ "b", sb, [ -70, 10, 160 ] ], [ "b", sb, [ -66, -1, 175 ] ], [ "b", sb, [ -66, -1, 165 ] ],
-						// back
-						[ "ar", sa, [ 61, 19, -185 ] ], [ "ar", sa, [ 55, 19, -185 ] ],
-						[ "br", sb, [ 61, 19, -185 ] ], [ "br", sb, [ 55, 19, -185 ] ],
-						[ "ar", sa, [ -61, 19, -185 ] ], [ "ar", sa, [ -55, 19, -185 ] ],
-						[ "br", sb, [ -61, 19, -185 ] ], [ "br", sb, [ -55, 19, -185 ] ],
-					];
-
-
-					for ( var i = 0; i < flares.length; i ++ ) {
-
-						var p = params[ flares[ i ][ 0 ] ];
-
-						var s = flares[ i ][ 1 ];
-
-						var x = flares[ i ][ 2 ][ 0 ];
-						var y = flares[ i ][ 2 ][ 1 ];
-						var z = flares[ i ][ 2 ][ 2 ];
-
-						var material = new THREE.SpriteMaterial( p );
-						var sprite = new THREE.Sprite( material );
-
-						var spriteWidth = 16;
-						var spriteHeight = 16;
-
-						sprite.scale.set( s * spriteWidth, s * spriteHeight, s );
-						sprite.position.set( x, y, z );
-
-						object.bodyMesh.add( sprite );
-
-						sprites.push( sprite );
-
-					}
-
-				};
-
-				gallardo.loadPartsBinary( "obj/gallardo/parts/gallardo_body_bin.js", "obj/gallardo/parts/gallardo_wheel_bin.js" );
+				document.body.appendChild( renderer.domElement );
 
 				//
 
-				config[ "gallardo" ].model = gallardo;
-				config[ "veyron" ].model = veyron;
-
-				currentCar = gallardo;
-
-				// EVENTS
-
-				document.addEventListener( 'keydown', onKeyDown, false );
-				document.addEventListener( 'keyup', onKeyUp, false );
-
-				window.addEventListener( 'resize', onWindowResize, false );
-
-				// POSTPROCESSING
-
-				renderer.autoClear = false;
-
-				var renderTargetParameters = {
-					minFilter: THREE.LinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBFormat,
-					stencilBuffer: false
-				};
-				renderTarget = new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters );
-
-				effectSave = new THREE.SavePass( new THREE.WebGLRenderTarget( SCREEN_WIDTH, SCREEN_HEIGHT, renderTargetParameters ) );
-
-				effectBlend = new THREE.ShaderPass( THREE.BlendShader, "tDiffuse1" );
-
-				effectFXAA = new THREE.ShaderPass( THREE.FXAAShader );
-				var effectVignette = new THREE.ShaderPass( THREE.VignetteShader );
-				var effectBleach = new THREE.ShaderPass( THREE.BleachBypassShader );
-				effectBloom = new THREE.BloomPass( 0.75 );
-
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
-
-				// tilt shift
-
-				hblur = new THREE.ShaderPass( THREE.HorizontalTiltShiftShader );
-				vblur = new THREE.ShaderPass( THREE.VerticalTiltShiftShader );
-
-				var bluriness = 7;
-
-				hblur.uniforms[ 'h' ].value = bluriness / SCREEN_WIDTH;
-				vblur.uniforms[ 'v' ].value = bluriness / SCREEN_HEIGHT;
-
-				if ( FOLLOW_CAMERA ) {
-
-					if ( currentCar == gallardo ) {
-
-						hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = rMap[ "gallardo" ];
-
-					} else if ( currentCar == veyron ) {
-
-						hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = rMap[ "veyron" ];
-
-					}
-
-				} else {
-
-					hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = 0.35;
-
-				}
-
-				effectVignette.uniforms[ "offset" ].value = 1.05;
-				effectVignette.uniforms[ "darkness" ].value = 1.5;
-
-				// motion blur
-
-				effectBlend.uniforms[ 'tDiffuse2' ].value = effectSave.renderTarget.texture;
-				effectBlend.uniforms[ 'mixRatio' ].value = 0.65;
-
-				var renderModel = new THREE.RenderPass( scene, camera );
-
-				effectVignette.renderToScreen = true;
-
-				composer = new THREE.EffectComposer( renderer, renderTarget );
-
-				composer.addPass( renderModel );
-
-				composer.addPass( effectFXAA );
-
-				composer.addPass( effectBlend );
-				composer.addPass( effectSave );
-
-				composer.addPass( effectBloom );
-				composer.addPass( effectBleach );
-
-				composer.addPass( hblur );
-				composer.addPass( vblur );
-
-				composer.addPass( effectVignette );
-
-			}
-
-			//
-
-			function setSpritesOpacity( opacity ) {
-
-				for ( var i = 0; i < sprites.length; i ++ ) {
-
-					sprites[ i ].material.opacity = opacity;
-
-				}
-
-			}
-
-			//
-
-
-			function createScene() {
-
-				// GROUND
-
-				var texture = new THREE.TextureLoader().load( "textures/cube/Park3Med/ny.jpg" );
-				texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
-				texture.repeat.set( 50, 50 );
-
-				groundBasic = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texture } );
-				groundBasic.color.setHSL( 0.1, 0.9, 0.7 );
-
-				ground = new THREE.Mesh( new THREE.PlaneBufferGeometry( 50000, 50000 ), groundBasic );
-				ground.position.y = - 215;
-				ground.rotation.x = - Math.PI / 2;
-				scene.add( ground );
-
-				ground.castShadow = false;
-				ground.receiveShadow = true;
-
-				// OBJECTS
-
-				var cylinderGeometry = new THREE.CylinderBufferGeometry( 2, 50, 1000, 32 );
-				var sphereGeometry = new THREE.SphereBufferGeometry( 100, 32, 16 );
-
-				var sy1 = -500 + 38;
-				var sy2 = -88;
-
-				//
-
-				var canvas = document.createElement( 'canvas' );
-				canvas.width = 128;
-				canvas.height = 128;
-
-				var context = canvas.getContext( '2d' );
-				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
-				gradient.addColorStop( 0.1, 'rgba(0,0,0,1)' );
-				gradient.addColorStop( 1, 'rgba(0,0,0,0)' );
-
-				context.fillStyle = gradient;
-				context.fillRect( 0, 0, canvas.width, canvas.height );
-
-				//
-
-				var shadowTexture = new THREE.CanvasTexture( canvas );
-
-				var shadowPlane = new THREE.PlaneBufferGeometry( 400, 400 );
-				var shadowMaterial = new THREE.MeshBasicMaterial( {
-
-					opacity: 0.35, transparent: true, map: shadowTexture,
-					polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1
-
-				} );
-
-				//
-
-				addObject( cylinderGeometry, 0xff0000, 1500, 250, 0, sy1, shadowPlane, shadowMaterial );
-				addObject( cylinderGeometry, 0xffaa00, -1500, 250, 0, sy1, shadowPlane, shadowMaterial );
-				addObject( cylinderGeometry, 0x00ff00, 0, 250, 1500, sy1, shadowPlane, shadowMaterial );
-				addObject( cylinderGeometry, 0x00ffaa, 0, 250, -1500, sy1, shadowPlane, shadowMaterial );
-
-				addObject( sphereGeometry, 0xff0000, 1500, -125, 200, sy2, shadowPlane, shadowMaterial );
-				addObject( sphereGeometry, 0xffaa00, -1500, -125, 200, sy2, shadowPlane, shadowMaterial );
-				addObject( sphereGeometry, 0x00ff00, 200, -125, 1500, sy2, shadowPlane, shadowMaterial );
-				addObject( sphereGeometry, 0x00ffaa, 200, -125, -1500, sy2, shadowPlane, shadowMaterial );
-
-			}
-
-			function addObject( geometry, color, x, y, z, sy, shadowPlane, shadowMaterial ) {
-
-				var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: color } ) );
-				object.position.set( x, y, z );
-				object.castShadow = true;
-				object.receiveShadow = true;
-				scene.add( object );
-
-				var shadow = new THREE.Mesh( shadowPlane, shadowMaterial );
-				shadow.position.y = sy;
-				shadow.rotation.x = - Math.PI / 2;
-				object.add( shadow );
-
-			}
-
-			//
-
-			function generateDropShadowTexture( object, width, height, bluriness ) {
-
-				var renderTargetParameters = {
-					minFilter: THREE.LinearMipmapLinearFilter,
-					magFilter: THREE.LinearFilter,
-					format: THREE.RGBAFormat,
-					stencilBuffer: false
-				};
-				var shadowTarget = new THREE.WebGLRenderTarget( width, height, renderTargetParameters );
-
-				var shadowMaterial = new THREE.MeshBasicMaterial( { color: 0x000000 } );
-				var shadowGeometry = object.geometry.clone();
-
-				var shadowObject = new THREE.Mesh( shadowGeometry, shadowMaterial );
-
-				var shadowScene = new THREE.Scene();
-				shadowScene.add( shadowObject );
-
-				shadowObject.geometry.computeBoundingBox();
-
-				var bb = shadowObject.geometry.boundingBox;
-
-				var dimensions = new THREE.Vector3();
-				dimensions.subVectors( bb.max, bb.min );
-
-				var margin = 0.15,
-
-				width  = dimensions.z,
-				height = dimensions.x,
-				depth  = dimensions.y,
-
-				left   = bb.min.z - margin * width,
-				right  = bb.max.z + margin * width,
-
-				top    = bb.max.x + margin * height,
-				bottom = bb.min.x - margin * height,
-
-				near = bb.max.y + margin * depth,
-				far  = bb.min.y - margin * depth;
-
-				var topCamera = new THREE.OrthographicCamera( left, right, top, bottom, near, far );
-				topCamera.position.y = bb.max.y;
-				topCamera.lookAt( shadowScene.position );
-
-				shadowScene.add( topCamera );
-
-				var renderShadow = new THREE.RenderPass( shadowScene, topCamera );
-
-				var blurShader = THREE.TriangleBlurShader;
-				var effectBlurX = new THREE.ShaderPass( blurShader, 'texture' );
-				var effectBlurY = new THREE.ShaderPass( blurShader, 'texture' );
-
-				renderShadow.clearColor = new THREE.Color( 0x000000 );
-				renderShadow.clearAlpha = 0;
-
-				var blurAmountX = bluriness / width;
-				var blurAmountY = bluriness / height;
-
-				effectBlurX.uniforms[ 'delta' ].value = new THREE.Vector2( blurAmountX, 0 );
-				effectBlurY.uniforms[ 'delta' ].value = new THREE.Vector2( 0, blurAmountY );
-
-				var shadowComposer = new THREE.EffectComposer( renderer, shadowTarget );
-
-				shadowComposer.addPass( renderShadow );
-				shadowComposer.addPass( effectBlurX );
-				shadowComposer.addPass( effectBlurY );
-
-				renderer.clear();
-				shadowComposer.render( 0.1 );
-
-				return shadowTarget;
-
-			}
-
-			//
-
-			function addCar( object, x, y, z, s ) {
-
-				object.root.position.set( x, y, z );
-				scene.add( object.root );
-
-				object.enableShadows( true );
-
-				if ( FOLLOW_CAMERA && object == currentCar ) {
-
-					object.root.add( camera );
-
-					camera.position.set( 350, 500, 2200 );
-					//camera.position.set( 0, 3000, -500 );
-
-					cameraTarget.z = 500;
-					cameraTarget.y = 150;
-
-					camera.lookAt( cameraTarget );
-
-				}
-
-				var shadowTexture = generateDropShadowTexture( object.bodyMesh, 64, 32, 15 );
-
-				object.bodyMesh.geometry.computeBoundingBox();
-				var bb = object.bodyMesh.geometry.boundingBox;
-
-				var ss = object.modelScale * 1.1;
-				var shadowWidth  =        ss * ( bb.max.z - bb.min.z );
-				var shadowHeight = 1.25 * ss * ( bb.max.x - bb.min.x );
-
-				var shadowPlane = new THREE.PlaneBufferGeometry( shadowWidth, shadowHeight );
-				var shadowMaterial = new THREE.MeshBasicMaterial( {
-					color: 0xffffff, opacity: 0.5, transparent: true, map: shadowTexture.texture,
-					polygonOffset: false, polygonOffsetFactor: -0.5, polygonOffsetUnits: 1
+				material = new THREE.MeshBasicMaterial( {
+					envMap: cubeCamera2.renderTarget.texture
 				} );
 
-				var shadow = new THREE.Mesh( shadowPlane, shadowMaterial );
-				shadow.position.y = s + 10;
-				shadow.rotation.x = - Math.PI / 2;
-				shadow.rotation.z = Math.PI / 2;
-
-				object.root.add( shadow );
-
-			}
-
-			//
-
-			function setCurrentCar( car, cameraType ) {
-
-				var oldCar = currentCar;
-
-				currentCar = config[ car ].model;
-
-				if ( cameraType == "front" || cameraType == "back" ) {
-
-					hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = config[ car ].r;
-
-					FOLLOW_CAMERA = true;
-
-					oldCar.root.remove( camera );
-					currentCar.root.add( camera );
-
-					if ( cameraType == "front" ) {
-
-						camera.position.set( 350, 500, 2200 );
+				sphere = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 20, 3 ), material );
+				scene.add( sphere );
 
-					} else if ( cameraType == "back" ) {
+				cube = new THREE.Mesh( new THREE.BoxBufferGeometry( 20, 20, 20 ), material );
+				scene.add( cube );
 
-						camera.position.copy( config[ car ].backCam );
+				torus = new THREE.Mesh( new THREE.TorusKnotBufferGeometry( 10, 5, 100, 25 ), material );
+				scene.add( torus );
 
-					}
-
-					cameraTarget.set( 0, 150, 500 );
-
-				} else {
-
-					FOLLOW_CAMERA = false;
-
-					oldCar.root.remove( camera );
-
-					camera.position.set( 2000, 0, 2000 );
-					cameraTarget.set( 0, 0, 0 );
+				//
 
-					spotLight.position.set( 0, 1800, 1500 );
+				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
+				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
 
-					hblur.uniforms[ 'r' ].value = vblur.uniforms[ 'r' ].value = 0.35;
-
-				}
+				window.addEventListener( 'resize', onWindowResized, false );
 
 			}
 
-			//
-
-			function onWindowResize( event ) {
+			function onWindowResized( event ) {
 
-				SCREEN_WIDTH = window.innerWidth;
-				SCREEN_HEIGHT = window.innerHeight;
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
+				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
 
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-				composer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
-
-				hblur.uniforms[ 'h' ].value = 10.75 / SCREEN_WIDTH;
-				vblur.uniforms[ 'v' ].value = 10.75 / SCREEN_HEIGHT;
-
-				effectFXAA.uniforms[ 'resolution' ].value.set( 1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT );
-
 			}
 
-			//
-
-			function onKeyDown ( event ) {
-
-				switch( event.keyCode ) {
+			function onDocumentMouseDown( event ) {
 
-					case 38: /*up*/	controlsGallardo.moveForward = true; break;
-					case 87: /*W*/ 	controlsVeyron.moveForward = true; break;
+				event.preventDefault();
 
-					case 40: /*down*/controlsGallardo.moveBackward = true; break;
-					case 83: /*S*/ 	 controlsVeyron.moveBackward = true; break;
+				onPointerDownPointerX = event.clientX;
+				onPointerDownPointerY = event.clientY;
 
-					case 37: /*left*/controlsGallardo.moveLeft = true; break;
-					case 65: /*A*/   controlsVeyron.moveLeft = true; break;
+				onPointerDownLon = lon;
+				onPointerDownLat = lat;
 
-					case 39: /*right*/controlsGallardo.moveRight = true; break;
-					case 68: /*D*/    controlsVeyron.moveRight = true; break;
-
-					case 49: /*1*/	setCurrentCar( "gallardo", "center" ); break;
-					case 50: /*2*/	setCurrentCar( "veyron", "center" ); break;
-					case 51: /*3*/	setCurrentCar( "gallardo", "front" ); break;
-					case 52: /*4*/	setCurrentCar( "veyron", "front" ); break;
-					case 53: /*5*/	setCurrentCar( "gallardo", "back" ); break;
-					case 54: /*6*/	setCurrentCar( "veyron", "back" ); break;
-
-					case 78: /*N*/   vdir *= -1; break;
-
-					case 66: /*B*/   blur = !blur; break;
-
-				}
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
 			}
 
-			function onKeyUp ( event ) {
+			function onDocumentMouseMove( event ) {
 
-				switch( event.keyCode ) {
-
-					case 38: /*up*/controlsGallardo.moveForward = false; break;
-					case 87: /*W*/ controlsVeyron.moveForward = false; break;
-
-					case 40: /*down*/controlsGallardo.moveBackward = false; break;
-					case 83: /*S*/ 	 controlsVeyron.moveBackward = false; break;
-
-					case 37: /*left*/controlsGallardo.moveLeft = false; break;
-					case 65: /*A*/ 	 controlsVeyron.moveLeft = false; break;
-
-					case 39: /*right*/controlsGallardo.moveRight = false; break;
-					case 68: /*D*/ 	  controlsVeyron.moveRight = false; break;
-
-				}
+				lon = ( event.clientX - onPointerDownPointerX ) * 0.1 + onPointerDownLon;
+				lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
 
 			}
 
+			function onDocumentMouseUp( event ) {
 
-			//
-
-			function setMaterialsGallardo( car ) {
-
-				// BODY
-
-				var materials = car.bodyMaterials;
-
-				materials[ 0 ] = mlib.body[ 0 ][ 1 ]; 		// body
-				materials[ 1 ] = mlib[ "Dark chrome" ]; 	// front under lights, back
-
-				// WHEELS
-
-				materials = car.wheelMaterials;
-
-				materials[ 0 ] = mlib[ "Chrome" ];			// insides
-				materials[ 1 ] = mlib[ "Black rough" ];	// tire
+				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
+				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
 
 			}
 
-			function setMaterialsVeyron( car ) {
-
-				// 0 - top, front center, back sides
-				// 1 - front sides
-				// 2 - engine
-				// 3 - small chrome things
-				// 4 - backlights
-				// 5 - back signals
-				// 6 - bottom, interior
-				// 7 - windshield
-
-				// BODY
+			function onDocumentMouseWheel( event ) {
 
-				var materials = car.bodyMaterials;
+				var fov = camera.fov + event.deltaY * 0.05;
 
-				materials[ 0 ] = mlib[ "Black metal" ];	// top, front center, back sides
-				materials[ 1 ] = mlib[ "Chrome" ];			// front sides
-				materials[ 2 ] = mlib[ "Chrome" ];			// engine
-				materials[ 3 ] = mlib[ "Dark chrome" ];	// small chrome things
-				materials[ 4 ] = mlib[ "Red glass" ];		// backlights
-				materials[ 5 ] = mlib[ "Orange glass" ];	// back signals
-				materials[ 6 ] = mlib[ "Black rough" ];	// bottom, interior
-				materials[ 7 ] = mlib[ "Dark glass" ];		// windshield
+				camera.fov = THREE.Math.clamp( fov, 10, 75 );
 
-				// WHEELS
-
-				materials = car.wheelMaterials;
-
-				materials[ 0 ] = mlib[ "Chrome" ];			// insides
-				materials[ 1 ] = mlib[ "Black rough" ];	// tire
+				camera.updateProjectionMatrix();
 
 			}
 
-			//
-
 			function animate() {
 
 				requestAnimationFrame( animate );
-
 				render();
-				stats.update();
 
 			}
 
 			function render() {
 
-				var delta = clock.getDelta();
-
-				// day / night
-
-				v = THREE.Math.clamp( v + 0.5 * delta * vdir, 0.1, 0.9 );
-				scene.background.setHSL( 0.51, 0.5, v * 0.75 );
-				scene.fog.color.setHSL( 0.51, 0.5, v * 0.75 );
-
-				var vnorm = ( v - 0.05 ) / ( 0.9 - 0.05 );
-
-				if ( vnorm < 0.3 ) {
-
-					setSpritesOpacity( 1 - v / 0.3 );
-
-				} else {
-
-					setSpritesOpacity( 0 );
-
-				}
-
-				if ( veyron.loaded ) {
-
-					veyron.bodyMaterials[ 1 ] = mlib[ "Chrome" ];
-					veyron.bodyMaterials[ 2 ] = mlib[ "Chrome" ];
-
-					veyron.wheelMaterials[ 0 ] = mlib[ "Chrome" ];
-
-				}
-
-				if ( gallardo.loaded ) {
-
-					gallardo.wheelMaterials[ 0 ] = mlib[ "Chrome" ];
-
-				}
+				var time = Date.now();
 
-				effectBloom.copyUniforms[ "opacity" ].value = THREE.Math.mapLinear( vnorm, 0, 1, 1, 0.75 );
+				lon += .15;
 
-				ambientLight.color.setHSL( 0, 0, THREE.Math.mapLinear( vnorm, 0, 1, 0.1, 0.3 ) );
-				groundBasic.color.setHSL( 0.1, 0.5, THREE.Math.mapLinear( vnorm, 0, 1, 0.4, 0.65 ) );
+				lat = Math.max( - 85, Math.min( 85, lat ) );
+				phi = THREE.Math.degToRad( 90 - lat );
+				theta = THREE.Math.degToRad( lon );
 
-				// blur
+				cube.position.x = Math.cos( time * 0.001 ) * 30;
+				cube.position.y = Math.sin( time * 0.001 ) * 30;
+				cube.position.z = Math.sin( time * 0.001 ) * 30;
 
-				if ( blur ) {
+				cube.rotation.x += 0.02;
+				cube.rotation.y += 0.03;
 
-					effectSave.enabled = true;
-					effectBlend.enabled = true;
+				torus.position.x = Math.cos( time * 0.001 + 10 ) * 30;
+				torus.position.y = Math.sin( time * 0.001 + 10 ) * 30;
+				torus.position.z = Math.sin( time * 0.001 + 10 ) * 30;
 
-				} else {
+				torus.rotation.x += 0.02;
+				torus.rotation.y += 0.03;
 
-					effectSave.enabled = false;
-					effectBlend.enabled = false;
+				camera.position.x = 100 * Math.sin( phi ) * Math.cos( theta );
+				camera.position.y = 100 * Math.cos( phi );
+				camera.position.z = 100 * Math.sin( phi ) * Math.sin( theta );
 
-				}
+				camera.lookAt( scene.position );
 
-				// update car model
+				sphere.visible = false;
 
-				veyron.updateCarModel( delta, controlsVeyron );
-				gallardo.updateCarModel( delta, controlsGallardo );
+				// pingpong
 
-				// update camera
+				if ( count % 2 === 0 ) {
 
-				if ( ! FOLLOW_CAMERA ) {
-
-					cameraTarget.x = currentCar.root.position.x;
-					cameraTarget.z = currentCar.root.position.z;
+					material.envMap = cubeCamera1.renderTarget.texture;
+					cubeCamera2.update( renderer, scene );
 
 				} else {
 
-					spotLight.position.x = currentCar.root.position.x - 500;
-					spotLight.position.z = currentCar.root.position.z - 500;
-
+					material.envMap = cubeCamera2.renderTarget.texture;
+					cubeCamera1.update( renderer, scene );
 
 				}
 
-				// update shadows
-
-				spotLight.target.position.x = currentCar.root.position.x;
-				spotLight.target.position.z = currentCar.root.position.z;
-
-				// render cube map
-
-				var updateCubemap = true;
-
-				if ( updateCubemap ) {
-
-					veyron.setVisible( false );
-					gallardo.setVisible( false );
-
-					cubeCamera.position.copy( currentCar.root.position );
-
-					renderer.autoClear = true;
-					cubeCamera.update( renderer, scene );
-
-					veyron.setVisible( true );
-					gallardo.setVisible( true );
-
-				}
-
-				// render scene
-
-				renderer.autoClear = false;
-				renderer.shadowMap.enabled = true;
-
-				camera.lookAt( cameraTarget );
-
-				renderer.setRenderTarget( null );
+				count ++;
 
-				renderer.clear();
-				composer.render( 0.1 );
+				sphere.visible = true;
 
-				renderer.shadowMap.enabled = false;
+				renderer.render( scene, camera );
 
 			}
 

examples/webgl_materials_cubemap_dynamic2.html

@@ -1,217 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - materials - dynamic cube reflection</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<style>
-			body {
-				background-color: #000000;
-				margin: 0px;
-				overflow: hidden;
-			}
-
-			#info {
-				position: absolute;
-				top: 0px; width: 100%;
-				color: #ffffff;
-				padding: 5px;
-				font-family:Monospace;
-				font-size:13px;
-				font-weight: bold;
-				text-align:center;
-			}
-
-			a {
-				color: #ffffff;
-			}
-		</style>
-	</head>
-	<body>
-
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js webgl</a> - materials - dynamic cube reflection<br/>Photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">J&oacute;n Ragnarsson</a>.</div>
-
-		<script src="../build/three.js"></script>
-
-		<script>
-
-			var camera, scene, renderer;
-			var cube, sphere, torus, material;
-
-			var count = 0, cubeCamera1, cubeCamera2;
-
-			var lon = 0, lat = 0;
-			var phi = 0, theta = 0;
-
-			var textureLoader = new THREE.TextureLoader();
-
-			textureLoader.load( 'textures/2294472375_24a3b8ef46_o.jpg', function ( texture ) {
-
-				texture.mapping = THREE.UVMapping;
-
-				init( texture );
-				animate();
-
-			} );
-
-			function init( texture ) {
-
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
-
-				scene = new THREE.Scene();
-
-				var mesh = new THREE.Mesh( new THREE.SphereBufferGeometry( 500, 32, 16 ), new THREE.MeshBasicMaterial( { map: texture } ) );
-				mesh.geometry.scale( - 1, 1, 1 );
-				scene.add( mesh );
-
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				cubeCamera1 = new THREE.CubeCamera( 1, 1000, 256 );
-				cubeCamera1.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
-				scene.add( cubeCamera1 );
-
-				cubeCamera2 = new THREE.CubeCamera( 1, 1000, 256 );
-				cubeCamera2.renderTarget.texture.minFilter = THREE.LinearMipMapLinearFilter;
-				scene.add( cubeCamera2 );
-
-				document.body.appendChild( renderer.domElement );
-
-				//
-
-				material = new THREE.MeshBasicMaterial( {
-					envMap: cubeCamera2.renderTarget.texture
-				} );
-
-				sphere = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 20, 3 ), material );
-				scene.add( sphere );
-
-				cube = new THREE.Mesh( new THREE.BoxBufferGeometry( 20, 20, 20 ), material );
-				scene.add( cube );
-
-				torus = new THREE.Mesh( new THREE.TorusKnotBufferGeometry( 10, 5, 100, 25 ), material );
-				scene.add( torus );
-
-				//
-
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'wheel', onDocumentMouseWheel, false );
-
-				window.addEventListener( 'resize', onWindowResized, false );
-
-			}
-
-			function onWindowResized( event ) {
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-			}
-
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-
-				onPointerDownPointerX = event.clientX;
-				onPointerDownPointerY = event.clientY;
-
-				onPointerDownLon = lon;
-				onPointerDownLat = lat;
-
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
-
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				lon = ( event.clientX - onPointerDownPointerX ) * 0.1 + onPointerDownLon;
-				lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-
-			}
-
-			function onDocumentMouseWheel( event ) {
-
-				var fov = camera.fov + event.deltaY * 0.05;
-
-				camera.fov = THREE.Math.clamp( fov, 10, 75 );
-
-				camera.updateProjectionMatrix();
-
-			}
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-				render();
-
-			}
-
-			function render() {
-
-				var time = Date.now();
-
-				lon += .15;
-
-				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = THREE.Math.degToRad( 90 - lat );
-				theta = THREE.Math.degToRad( lon );
-
-				cube.position.x = Math.cos( time * 0.001 ) * 30;
-				cube.position.y = Math.sin( time * 0.001 ) * 30;
-				cube.position.z = Math.sin( time * 0.001 ) * 30;
-
-				cube.rotation.x += 0.02;
-				cube.rotation.y += 0.03;
-
-				torus.position.x = Math.cos( time * 0.001 + 10 ) * 30;
-				torus.position.y = Math.sin( time * 0.001 + 10 ) * 30;
-				torus.position.z = Math.sin( time * 0.001 + 10 ) * 30;
-
-				torus.rotation.x += 0.02;
-				torus.rotation.y += 0.03;
-
-				camera.position.x = 100 * Math.sin( phi ) * Math.cos( theta );
-				camera.position.y = 100 * Math.cos( phi );
-				camera.position.z = 100 * Math.sin( phi ) * Math.sin( theta );
-
-				camera.lookAt( scene.position );
-
-				sphere.visible = false;
-
-				// pingpong
-
-				if ( count % 2 === 0 ) {
-
-					material.envMap = cubeCamera1.renderTarget.texture;
-					cubeCamera2.update( renderer, scene );
-
-				} else {
-
-					material.envMap = cubeCamera2.renderTarget.texture;
-					cubeCamera1.update( renderer, scene );
-
-				}
-
-				count ++;
-
-				sphere.visible = true;
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-
-	</body>
-</html>