samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - light probe volume (multi-room)</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<meta property="og:title" content="three.js webgl - light probe volume (multi-room)">
		<meta property="og:type" content="website">
		<meta property="og:url" content="https://threejs.org/examples/webgl_lightprobes_complex.html">
		<meta property="og:image" content="https://threejs.org/examples/screenshots/webgl_lightprobes_complex.jpg">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<div id="info">
			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - light probe volume (multi-room)<br/>
			Two rooms with independent probe volumes showcasing multi-volume scene.add() API
		</div>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			import { LightProbeGrid } from 'three/addons/lighting/LightProbeGrid.js';
			import { LightProbeGridHelper } from 'three/addons/helpers/LightProbeGridHelper.js';

			let camera, scene, renderer, controls;
			let probesLeft, probesRight;
			let probesHelperLeft, probesHelperRight;

			init();

			async function init() {

				// Camera

				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 100 );
				camera.position.set( 0, 2.5, 16 );

				// Scene

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x111111 );

				// Materials

				const wallMaterial = new THREE.MeshStandardMaterial( { color: 0xcccccc, side: THREE.BackSide } );
				const whiteMat = new THREE.MeshStandardMaterial( { color: 0xeeeeee } );

				// Room shell: x=-8 to 8, z=-4 to 4, y=0 to 5

				const room = new THREE.Mesh( new THREE.BoxGeometry( 16, 5, 8 ), wallMaterial );
				room.position.set( 0, 2.5, 0 );
				room.receiveShadow = true;
				scene.add( room );

				const redWall = new THREE.Mesh(
					new THREE.PlaneGeometry( 8, 5 ),
					new THREE.MeshStandardMaterial( { color: 0xdd2200 } )
				);
				redWall.rotation.y = Math.PI / 2;
				redWall.position.set( - 7.99, 2.5, 0 );
				scene.add( redWall );

				const blueWall = new THREE.Mesh(
					new THREE.PlaneGeometry( 8, 5 ),
					new THREE.MeshStandardMaterial( { color: 0x0044ff } )
				);
				blueWall.rotation.y = - Math.PI / 2;
				blueWall.position.set( 7.99, 2.5, 0 );
				scene.add( blueWall );

				// Dividing wall at x=0 with doorway

				const dividerMat = new THREE.MeshStandardMaterial( { color: 0xcccccc } );
				const doorwayHalfGap = 1.25;

				// Left section of divider (z = -4 to -1.25)
				const dividerLeft = new THREE.Mesh(
					new THREE.BoxGeometry( 0.3, 5, 4 - doorwayHalfGap ),
					dividerMat
				);
				dividerLeft.position.set( 0, 2.5, - ( doorwayHalfGap + ( 4 - doorwayHalfGap ) / 2 ) );
				dividerLeft.castShadow = true;
				dividerLeft.receiveShadow = true;
				scene.add( dividerLeft );

				// Right section of divider (z = 1.25 to 4)
				const dividerRight = new THREE.Mesh(
					new THREE.BoxGeometry( 0.3, 5, 4 - doorwayHalfGap ),
					dividerMat
				);
				dividerRight.position.set( 0, 2.5, doorwayHalfGap + ( 4 - doorwayHalfGap ) / 2 );
				dividerRight.castShadow = true;
				dividerRight.receiveShadow = true;
				scene.add( dividerRight );

				// Lintel above doorway
				const lintel = new THREE.Mesh(
					new THREE.BoxGeometry( 0.3, 1.2, doorwayHalfGap * 2 ),
					dividerMat
				);
				lintel.position.set( 0, 4.4, 0 );
				lintel.castShadow = true;
				lintel.receiveShadow = true;
				scene.add( lintel );

				// Left room objects

				// Columns
				const columnGeom = new THREE.CylinderGeometry( 0.3, 0.3, 4, 16 );

				for ( const x of [ - 6, - 2 ] ) {

					for ( const z of [ - 2.5, 2.5 ] ) {

						const col = new THREE.Mesh( columnGeom, whiteMat );
						col.position.set( x, 2, z );
						col.castShadow = true;
						col.receiveShadow = true;
						scene.add( col );

					}

				}

				// Table with golden sphere
				const tableTop = new THREE.Mesh(
					new THREE.BoxGeometry( 2.4, 0.12, 1.4 ),
					new THREE.MeshStandardMaterial( { color: 0x886644 } )
				);
				tableTop.position.set( - 4, 1.0, 0 );
				tableTop.castShadow = true;
				tableTop.receiveShadow = true;
				scene.add( tableTop );

				const legGeom = new THREE.BoxGeometry( 0.1, 1, 0.1 );

				for ( const x of [ - 5.05, - 2.95 ] ) {

					for ( const z of [ - 0.55, 0.55 ] ) {

						const leg = new THREE.Mesh( legGeom, tableTop.material );
						leg.position.set( x, 0.5, z );
						leg.castShadow = true;
						scene.add( leg );

					}

				}

				const sphere = new THREE.Mesh(
					new THREE.SphereGeometry( 0.35, 32, 32 ),
					new THREE.MeshStandardMaterial( { color: 0xffd700, metalness: 0.3, roughness: 0.4 } )
				);
				sphere.position.set( - 4, 1.41, 0 );
				sphere.castShadow = true;
				sphere.receiveShadow = true;
				scene.add( sphere );

				// Stepped blocks near red wall
				const step1 = new THREE.Mesh( new THREE.BoxGeometry( 1.5, 0.5, 1 ), whiteMat );
				step1.position.set( - 7, 0.25, 0 );
				step1.castShadow = true;
				step1.receiveShadow = true;
				scene.add( step1 );

				const step2 = new THREE.Mesh( new THREE.BoxGeometry( 1.0, 1.0, 1 ), whiteMat );
				step2.position.set( - 7, 0.5, 0 );
				step2.castShadow = true;
				step2.receiveShadow = true;
				scene.add( step2 );

				const step3 = new THREE.Mesh( new THREE.BoxGeometry( 0.5, 1.5, 1 ), whiteMat );
				step3.position.set( - 7, 0.75, 0 );
				step3.castShadow = true;
				step3.receiveShadow = true;
				scene.add( step3 );

				// Right room objects

				// Columns
				for ( const x of [ 2, 6 ] ) {

					for ( const z of [ - 2.5, 2.5 ] ) {

						const col = new THREE.Mesh( columnGeom, whiteMat );
						col.position.set( x, 2, z );
						col.castShadow = true;
						col.receiveShadow = true;
						scene.add( col );

					}

				}

				// Pedestal with torus knot
				const pedestal = new THREE.Mesh(
					new THREE.BoxGeometry( 0.8, 1.2, 0.8 ),
					whiteMat
				);
				pedestal.position.set( 4, 0.6, 0 );
				pedestal.castShadow = true;
				pedestal.receiveShadow = true;
				scene.add( pedestal );

				const torusKnot = new THREE.Mesh(
					new THREE.TorusKnotGeometry( 0.3, 0.1, 64, 16 ),
					new THREE.MeshStandardMaterial( { color: 0xff44aa, metalness: 0.2, roughness: 0.5 } )
				);
				torusKnot.position.set( 4, 1.65, 0 );
				torusKnot.castShadow = true;
				torusKnot.receiveShadow = true;
				scene.add( torusKnot );

				// Tall cone sculpture
				const sculpture = new THREE.Mesh(
					new THREE.ConeGeometry( 0.4, 2.5, 5 ),
					whiteMat
				);
				sculpture.position.set( 6.5, 1.25, - 1.5 );
				sculpture.castShadow = true;
				sculpture.receiveShadow = true;
				scene.add( sculpture );

				// Lights

				// Warm point light in left room
				const warmLight = new THREE.PointLight( 0xffaa44, 30 );
				warmLight.position.set( - 4, 4.5, 0 );
				warmLight.castShadow = true;
				warmLight.shadow.mapSize.setScalar( 256 );
				warmLight.shadow.radius = 12;
				warmLight.shadow.bias = - 0.002;
				scene.add( warmLight );

				// Cool point light in right room
				const coolLight = new THREE.PointLight( 0x88bbff, 30 );
				coolLight.position.set( 4, 4.5, 0 );
				coolLight.castShadow = true;
				coolLight.shadow.mapSize.setScalar( 256 );
				coolLight.shadow.radius = 12;
				coolLight.shadow.bias = - 0.002;
				scene.add( coolLight );

				// Renderer

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setAnimationLoop( animate );
				renderer.shadowMap.enabled = true;
				renderer.toneMapping = THREE.ACESFilmicToneMapping;
				renderer.toneMappingExposure = 1.0;
				document.body.appendChild( renderer.domElement );

				// Controls

				controls = new OrbitControls( camera, renderer.domElement );
				controls.target.set( 0, 2.5, 0 );
				controls.update();

				// Probe volumes

				const params = {
					enabled: true,
					showProbes: false,
					resolution: 6
				};

				async function bakeWithResolution( resolution ) {

					// Remove both volumes before baking to prevent feedback

					if ( probesLeft ) {

						scene.remove( probesLeft );
						probesLeft.dispose();

					}

					if ( probesRight ) {

						scene.remove( probesRight );
						probesRight.dispose();

					}

					// Bake both volumes

					probesLeft = new LightProbeGrid( 7.8, 4.7, 7.6, resolution, resolution, resolution );
					probesLeft.position.set( - 3.9, 2.45, 0 );
					probesLeft.bake( renderer, scene, { cubemapSize: 32, near: 0.05, far: 20 } );
					probesLeft.visible = params.enabled;

					probesRight = new LightProbeGrid( 7.8, 4.7, 7.6, resolution, resolution, resolution );
					probesRight.position.set( 3.9, 2.45, 0 );
					probesRight.bake( renderer, scene, { cubemapSize: 32, near: 0.05, far: 20 } );
					probesRight.visible = params.enabled;

					// Add both after baking

					scene.add( probesLeft );
					scene.add( probesRight );

					// Update debug visualization

					if ( ! probesHelperLeft ) {

						probesHelperLeft = new LightProbeGridHelper( probesLeft );
						probesHelperLeft.visible = params.showProbes;
						scene.add( probesHelperLeft );

						probesHelperRight = new LightProbeGridHelper( probesRight );
						probesHelperRight.visible = params.showProbes;
						scene.add( probesHelperRight );

					} else {

						probesHelperLeft.probes = probesLeft;
						probesHelperLeft.update();

						probesHelperRight.probes = probesRight;
						probesHelperRight.update();

					}

				}

				await bakeWithResolution( params.resolution );

				// GUI

				const gui = new GUI();
				gui.add( params, 'enabled' ).name( 'GI' ).onChange( ( value ) => {

					probesLeft.visible = value;
					probesRight.visible = value;

				} );
				gui.add( params, 'resolution', 2, 12, 1 ).name( 'Resolution' ).onFinishChange( ( value ) => {

					bakeWithResolution( value );

				} );
				gui.add( params, 'showProbes' ).name( 'Show Probes' ).onChange( ( value ) => {

					probesHelperLeft.visible = value;
					probesHelperRight.visible = value;

				} );

				//

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}

			function animate() {

				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>