Examples: Improved webgl_materials_car.

examples/webgl_materials_car.html

@@ -53,6 +53,8 @@
 				glass: [],
 			};
 
+			var grid, wheels = [];
+
 			function init() {
 
 				var container = document.getElementById( 'container' );
@@ -89,8 +91,8 @@
 				ground.renderOrder = 1;
 				scene.add( ground );
 
-				var grid = new THREE.GridHelper( 400, 80, 0x000000, 0x000000 );
-				grid.material.opacity = 0.2;
+				grid = new THREE.GridHelper( 400, 80, 0x000000, 0x000000 );
+				grid.material.opacity = 0.1;
 				grid.material.depthWrite = false;
 				grid.material.transparent = true;
 				scene.add( grid );
@@ -102,7 +104,6 @@
 
 				renderer.gammaOutput = true;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 1;
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
@@ -164,6 +165,13 @@
 						carModel.getObjectByName( 'glass' ),
 					 );
 
+					 wheels.push(
+						 carModel.getObjectByName( 'wheel_fl' ),
+						 carModel.getObjectByName( 'wheel_fr' ),
+						 carModel.getObjectByName( 'wheel_rl' ),
+						 carModel.getObjectByName( 'wheel_rr' )
+					 );
+
 					updateMaterials();
 
 				} );
@@ -186,10 +194,10 @@
 							color: 0x990000, envMap: envMap, metalness: 1.0, roughness: 0.2, name: 'red'
 						} ),
 						new THREE.MeshStandardMaterial( {
-							color: 0x000000, envMap: envMap, metalness: 1.0, roughness: 0.2, name: 'black'
+							color: 0x000000, envMap: envMap, metalness: 1.0, roughness: 0.4, name: 'black'
 						} ),
 						new THREE.MeshStandardMaterial( {
-							color: 0xffffff, envMap: envMap, metalness: 0.3, roughness: 0.2, name: 'white'
+							color: 0xffffff, envMap: envMap, metalness: 0.1, roughness: 0.2, name: 'white'
 						} ),
 						new THREE.MeshStandardMaterial( {
 							color: 0xffffff, envMap: envMap, metalness: 1.0, roughness: 0.2, name: 'metallic'
@@ -273,13 +281,21 @@
 
 			function render() {
 
-				var time = - performance.now() / 10000;
+				var time = - performance.now() / 1000;
 
-				camera.position.x = Math.cos( time ) * 6;
+				camera.position.x = Math.cos( time / 10 ) * 6;
 				camera.position.y = 1.5;
-				camera.position.z = Math.sin( time ) * 6;
+				camera.position.z = Math.sin( time / 10 ) * 6;
 				camera.lookAt( 0, 0.5, 0 );
 
+				for ( var i = 0; i < wheels.length; i ++ ) {
+
+					wheels[ i ].rotation.x = time * Math.PI;
+
+				}
+
+				grid.position.z = - ( time ) % 5;
+
 				renderer.render( scene, camera );
 
 				stats.update();