Skip to content

Commit 74325ba

Browse files
gkjohnsongkjohnson
committed
update demo
1 parent a704e74 commit 74325ba

File tree

1 file changed

+74
-94
lines changed

1 file changed

+74
-94
lines changed

‎example/spotLights.js‎

Lines changed: 74 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
88
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
99
import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
1010

11-
let renderer, controls, transformControlsScene, spotLight1, lights, spotLights, spotLightHelpers, sceneInfo, ptRenderer, fsQuad, materials;
11+
let renderer, controls, transformControlsScene, spotLight, lights, spotLights, spotLightHelper, sceneInfo, ptRenderer, fsQuad, materials;
1212
let perspectiveCamera;
1313
let scene;
1414
let iesTextures;
1515
let samplesEl;
1616

17+
// ies library profiles
1718
const iesProfileURLs = [
1819
'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/ies/108b32f07d6d38a7a6528a6d307440df.ies',
1920
'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/ies/1aec5958092c236d005093ca27ebe378.ies',
@@ -22,6 +23,7 @@ const iesProfileURLs = [
2223
'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/ies/00c6ce79e1d2cdf3a1fb491aaaa47ae0.ies'
2324
];
2425

26+
// gui parameters
2527
const params = {
2628

2729
floorMaterial: {
@@ -39,7 +41,7 @@ const params = {
3941
environmentIntensity: 0.1,
4042
bounces: 3,
4143
samplesPerFrame: 1,
42-
resolutionScale: 1 / window.devicePixelRatio, // TODO: remove before commit
44+
resolutionScale: 1 / window.devicePixelRatio,
4345
filterGlossyFactor: 0.5,
4446
tiles: 2,
4547
iesProfile: - 1,
@@ -60,28 +62,33 @@ init();
6062

6163
async function init() {
6264

65+
// init renderer
6366
renderer = new THREE.WebGLRenderer( { antialias: true } );
6467
renderer.toneMapping = THREE.ACESFilmicToneMapping;
6568
renderer.setClearColor( 0, 0 );
6669
renderer.shadowMap.enabled = true;
6770
document.body.appendChild( renderer.domElement );
6871

72+
// init camera
6973
const aspect = window.innerWidth / window.innerHeight;
7074
perspectiveCamera = new PhysicalCamera( 75, aspect, 0.025, 500 );
7175
perspectiveCamera.position.set( - 2, 4, 8 ).multiplyScalar( 0.8 );
7276

77+
// init path traer
7378
ptRenderer = new PathTracingRenderer( renderer );
7479
ptRenderer.material = new PhysicalPathTracingMaterial();
7580
ptRenderer.material.backgroundBlur = 0.2;
7681
ptRenderer.material.setDefine( 'FEATURE_MIS', Number( params.multipleImportanceSampling ) );
7782
ptRenderer.tiles.set( params.tiles, params.tiles );
7883
ptRenderer.camera = perspectiveCamera;
7984

85+
// init copy quad
8086
fsQuad = new FullScreenQuad( new THREE.MeshBasicMaterial( {
8187
map: ptRenderer.target.texture,
8288
blending: THREE.CustomBlending,
8389
} ) );
8490

91+
// init controls
8592
controls = new OrbitControls( perspectiveCamera, renderer.domElement );
8693
controls.target.y = 1.5;
8794
controls.update();
@@ -92,25 +99,22 @@ async function init() {
9299
} );
93100

94101
scene = new THREE.Scene();
102+
transformControlsScene = new THREE.Scene();
95103

96104
samplesEl = document.getElementById( 'samples' );
97105

98-
const envMapPromise = new Promise( resolve => {
99-
100-
new RGBELoader()
101-
.load( 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/equirectangular/royal_esplanade_1k.hdr', texture => {
106+
// load the env map
107+
const envMapPromise = new RGBELoader()
108+
.loadAsync( 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/equirectangular/royal_esplanade_1k.hdr' ).then( texture => {
102109

103-
scene.environment = texture;
104-
scene.background = texture;
110+
scene.environment = texture;
111+
scene.background = texture;
105112

106-
resolve();
113+
return texture;
107114

108-
} );
109-
110-
} );
111-
112-
transformControlsScene = new THREE.Scene();
115+
} );
113116

117+
// load the geometry
114118
const generator = new PathTracingSceneWorker();
115119
const gltfPromise = new GLTFLoader()
116120
.loadAsync( 'https://raw.githubusercontent.com/gkjohnson/3d-demo-data/main/models/steampunk-robot/scene.gltf' )
@@ -137,6 +141,7 @@ async function init() {
137141
const box = new THREE.Box3();
138142
box.setFromObject( gltf.scene );
139143

144+
// init environment
140145
const floor = new THREE.Mesh(
141146
new THREE.CylinderBufferGeometry( 8, 8, 0.5, 200 ),
142147
new THREE.MeshStandardMaterial( { color: 0xffffff, roughness: 0.5, metalness: 0.2 } ),
@@ -161,25 +166,18 @@ async function init() {
161166
group.add( wall );
162167

163168
// transform controls
164-
let draggingSpotLight = false;
165-
166169
function makeTransformControls( object ) {
167170

168171
const transformControls = new TransformControls( perspectiveCamera, renderer.domElement );
169-
transformControls.addEventListener( 'change', () => {
172+
transformControls.addEventListener( 'objectChange', () => {
170173

171-
if ( draggingSpotLight ) {
172-
173-
ptRenderer.reset();
174-
175-
}
174+
ptRenderer.reset();
176175

177176
} );
178177

179178
transformControls.addEventListener( 'dragging-changed', ( e ) => {
180179

181-
draggingSpotLight = e.value;
182-
return controls.enabled = ! e.value;
180+
controls.enabled = ! e.value;
183181

184182
} );
185183

@@ -188,69 +186,51 @@ async function init() {
188186

189187
}
190188

191-
// spot lights
192-
spotLightHelpers = [];
189+
// spot light
193190
lights = [];
194191
spotLights = [];
192+
193+
spotLight = new PhysicalSpotLight( 0xffffff );
194+
spotLight.position.set( 0, 7.0, 4 );
195+
spotLight.angle = Math.PI / 4.5;
196+
spotLight.decay = 0;
197+
spotLight.penumbra = 1.0;
198+
spotLight.distance = 0.0;
199+
spotLight.intensity = 50.0;
200+
spotLight.radius = 0.5;
201+
202+
spotLight.shadow.mapSize.width = 512;
203+
spotLight.shadow.mapSize.height = 512;
204+
spotLight.shadow.camera.near = 0.1;
205+
spotLight.shadow.camera.far = 10.0;
206+
spotLight.shadow.focus = 1.0;
207+
spotLight.castShadow = true;
208+
group.add( spotLight );
209+
210+
spotLights.push( spotLight );
211+
lights.push( spotLight );
212+
213+
const targetObject = spotLight.target;
214+
targetObject.position.x = 0;
215+
targetObject.position.y = floor.position.y + 2;
216+
targetObject.position.z = 0.05;
217+
targetObject.updateMatrixWorld();
218+
spotLight.updateMatrixWorld();
219+
group.add( targetObject );
220+
221+
spotLightHelper = new THREE.SpotLightHelper( spotLight );
222+
transformControlsScene.add( spotLightHelper );
223+
224+
makeTransformControls( spotLight );
225+
makeTransformControls( targetObject );
226+
227+
// ies textures
195228
const iesPromises = iesProfileURLs.map( url => {
196229

197230
return new IESLoader().loadAsync( url );
198231

199232
} );
200233

201-
const decays = [ 0, 1.5, 0, 0.25, 0 ];
202-
for ( let i = 0; i < 1; ++ i ) {
203-
204-
const spotLight = new PhysicalSpotLight( 0xffffff );
205-
206-
spotLight.position.set( i * 8, 7.0, 0.005 );
207-
spotLight.angle = Math.PI / 4.5;
208-
spotLight.penumbra = 1.0;
209-
spotLight.decay = decays[ i ];
210-
spotLight.distance = 0.0;
211-
spotLight.intensity = 50.0;
212-
spotLight.radius = 0.5;
213-
214-
spotLight.shadow.mapSize.width = 512;
215-
spotLight.shadow.mapSize.height = 512;
216-
spotLight.shadow.camera.near = 0.1;
217-
spotLight.shadow.camera.far = 10.0;
218-
spotLight.shadow.focus = 1.0;
219-
spotLight.castShadow = true;
220-
221-
spotLights.push( spotLight );
222-
lights.push( spotLight );
223-
224-
const targetObject = new THREE.Object3D();
225-
targetObject.position.x = i * 8.0;
226-
targetObject.position.y = floor.position.y + 2;
227-
targetObject.position.z = 0.05;
228-
targetObject.updateMatrixWorld();
229-
spotLight.updateMatrixWorld();
230-
group.add( targetObject );
231-
232-
spotLight.target = targetObject;
233-
234-
group.add( spotLight );
235-
236-
if ( i == 0 ) {
237-
238-
const spotLightHelper = new THREE.SpotLightHelper( spotLight );
239-
spotLight.add( spotLightHelper );
240-
transformControlsScene.add( spotLightHelper );
241-
242-
spotLightHelpers.push( spotLightHelper );
243-
244-
spotLight1 = spotLight;
245-
spotLight1.position.z = 4;
246-
247-
makeTransformControls( spotLight );
248-
makeTransformControls( targetObject );
249-
250-
}
251-
252-
}
253-
254234
materials = [ floor.material, wall.material ];
255235

256236
return Promise.all( [ generator.generate( group ), Promise.all( iesPromises ) ] );
@@ -289,6 +269,7 @@ async function init() {
289269

290270
document.getElementById( 'loading' ).remove();
291271

272+
// gui
292273
onResize();
293274
window.addEventListener( 'resize', onResize );
294275
const gui = new GUI();
@@ -345,16 +326,16 @@ async function init() {
345326
matFolder2.close();
346327

347328
const lightFolder = gui.addFolder( 'Spot Light' );
348-
lightFolder.addColor( spotLight1, 'color' ).onChange( reset );
349-
lightFolder.add( spotLight1, 'intensity', 0.0, 200.0, 0.01 ).onChange( reset );
350-
lightFolder.add( spotLight1, 'radius', 0.0, 10.0 ).onChange( reset );
351-
lightFolder.add( spotLight1, 'decay', 0.0, 2.0 ).onChange( reset );
352-
lightFolder.add( spotLight1, 'distance', 0.0, 20.0 ).onChange( reset );
353-
lightFolder.add( spotLight1, 'angle', 0.0, Math.PI / 2.0 ).onChange( reset );
354-
lightFolder.add( spotLight1, 'penumbra', 0.0, 1.0 ).onChange( reset );
329+
lightFolder.addColor( spotLight, 'color' ).onChange( reset );
330+
lightFolder.add( spotLight, 'intensity', 0.0, 200.0, 0.01 ).onChange( reset );
331+
lightFolder.add( spotLight, 'radius', 0.0, 10.0 ).onChange( reset );
332+
lightFolder.add( spotLight, 'decay', 0.0, 2.0 ).onChange( reset );
333+
lightFolder.add( spotLight, 'distance', 0.0, 20.0 ).onChange( reset );
334+
lightFolder.add( spotLight, 'angle', 0.0, Math.PI / 2.0 ).onChange( reset );
335+
lightFolder.add( spotLight, 'penumbra', 0.0, 1.0 ).onChange( reset );
355336
lightFolder.add( params, 'iesProfile', - 1, iesProfileURLs.length - 1, 1 ).onChange( v => {
356337

357-
spotLight1.iesTexture = v === - 1 ? null : iesTextures[ v ];
338+
spotLight.iesTexture = v === - 1 ? null : iesTextures[ v ];
358339
reset();
359340

360341
} );
@@ -393,6 +374,7 @@ function animate() {
393374

394375
requestAnimationFrame( animate );
395376

377+
// update materials
396378
const m0 = materials[ 0 ];
397379
m0.color.set( params.floorMaterial.color ).convertSRGBToLinear();
398380
m0.metalness = params.floorMaterial.metalness;
@@ -403,6 +385,7 @@ function animate() {
403385
m1.metalness = params.wallMaterial.metalness;
404386
m1.roughness = params.wallMaterial.roughness;
405387

388+
// update path tracer
406389
ptRenderer.material.materials.updateFrom( sceneInfo.materials, sceneInfo.textures );
407390

408391
ptRenderer.material.filterGlossyFactor = params.filterGlossyFactor;
@@ -413,14 +396,11 @@ function animate() {
413396
ptRenderer.material.lights.updateFrom( lights );
414397
ptRenderer.material.spotLights.updateFrom( spotLights, iesTextures );
415398

399+
// update objects
416400
perspectiveCamera.updateMatrixWorld();
401+
spotLightHelper.update();
417402

418-
spotLightHelpers.forEach( spotLightHelper => {
419-
420-
spotLightHelper.update();
421-
422-
} );
423-
403+
// render
424404
for ( let i = 0, l = params.samplesPerFrame; i < l; i ++ ) {
425405

426406
ptRenderer.update();
@@ -442,7 +422,7 @@ function animate() {
442422
transformControlsScene.children.forEach( c => {
443423

444424
c.visible = c instanceof THREE.SpotLightHelper ? params.showLightHelper : params.showTransformControls;
445-
if ( c.enabled ) c.enabled = params.showTransformControls;
425+
if ( 'enabled' in c ) c.enabled = params.showTransformControls;
446426

447427
} );
448428

0 commit comments

Comments
 (0)