Examples: Improved webgl_materials_cars example.

Author: mrdoob

examples/webgl_materials_cars.html

@@ -45,6 +45,9 @@
 		<script src="js/loaders/DRACOLoader.js"></script>
 		<script src="js/loaders/GLTFLoader.js"></script>
 
+		<script src="js/pmrem/PMREMGenerator.js"></script>
+		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
+
 		<script src="js/Car.js"></script>
 
 		<script src="js/WebGL.js"></script>
@@ -65,9 +68,7 @@
 			var glassMatSelect = document.getElementById( 'glass-mat' );
 
 			var followCamera = document.getElementById( 'camera-toggle' );
-			followCamera.addEventListener( 'change', onFollowCameraToggle );
 
-			var lightHolder = new THREE.Group();
 			var clock = new THREE.Clock();
 			var car = new THREE.Car();
 			car.turningRadius = 75;
@@ -81,23 +82,42 @@
 			var damping = 5.0;
 			var distance = 5;
 			var cameraTarget = new THREE.Vector3();
-			var origin = new THREE.Vector3();
 
 			function init() {
 
 				var container = document.getElementById( 'container' );
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 200 );
 				camera.position.set( 3.25, 2.0, -5 );
+				camera.lookAt( 0, 0.5, 0 );
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.Fog( 0xd7cbb1, 1, 80 );
 
-				envMap = new THREE.CubeTextureLoader()
-					.setPath( 'textures/cube/skyboxsun25deg/')
-					.load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
+				var urls = [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ];
+				var loader = new THREE.CubeTextureLoader().setPath( 'textures/cube/skyboxsun25deg/');
+				loader.load( urls, function ( texture ) {
+
+					scene.background = texture;
+
+					var pmremGenerator = new THREE.PMREMGenerator( texture );
+					pmremGenerator.update( renderer );
+
+					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					pmremCubeUVPacker.update( renderer );
+
+					envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
 
-				scene.background = envMap;
+					pmremGenerator.dispose();
+					pmremCubeUVPacker.dispose();
+
+					//
+
+					initCar();
+					initMaterials();
+					initMaterialSelectionMenus();
+
+				} );
 
 				var ground = new THREE.Mesh(
 					new THREE.PlaneBufferGeometry( 2400, 2400 ),
@@ -114,39 +134,16 @@
 				grid.material.transparent = true;
 				scene.add( grid );
 
-				var hemiLight = new THREE.HemisphereLight( 0x7c849b, 0xd7cbb1, 0.1 );
-				hemiLight.position.set( 0, 1, 0 );
-				scene.add( hemiLight );
-
-				var shadowLight  = new THREE.DirectionalLight( 0xffffee, 0.1 );
-				shadowLight.position.set( -1.5, 1.25, -1.5 );
-				shadowLight.castShadow = true;
-				shadowLight.shadow.width = 512;
-				shadowLight.shadow.height = 512;
-				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.75;
-				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.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				initCar();
-				initMaterials();
-				initMaterialSelectionMenus();
-
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				renderer.setAnimationLoop( function() {
@@ -170,17 +167,12 @@
 
 					carModel = gltf.scene.children[ 0 ];
 
-					// add lightHolder to car so that the shadow will track the car as it moves
-					carModel.add( lightHolder );
-
 					car.setModel( carModel );
 
 					carModel.traverse( function ( child ) {
 
 						if ( child.isMesh  ) {
 
-							child.castShadow = true;
-							child.receiveShadow = true;
 							child.material.envMap = envMap;
 
 						}
@@ -236,9 +228,9 @@
 
 					glass: [
 
-						new THREE.MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 0.9, roughness: 0.1, opacity: 0.15, transparent: true, premultipliedAlpha: true, name: 'clear' } ),
-						new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 0.9, roughness: 0.1, opacity: 0.15, transparent: true, premultipliedAlpha: true, name: 'smoked' } ),
-						new THREE.MeshStandardMaterial( { color: 0x001133, envMap: envMap, metalness: 0.9, roughness: 0.1, opacity: 0.15, transparent: true, premultipliedAlpha: true, name: 'blue' } ),
+						new THREE.MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'clear' } ),
+						new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'smoked' } ),
+						new THREE.MeshStandardMaterial( { color: 0x001133, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'blue' } ),
 
 					],
 
@@ -270,8 +262,8 @@
 
 				} );
 
-				bodyMatSelect.selectedIndex = 2;
-				rimMatSelect.selectedIndex = 4;
+				bodyMatSelect.selectedIndex = 3;
+				rimMatSelect.selectedIndex = 5;
 				glassMatSelect.selectedIndex = 0;
 
 				bodyMatSelect.addEventListener( 'change', updateMaterials );
@@ -302,12 +294,6 @@
 
 			}
 
-			function onFollowCameraToggle() {
-
-				carModel.position.copy( origin );
-
-			}
-
 			function update() {
 
 				var delta = clock.getDelta();
@@ -316,10 +302,14 @@
 
 					car.update( delta / 3 );
 
-					resetPosition();
+					console.log(   );
 
-					// keep the light (and shadow) pointing in the same direction as the car rotates
-					lightHolder.rotation.y = -carModel.rotation.y;
+					if ( carModel.position.length() > 200 ) {
+
+						carModel.position.set( 0, 0, 0 );
+						car.speed = 0;
+
+					}
 
 					if ( followCamera.checked ) {
 
@@ -329,6 +319,13 @@
 
 						camera.position.lerp( cameraTarget, delta * damping );
 
+					} else {
+
+						carModel.getWorldPosition( cameraTarget );
+						cameraTarget.y += 0.5;
+
+						camera.position.set( 3.25, 2.0, -5 );
+
 					}
 
 					camera.lookAt( carModel.position );
@@ -339,17 +336,6 @@
 
 			}
 
-			function resetPosition() {
-
-				if ( carModel.position.distanceTo( origin ) > 200 ) {
-
-					carModel.position.copy( origin );
-					car.speed = 0;
-
-				}
-
-			}
-
 			init();
 
 		</script>