From 2e0d1a03e4dd373cc4a0c712a8e63f4ebba49910 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Wed, 27 Feb 2019 23:00:31 -0800 Subject: [PATCH] Examples: Improved webgl_materials_cars example. --- examples/webgl_materials_cars.html | 108 +++++++++++++---------------- 1 file changed, 47 insertions(+), 61 deletions(-) diff --git a/examples/webgl_materials_cars.html b/examples/webgl_materials_cars.html index 0db8b497ce..c1d0e0e69c 100644 --- a/examples/webgl_materials_cars.html +++ b/examples/webgl_materials_cars.html @@ -45,6 +45,9 @@ + + + @@ -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,7 +82,6 @@ var damping = 5.0; var distance = 5; var cameraTarget = new THREE.Vector3(); - var origin = new THREE.Vector3(); function init() { @@ -89,15 +89,35 @@ 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,28 +134,9 @@ 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 ); @@ -143,10 +144,6 @@ 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(); -- GitLab