浏览代码

fixed spaces/tabs

Emmett Lalish 5 年之前
父节点
当前提交
5b33e1d4e6
共有 1 个文件被更改,包括 101 次插入101 次删除
  1. 101 101
      examples/webgl_pmrem_test.html

+ 101 - 101
examples/webgl_pmrem_test.html

@@ -11,13 +11,13 @@
 		<div id="container">
 		<div id="container">
 			<div id="info">
 			<div id="info">
 				<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
 				<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
-                PMREM directional light test <a href="https://github.com/elalish" target="_blank" rel="noopener">Emmett Lalish</a>
-                <br>Top row is white metal
-                <br>Middle row is white dielectric
-                <br>Last row is black dielectric.
-                <br>Mouse-out is a standard Directional Light.
-                <br>Mouse-over is a PMREM of the skybox: a single bright pixel representing the same directional light source.
-                <br>The difference between these renders indicates the error in the PMREM approximations.
+				PMREM directional light test <a href="https://github.com/elalish" target="_blank" rel="noopener">Emmett Lalish</a>
+				<br>Top row is white metal
+				<br>Middle row is white dielectric
+				<br>Last row is black dielectric.
+				<br>Mouse-out is a standard Directional Light.
+				<br>Mouse-over is a PMREM of the skybox: a single bright pixel representing the same directional light source.
+				<br>The difference between these renders indicates the error in the PMREM approximations.
 			</div>
 			</div>
 		</div>
 		</div>
 
 
@@ -25,138 +25,138 @@
 
 
 			import * as THREE from '../build/three.module.js';
 			import * as THREE from '../build/three.module.js';
 
 
-            import { OrbitControls } from './jsm/controls/OrbitControls.js';
-            import { RGBELoader } from './jsm/loaders/RGBELoader.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
 
 
-            var scene, camera, controls, renderer;
-            
+			var scene, camera, controls, renderer;
+			
 			function init() {
 			function init() {
 
 
-                var width = window.innerWidth;
-                var height = window.innerHeight;
-                var aspect = width / height;
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+				var aspect = width / height;
 
 
-                // renderer
+				// renderer
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( width, height );
+				renderer.gammaOutput = true;
+				renderer.physicallyCorrectLights = true;
 
 
-                renderer = new THREE.WebGLRenderer( { antialias: true } );
-                renderer.setPixelRatio( window.devicePixelRatio );
-                renderer.setSize( width, height );
-                renderer.gammaOutput = true;
-                renderer.physicallyCorrectLights = true;
+				// tonemapping
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				renderer.toneMappingExposure = 1;
 
 
-                // tonemapping
-                renderer.toneMapping = THREE.ACESFilmicToneMapping;
-                renderer.toneMappingExposure = 1;
+				document.body.appendChild( renderer.domElement );
 
 
-                document.body.appendChild( renderer.domElement );
+				window.addEventListener( 'resize', onResize, false );
 
 
-                window.addEventListener( 'resize', onResize, false );
+				// scene
 
 
-                // scene
+				scene = new THREE.Scene();
 
 
-                scene = new THREE.Scene();
+				// camera
 
 
-                // camera
+				camera = new THREE.PerspectiveCamera( 40, aspect, 1, 30 );
+				updateCamera();
+				camera.position.set( 0, 0, 16 );
 
 
-                camera = new THREE.PerspectiveCamera( 40, aspect, 1, 30 );
-                updateCamera();
-                camera.position.set( 0, 0, 16 );
+				// controls
 
 
-                // controls
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.update();
 
 
-                controls = new OrbitControls( camera, renderer.domElement );
-                controls.update();
+				// light
 
 
-                // light
+				var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
+				var x = 597;
+				var y = 213;
+				var theta = ( x + 0.5 ) * Math.PI / 512;
+				var phi = ( y + 0.5 ) * Math.PI / 512;
 
 
-                var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
-                var x = 597;
-                var y = 213;
-                var theta = ( x + 0.5 ) * Math.PI / 512;
-                var phi = ( y + 0.5 ) * Math.PI / 512;
+				directionalLight.position.setFromSphericalCoords( 100, - phi, Math.PI / 2 - theta );
 
 
-                directionalLight.position.setFromSphericalCoords( 100, - phi, Math.PI/2 - theta );
+				scene.add( directionalLight );
+				// scene.add( new THREE.DirectionalLightHelper( directionalLight ) );
 
 
-                scene.add( directionalLight );
-                // scene.add( new THREE.DirectionalLightHelper( directionalLight ) );
+				document.body.addEventListener( 'mouseover', function () {
 
 
-                document.body.addEventListener( 'mouseover', function () {
+					scene.traverse( function ( child ) {
 
 
-                    scene.traverse( function ( child ) {
+						if ( child.isMesh ) {
 
 
-                        if ( child.isMesh ) {
+							child.material.envMapIntensity = 1;
+							directionalLight.intensity = 0;
 
 
-                            child.material.envMapIntensity = 1;
-                            directionalLight.intensity = 0;
-                        
-                        }
+						}
 
 
-                    } );
+					} );
 
 
-                } );
+				} );
 
 
-                document.body.addEventListener( 'mouseout', function () {
+				document.body.addEventListener( 'mouseout', function () {
 
 
-                    scene.traverse( function ( child ) {
+					scene.traverse( function ( child ) {
 
 
-                        if ( child.isMesh ) {
+						if ( child.isMesh ) {
 
 
-                            child.material.envMapIntensity = 0;
-                            directionalLight.intensity = 1;
+							child.material.envMapIntensity = 0;
+							directionalLight.intensity = 1;
 
 
-                        }
+						}
 
 
-                    } );
+					} );
 
 
-                } );
+				} );
 
 
 			}
 			}
 
 
 			function createObjects() {
 			function createObjects() {
 
 
-                var radianceMap = null;
-                new RGBELoader()
-                    .setDataType( THREE.UnsignedByteType )
-                    // .setDataType( THREE.FloatType )
-                    .setPath( 'textures/equirectangular/' )
-                    .load( 'spot1Lux.hdr', function ( texture ) {
+				var radianceMap = null;
+				new RGBELoader()
+					.setDataType( THREE.UnsignedByteType )
+					// .setDataType( THREE.FloatType )
+					.setPath( 'textures/equirectangular/' )
+					.load( 'spot1Lux.hdr', function ( texture ) {
 
 
-                        // This HDR environment map is expressed in nits (lux / sr). The directional light has units of lux,
-                        // so to match a 1 lux light, we set a single pixel with a value equal to 1 divided by the solid 
-                        // angle of the pixel in steradians. This image is 1024 x 512, 
-                        // so the value is 1 / (pi / 512) ^ 2 = 26,560 nits.
+						// This HDR environment map is expressed in nits (lux / sr). The directional light has units of lux,
+						// so to match a 1 lux light, we set a single pixel with a value equal to 1 divided by the solid
+						// angle of the pixel in steradians. This image is 1024 x 512,
+						// so the value is 1 / (pi / 512) ^ 2 = 26,560 nits.
 
 
-                        var pmremGenerator = new PMREMGenerator( renderer );
-                        radianceMap = pmremGenerator.fromEquirectangular( texture ).texture;
-                        pmremGenerator.dispose();
+						var pmremGenerator = new PMREMGenerator( renderer );
+						radianceMap = pmremGenerator.fromEquirectangular( texture ).texture;
+						pmremGenerator.dispose();
 
 
-                        scene.background = radianceMap;
+						scene.background = radianceMap;
 
 
-                        var geometry = new THREE.SphereBufferGeometry( 0.4, 32, 32 );
+						var geometry = new THREE.SphereBufferGeometry( 0.4, 32, 32 );
 
 
-                        for ( var x = 0; x <= 10; x ++ ) {
+						for ( var x = 0; x <= 10; x ++ ) {
 
 
-                            for ( var y = 0; y <= 2; y ++ ) {
+							for ( var y = 0; y <= 2; y ++ ) {
 
 
-                                var material = new THREE.MeshPhysicalMaterial( {
-                                    roughness: x / 10,
-                                    metalness: y < 1 ? 1 : 0,
-                                    color: y < 2 ? 0xffffff : 0x000000,
-                                    envMap: radianceMap,
-                                    envMapIntensity: 1
-                                } );
+								var material = new THREE.MeshPhysicalMaterial( {
+									roughness: x / 10,
+									metalness: y < 1 ? 1 : 0,
+									color: y < 2 ? 0xffffff : 0x000000,
+									envMap: radianceMap,
+									envMapIntensity: 1
+								} );
 
 
-                                var mesh = new THREE.Mesh( geometry, material );
-                                mesh.position.x = x - 5;
-                                mesh.position.y = 1 - y;
-                                scene.add( mesh );
+								var mesh = new THREE.Mesh( geometry, material );
+								mesh.position.x = x - 5;
+								mesh.position.y = 1 - y;
+								scene.add( mesh );
 
 
-                            }
+							}
 
 
-                        }
+						}
 
 
-                } );
+					} );
 
 
 			}
 			}
 
 
@@ -165,21 +165,21 @@
 				var width = window.innerWidth;
 				var width = window.innerWidth;
 				var height = window.innerHeight;
 				var height = window.innerHeight;
 
 
-                camera.aspect = width / height;
+				camera.aspect = width / height;
 				updateCamera();
 				updateCamera();
 
 
 				renderer.setSize( width, height );
 				renderer.setSize( width, height );
 
 
-            }
-            
-            function updateCamera() {
+			}
+			
+			function updateCamera() {
 
 
-                var horizontalFoV = 40;
-                var verticalFoV = 2 * Math.atan( Math.tan( horizontalFoV / 2 * Math.PI / 180 ) / camera.aspect ) * 180 / Math.PI;
-                camera.fov = verticalFoV;
+				var horizontalFoV = 40;
+				var verticalFoV = 2 * Math.atan( Math.tan( horizontalFoV / 2 * Math.PI / 180 ) / camera.aspect ) * 180 / Math.PI;
+				camera.fov = verticalFoV;
 				camera.updateProjectionMatrix();
 				camera.updateProjectionMatrix();
 
 
-            }
+			}
 
 
 			function animate() {
 			function animate() {
 
 
@@ -191,8 +191,8 @@
 
 
 				renderer.render( scene, camera );
 				renderer.render( scene, camera );
 
 
-            }
-            
+			}
+			
 			Promise.resolve()
 			Promise.resolve()
 				.then( init )
 				.then( init )
 				.then( createObjects )
 				.then( createObjects )