Adding SpotLight Example webgl_lights_spotlight.html

45a22ff4 · Master James · 5eb26ca1 · 45a22ff4
隐藏空白更改
内联并排

Showing with 212 addition and 0 deletion

examples/webgl_lights_spotlight.html examples/webgl_lights_spotlight.html +212 -0

未找到文件。
--- a/examples/webgl_lights_spotlight.html
+++ b/examples/webgl_lights_spotlight.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - lights - spot light</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				background-color: #000;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family: Monospace;
+				font-size: 13px;
+				text-align: center;
+			}
+
+			a {
+				color: #ff0080;
+				text-decoration: none;
+			}
+
+			a:hover {
+				color: #0080ff;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank">three.js</a> - Just to show the spot light and it's edge - by <a href="http://master-domain.com" target="_blank">Master James</a><br />
+			Right click and drag to move OrbitControls,<br /> center across the edge of the shadow.<br />
+		</div>
+
+		<script src="../build/three.js"></script>
+		<script src="../examples/js/libs/dat.gui.min.js"></script>
+		<script src="../examples/js/controls/OrbitControls.js"></script>
+		<script src="js/Detector.js"></script>
+
+		<script>
+			let container = document.getElementById( 'container' );
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			let rnd = new THREE.WebGLRenderer();
+			let cam = new THREE.PerspectiveCamera(34, window.innerWidth / window.innerHeight, 0.1, 20000);
+			let orb = new THREE.OrbitControls(cam, document);
+
+			let scn = new THREE.Scene();
+			let matFloor = new THREE.MeshPhongMaterial();
+			let matBox = new THREE.MeshPhongMaterial();
+			let geoFloor = new THREE.BoxGeometry(2000, 0.1, 2000);
+			let geoBox = new THREE.BoxGeometry(Math.PI, Math.sqrt(2), Math.E);
+			let mshFloor = new THREE.Mesh(geoFloor, matFloor);
+			let mshBox = new THREE.Mesh(geoBox, matBox);
+			let amb = new THREE.AmbientLight(0x121422);
+			let spt = new THREE.SpotLight(0xFFFFFF);
+			let lightHelper;
+
+			let gui, guiElements, param = { color: '0xffffff' };
+
+			function init() {
+				rnd.shadowMap.enabled = true;
+				rnd.shadowMap.type = THREE.PCFSoftShadowMap;
+				rnd.gammaInput = true;
+				rnd.gammaOutput = true;
+				rnd.antialias = true;
+
+				cam.position.set(30, 13, -24);
+
+				spt.position.set(15, 40, 35);
+				spt.castShadow = true;
+				spt.angle = 0.777;
+				spt.exponent = 2.0;
+				spt.penumbra = 0.2;
+				spt.decay = 2;
+				spt.distance = 500;
+				spt.shadow.mapSize.width = 8192;
+				spt.shadow.mapSize.height = 8192;
+				// shadow camera helper
+				spt.shadowCameraHelper = new THREE.CameraHelper( spt.shadow.camera ); // colored lines
+				spt.shadow.camera.near = 0.1;
+				spt.shadow.camera.far = 20000;
+				//spt.shadow.camera.fov = (spt.angle * (360 / Math.PI));
+
+				lightHelper = new THREE.SpotLightHelper( spt );
+
+				matFloor.color.set( 0x808080 );
+				matFloor.color.a = 1.0;
+
+				mshFloor.receiveShadow = true;
+				mshFloor.position.set(0, -0.05, 0);
+
+				matBox.color = { r: Math.random(), g: Math.random(), b: Math.random(), a: 1.0 };
+				mshBox.castShadow = true;
+				mshBox.receiveShadow = true;
+				mshBox.position.set(40, 1.8, 0);
+
+
+				scn.add(cam);
+				scn.add(mshFloor);
+				scn.add(mshBox);
+				scn.add(amb);
+				scn.add(spt);
+				scn.add( spt.shadowCameraHelper );
+				scn.add( new THREE.AxisHelper( 10 ) );
+				scn.add( lightHelper );
+
+				document.body.appendChild(rnd.domElement);
+				onResize();
+				window.addEventListener('resize', onResize, false);
+
+				orb.addEventListener('change', render);
+				//orb.maxPolarAngle = (Math.PI / 2);
+				orb.update();
+			}
+
+			function onResize() {
+				rnd.setSize(window.innerWidth, window.innerHeight);
+				cam.aspect = (window.innerWidth / window.innerHeight);
+				cam.updateProjectionMatrix();
+				orb.target = mshBox.position;
+			}
+
+			function render() {
+				lightHelper.update(); // required
+				if ( spt.shadowCameraHelper ) spt.shadowCameraHelper.update();
+
+				rnd.render(scn, cam);
+			}
+
+			function clearGui() {
+				if ( gui ) gui.destroy();
+
+				gui = new dat.GUI();
+
+				gui.open();
+			}
+
+			function buildGui() {
+
+				clearGui();
+
+				addGui( 'color', spt.color.getHex(), function( val ) {
+					spt.color.setHex( val );
+					render();
+				}, true );
+
+				addGui( 'intensity', spt.intensity, function( val ) {
+					spt.intensity = val;
+					render();
+				}, false, 0, 10 );
+
+				addGui( 'distance', spt.distance, function( val ) {
+					spt.distance = val;
+					render();
+				}, false, 0, 1000 );
+
+				addGui( 'angle', spt.angle, function( val ) {
+					spt.angle = val;
+					render();
+				}, false, 0, 1.56 );
+
+				addGui( 'penumbra', spt.penumbra, function( val ) {
+					spt.penumbra = val;
+					render();
+				}, false, 0, 1 );
+
+				addGui( 'decay', spt.decay, function( val ) {
+					spt.decay = val;
+					render();
+				}, false, 0, 100 );
+
+			}
+
+			function addGui( name, value, callback, isColor, min, max ) {
+				var node;
+				param[ name ] = value;
+				if ( isColor ) {
+					node = gui.addColor( param, name ).onChange( function() {
+						callback( param[ name ] );
+					} );
+				}
+				else if ( typeof value == 'object' ) {
+					node = gui.add( param, name, value ).onChange( function() {
+						callback( param[ name ] );
+					} );
+				}
+				else {
+					node = gui.add( param, name, min, max ).onChange( function() {
+						callback( param[ name ] );
+					} );
+				}
+				return node;
+			}
+
+			init();
+
+			buildGui();
+
+			render();
+
+		</script>
+	</body>
+</html>