Examples: Improved webgl_materials_car example.

examples/webgl_materials_car.html

@@ -7,8 +7,8 @@
 		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 			body {
-				color: #444;
-				background: #eee;
+				color: #bbbbbb;
+				background: #333333;
 			}
 			a {
 				color: #08f;
@@ -51,10 +51,10 @@
 			import Stats from './jsm/libs/stats.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
-			import { RoomEnvironment } from './jsm/environments/RoomEnvironment.js';
 
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
 			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 
 			let camera, scene, renderer;
 			let stats;
@@ -91,15 +91,14 @@
 				controls.target.set( 0, 0.5, 0 );
 				controls.update();
 
-				const pmremGenerator = new THREE.PMREMGenerator( renderer );
-
 				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0xeeeeee );
-				scene.environment = pmremGenerator.fromScene( new RoomEnvironment() ).texture;
-				scene.fog = new THREE.Fog( 0xeeeeee, 10, 50 );
+				scene.background = new THREE.Color( 0x333333 );
+				scene.environment = new RGBELoader().load( 'textures/equirectangular/venice_sunset_1k.hdr' );
+				scene.environment.mapping = THREE.EquirectangularReflectionMapping;
+				scene.fog = new THREE.Fog( 0x333333, 10, 15 );
 
-				grid = new THREE.GridHelper( 100, 40, 0x000000, 0x000000 );
-				grid.material.opacity = 0.1;
+				grid = new THREE.GridHelper( 20, 40, 0xffffff, 0xffffff );
+				grid.material.opacity = 0.2;
 				grid.material.depthWrite = false;
 				grid.material.transparent = true;
 				scene.add( grid );
@@ -107,7 +106,7 @@
 				// materials
 
 				const bodyMaterial = new THREE.MeshPhysicalMaterial( {
-					color: 0xff0000, metalness: 0.6, roughness: 0.4, clearcoat: 0.05, clearcoatRoughness: 0.05
+					color: 0xff0000, metalness: 1.0, roughness: 0.5, clearcoat: 1.0, clearcoatRoughness: 0.03, sheen: 0.5
 				} );
 
 				const detailsMaterial = new THREE.MeshStandardMaterial( {
@@ -115,7 +114,7 @@
 				} );
 
 				const glassMaterial = new THREE.MeshPhysicalMaterial( {
-					color: 0xffffff, metalness: 0, roughness: 0.1, transmission: 0.9, transparent: true
+					color: 0xffffff, metalness: 0.25, roughness: 0, transmission: 1.0
 				} );
 
 				const bodyColorInput = document.getElementById( 'body-color' );
@@ -202,11 +201,11 @@
 
 				for ( let i = 0; i < wheels.length; i ++ ) {
 
-					wheels[ i ].rotation.x = time * Math.PI;
+					wheels[ i ].rotation.x = time * Math.PI * 2;
 
 				}
 
-				grid.position.z = - ( time ) % 5;
+				grid.position.z = - ( time ) % 1;
 
 				renderer.render( scene, camera );