Skip to content

Commit 93eb40d

Browse files
mrdoobmrdoob
committed
Examples: Improved webgl_materials_cars.
1 parent 49227e5 commit 93eb40d

File tree

2 files changed

+89
-58
lines changed

2 files changed

+89
-58
lines changed

‎examples/textures/hdr/quarry_01_1k.hdr‎

1.41 MB
Binary file not shown.

‎examples/webgl_materials_cars.html‎

Lines changed: 89 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,13 @@
4040

4141
import { CarControls } from './jsm/misc/CarControls.js';
4242

43+
import { RGBELoader } from './jsm/loaders/RGBELoader.js';
44+
4345
import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
4446
import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
4547

46-
var camera, scene, renderer, stats, carModel, materialsLib, envMap;
48+
var camera, scene, renderer;
49+
var stats, carModel, materialsLib, envMap;
4750

4851
var bodyMatSelect = document.getElementById( 'body-mat' );
4952
var rimMatSelect = document.getElementById( 'rim-mat' );
@@ -61,80 +64,86 @@
6164
glass: [],
6265
};
6366

64-
var damping = 5.0;
65-
var distance = 5;
67+
var damping = 3.0;
68+
69+
var cameraBack = new THREE.Object3D();
70+
cameraBack.position.set( 0, 2.5, 5 );
71+
6672
var cameraTarget = new THREE.Vector3();
6773

6874
function init() {
6975

7076
var container = document.getElementById( 'container' );
7177

72-
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 200 );
78+
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 200 );
7379
camera.position.set( 3.25, 2.0, - 5 );
74-
camera.lookAt( 0, 0.5, 0 );
80+
camera.lookAt( 0, 0.25, 0 );
7581

7682
scene = new THREE.Scene();
77-
scene.fog = new THREE.Fog( 0xd7cbb1, 1, 80 );
83+
// scene.fog = new THREE.Fog( 0xd7cbb1, 1, 80 );
7884

79-
var urls = [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ];
80-
var loader = new THREE.CubeTextureLoader().setPath( 'textures/cube/skyboxsun25deg/' );
81-
loader.load( urls, function ( texture ) {
85+
new RGBELoader()
86+
.setDataType( THREE.UnsignedByteType )
87+
.setPath( 'textures/hdr/' )
88+
.load( 'quarry_01_1k.hdr', function ( texture ) {
8289

83-
scene.background = texture;
90+
var options = {
91+
minFilter: texture.minFilter,
92+
magFilter: texture.magFilter
93+
};
8494

85-
var pmremGenerator = new PMREMGenerator( texture );
86-
pmremGenerator.update( renderer );
95+
scene.background = new THREE.WebGLRenderTargetCube( 1024, 1024, options ).fromEquirectangularTexture( renderer, texture );
8796

88-
var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
89-
pmremCubeUVPacker.update( renderer );
97+
envMap = scene.background;
9098

91-
envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
99+
var pmremGenerator = new PMREMGenerator( scene.background.texture );
100+
pmremGenerator.update( renderer );
92101

93-
pmremGenerator.dispose();
94-
pmremCubeUVPacker.dispose();
102+
var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
103+
pmremCubeUVPacker.update( renderer );
95104

96-
//
105+
envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
97106

98-
initCar();
99-
initMaterials();
100-
initMaterialSelectionMenus();
107+
pmremGenerator.dispose();
108+
pmremCubeUVPacker.dispose();
101109

102-
} );
110+
//
111+
112+
initCar();
113+
initMaterials();
114+
initMaterialSelectionMenus();
115+
116+
} );
103117

104118
var ground = new THREE.Mesh(
105-
new THREE.PlaneBufferGeometry( 2400, 2400 ),
106-
new THREE.ShadowMaterial( { color: 0x000000, opacity: 0.15, depthWrite: false }
107-
) );
119+
new THREE.PlaneBufferGeometry( 400, 400 ),
120+
new THREE.MeshBasicMaterial( { color: 0x6e6a62, depthWrite: false } )
121+
);
108122
ground.rotation.x = - Math.PI / 2;
109-
ground.receiveShadow = true;
110123
ground.renderOrder = 1;
111124
scene.add( ground );
112125

113-
var grid = new THREE.GridHelper( 400, 40, 0x000000, 0x000000 );
126+
var grid = new THREE.GridHelper( 400, 80, 0x000000, 0x000000 );
114127
grid.material.opacity = 0.2;
115128
grid.material.depthWrite = false;
116129
grid.material.transparent = true;
117130
scene.add( grid );
118131

119132
renderer = new THREE.WebGLRenderer( { antialias: true } );
120-
renderer.gammaOutput = true;
121133
renderer.setPixelRatio( window.devicePixelRatio );
122134
renderer.setSize( window.innerWidth, window.innerHeight );
123-
124135
container.appendChild( renderer.domElement );
125136

137+
renderer.gammaOutput = true;
138+
renderer.toneMapping = THREE.ACESFilmicToneMapping;
139+
renderer.toneMappingExposure = 1;
140+
126141
stats = new Stats();
127142
container.appendChild( stats.dom );
128143

129144
window.addEventListener( 'resize', onWindowResize, false );
130145

131-
renderer.setAnimationLoop( function () {
132-
133-
update();
134-
135-
renderer.render( scene, camera );
136-
137-
} );
146+
renderer.setAnimationLoop( render );
138147

139148
}
140149

@@ -152,6 +161,8 @@
152161

153162
carControls.setModel( carModel );
154163

164+
carModel.add( cameraBack );
165+
155166
carModel.traverse( function ( child ) {
156167

157168
if ( child.isMesh ) {
@@ -165,9 +176,12 @@
165176
// shadow
166177
var texture = new THREE.TextureLoader().load( 'models/gltf/ferrari_ao.png' );
167178
var shadow = new THREE.Mesh(
168-
new THREE.PlaneBufferGeometry( 0.655 * 4, 1.3 * 4 ).rotateX( - Math.PI / 2 ),
169-
new THREE.MeshBasicMaterial( { map: texture, opacity: 0.8, transparent: true } )
179+
new THREE.PlaneBufferGeometry( 0.655 * 4, 1.3 * 4 ),
180+
new THREE.MeshBasicMaterial( {
181+
map: texture, opacity: 0.7, transparent: true
182+
} )
170183
);
184+
shadow.rotation.x = - Math.PI / 2;
171185
shadow.renderOrder = 2;
172186
carModel.add( shadow );
173187

@@ -200,20 +214,38 @@
200214

201215
main: [
202216

203-
new THREE.MeshStandardMaterial( { color: 0xff4400, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'orange' } ),
204-
new THREE.MeshStandardMaterial( { color: 0x001166, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'blue' } ),
205-
new THREE.MeshStandardMaterial( { color: 0x990000, envMap: envMap, metalness: 0.9, roughness: 0.2, name: 'red' } ),
206-
new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 0.9, roughness: 0.5, name: 'black' } ),
207-
new THREE.MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 0.9, roughness: 0.5, name: 'white' } ),
208-
new THREE.MeshStandardMaterial( { color: 0x555555, envMap: envMap, envMapIntensity: 2.0, metalness: 1.0, roughness: 0.2, name: 'metallic' } ),
217+
new THREE.MeshStandardMaterial( {
218+
color: 0xff4400, envMap: envMap, metalness: 1.0, roughness: 0.2, name: 'orange'
219+
} ),
220+
new THREE.MeshStandardMaterial( {
221+
color: 0x001166, envMap: envMap, metalness: 1.0, roughness: 0.2, name: 'blue'
222+
} ),
223+
new THREE.MeshStandardMaterial( {
224+
color: 0x990000, envMap: envMap, metalness: 1.0, roughness: 0.2, name: 'red'
225+
} ),
226+
new THREE.MeshStandardMaterial( {
227+
color: 0x000000, envMap: envMap, metalness: 1.0, roughness: 0.2, name: 'black'
228+
} ),
229+
new THREE.MeshStandardMaterial( {
230+
color: 0xffffff, envMap: envMap, metalness: 0.3, roughness: 0.2, name: 'white'
231+
} ),
232+
new THREE.MeshStandardMaterial( {
233+
color: 0xffffff, envMap: envMap, metalness: 1.0, roughness: 0.2, name: 'metallic'
234+
} ),
209235

210236
],
211237

212238
glass: [
213239

214-
new THREE.MeshStandardMaterial( { color: 0xffffff, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'clear' } ),
215-
new THREE.MeshStandardMaterial( { color: 0x000000, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'smoked' } ),
216-
new THREE.MeshStandardMaterial( { color: 0x001133, envMap: envMap, metalness: 1, roughness: 0, opacity: 0.2, transparent: true, premultipliedAlpha: true, name: 'blue' } ),
240+
new THREE.MeshPhysicalMaterial( {
241+
color: 0xffffff, envMap: envMap, metalness: 1, roughness: 0, transparency: 1.0, transparent: true, name: 'clear'
242+
} ),
243+
new THREE.MeshPhysicalMaterial( {
244+
color: 0x000000, envMap: envMap, metalness: 1, roughness: 0, transparency: 0.7, transparent: true, name: 'smoked'
245+
} ),
246+
new THREE.MeshPhysicalMaterial( {
247+
color: 0x001133, envMap: envMap, metalness: 1, roughness: 0, transparency: 0.7, transparent: true, name: 'blue'
248+
} ),
217249

218250
],
219251

@@ -277,7 +309,7 @@
277309

278310
}
279311

280-
function update() {
312+
function render() {
281313

282314
var delta = clock.getDelta();
283315

@@ -294,25 +326,24 @@
294326

295327
if ( followCamera.checked ) {
296328

297-
carModel.getWorldPosition( cameraTarget );
298-
cameraTarget.y = 2.5;
299-
cameraTarget.z += distance;
300-
301-
camera.position.lerp( cameraTarget, delta * damping );
329+
cameraBack.getWorldPosition( cameraTarget );
302330

303331
} else {
304332

305-
carModel.getWorldPosition( cameraTarget );
306-
cameraTarget.y += 0.5;
307-
308-
camera.position.set( 3.25, 2.0, - 5 );
333+
cameraTarget.set( 3.25, 2.0, - 5 );
309334

310335
}
311336

312-
camera.lookAt( carModel.position );
337+
camera.position.lerp( cameraTarget, delta * damping );
338+
339+
var position = carModel.position;
340+
341+
camera.lookAt( position.x, position.y + 0.25, position.z );
313342

314343
}
315344

345+
renderer.render( scene, camera );
346+
316347
stats.update();
317348

318349
}

0 commit comments

Comments
 (0)