samien
/
three.js
зеркало из https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - light probe volume (Sponza, baked)</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 (Sponza, baked)">
		<meta property="og:type" content="website">
		<meta property="og:url" content="https://threejs.org/examples/webgl_lightprobes_sponza_baked.html">
		<meta property="og:image" content="https://threejs.org/examples/screenshots/webgl_lightprobes_sponza_baked.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 (Sponza, baked)<br/>
			WASD to move, mouse to look
		</div>

		<progress id="progressBar" value="0" max="100" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)"></progress>

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

		<script type="module">

			import * as THREE from 'three';

			import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			import { Sky } from 'three/addons/objects/Sky.js';
			import { LightProbeGrid } from 'three/addons/lighting/LightProbeGrid.js';
			import { LightProbeGridHelper } from 'three/addons/helpers/LightProbeGridHelper.js';

			const MODEL_INDEX_URL = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/model-index.json';
			const SAMPLE_ASSETS_BASE_URL = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Assets/main/Models/';
			const PROBES_URL = './probes/sponza-lightprobes-bake.json';

			// Light settings that matched the bake.
			const LIGHT_AZIMUTH = - 165;
			const LIGHT_ELEVATION = 55;
			const LIGHT_INTENSITY = 100.0;

			let camera, scene, renderer, controls, timer;

			const _box = new THREE.Box3();
			const _size = new THREE.Vector3();
			const _center = new THREE.Vector3();

			init();

			async function init() {

				timer = new THREE.Timer();

				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 1000 );
				camera.position.set( - 10.25, 4.99, 0.40 );
				camera.rotation.set( 1.6505, - 1.5008, 1.6507 );

				scene = new THREE.Scene();

				const sky = new Sky();
				sky.scale.setScalar( 450000 );
				scene.add( sky );

				const skyUniforms = sky.material.uniforms;
				skyUniforms[ 'turbidity' ].value = 10;
				skyUniforms[ 'rayleigh' ].value = 2;
				skyUniforms[ 'mieCoefficient' ].value = 0.005;
				skyUniforms[ 'mieDirectionalG' ].value = 0.8;

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setPixelRatio( Math.min( window.devicePixelRatio, 1.5 ) );
				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 = new FirstPersonControls( camera, renderer.domElement );
				controls.movementSpeed = 2.0;
				controls.lookSpeed = 0.16;

				const progressBar = document.getElementById( 'progressBar' );

				const manager = new THREE.LoadingManager();
				manager.onProgress = function ( url, loaded, total ) {

					progressBar.value = loaded / total * 100;

				};

				manager.onLoad = function () {

					progressBar.remove();

				};

				const loader = new GLTFLoader( manager );
				const modelURL = await getSponzaModelURL();
				const [ gltf, probesJSON ] = await Promise.all( [
					loader.loadAsync( modelURL ),
					fetch( PROBES_URL ).then( ( r ) => r.json() )
				] );

				const model = gltf.scene;
				const embeddedLights = [];

				model.traverse( ( child ) => {

					if ( child.isMesh ) {

						child.castShadow = true;
						child.receiveShadow = true;

					} else if ( child.isLight ) {

						embeddedLights.push( child );

					}

				} );

				for ( const light of embeddedLights ) {

					if ( light.parent ) light.parent.remove( light );

				}

				scene.add( model );

				_box.setFromObject( model );
				const modelSize = _box.getSize( _size ).clone();
				const modelCenter = _box.getCenter( _center ).clone();
				const targetY = modelCenter.y + modelSize.y * 0.2;
				const lightBaseDistance = Math.max( modelSize.x, modelSize.z );

				const azimuth = THREE.MathUtils.degToRad( LIGHT_AZIMUTH );
				const elevation = THREE.MathUtils.degToRad( LIGHT_ELEVATION );
				const horizontal = Math.cos( elevation ) * lightBaseDistance;
				const vertical = Math.sin( elevation ) * lightBaseDistance;

				const dirLight = new THREE.DirectionalLight( 0xfff2dc, LIGHT_INTENSITY );
				dirLight.position.set(
					modelCenter.x + Math.cos( azimuth ) * horizontal,
					targetY + vertical,
					modelCenter.z + Math.sin( azimuth ) * horizontal
				);
				dirLight.target.position.set( modelCenter.x, targetY, modelCenter.z );
				scene.add( dirLight.target );
				dirLight.castShadow = true;
				dirLight.shadow.mapSize.setScalar( 2048 );
				const shadowExtent = Math.max( modelSize.x, modelSize.z ) * 0.7;
				dirLight.shadow.camera.left = - shadowExtent;
				dirLight.shadow.camera.right = shadowExtent;
				dirLight.shadow.camera.top = shadowExtent;
				dirLight.shadow.camera.bottom = - shadowExtent;
				dirLight.shadow.camera.near = 0.1;
				dirLight.shadow.camera.far = modelSize.y * 4.0;
				scene.add( dirLight );

				const sun = new THREE.Vector3();
				const phi = THREE.MathUtils.degToRad( 90 - LIGHT_ELEVATION );
				const theta = THREE.MathUtils.degToRad( LIGHT_AZIMUTH );
				sun.setFromSphericalCoords( 1, phi, theta );
				sky.material.uniforms[ 'sunPosition' ].value.copy( sun );

				const probes = LightProbeGrid.fromJSON( probesJSON );
				scene.add( probes );

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

				const probesHelper = new LightProbeGridHelper( probes, 0.1 );
				probesHelper.visible = params.showProbes;
				scene.add( probesHelper );

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

					probes.visible = value;

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

					probesHelper.visible = value;

				} );

				window.addEventListener( 'resize', onWindowResize );

			}

			async function getSponzaModelURL() {

				const response = await fetch( MODEL_INDEX_URL );
				const models = await response.json();
				const sponzaInfo = models.find( ( model ) => model.name === 'Sponza' );

				if ( ! sponzaInfo ) {

					throw new Error( 'Sponza entry was not found in the glTF sample model index.' );

				}

				const variants = sponzaInfo.variants || {};
				const variantName = variants[ 'glTF-Binary' ] || variants[ 'glTF' ] || variants[ 'glTF-Embedded' ] || Object.values( variants )[ 0 ];

				if ( ! variantName ) {

					throw new Error( 'Sponza has no supported glTF variant in the model index.' );

				}

				const variantFolder = variantName.endsWith( '.glb' ) ? 'glTF-Binary' : 'glTF';
				return `${ SAMPLE_ASSETS_BASE_URL }${ sponzaInfo.name }/${ variantFolder }/${ variantName }`;

			}

			function onWindowResize() {

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

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

			}

			function animate( timestamp ) {

				timer.update( timestamp );
				controls.update( timer.getDelta() );
				renderer.render( scene, camera );

			}

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