Moved ShadowMesh to examples/js/objects by now.

469c2e39 · Mr.doob · 6c4a7877 · 469c2e39 · 469c2e39
隐藏空白更改
内联并排

Showing with 36 addition and 58 deletion

examples/js/objects/ShadowMesh.js examples/js/objects/ShadowMesh.js +12 -14

examples/webgl_shadowmesh.html examples/webgl_shadowmesh.html +24 -44

未找到文件。
--- a/src/objects/ShadowMesh.js
+++ b/src/objects/ShadowMesh.js
-// File:src/objects/ShadowMesh.js
-
 /**
 * @author erichlof /  http://github.com/erichlof
+ *
+ * A shadow Mesh that follows a shadow-casting Mesh in the scene, but is confined to a single plane.
 */

-// a shadow Mesh that follows a shadow-casting Mesh in the scene, but is confined to a single plane.
-
 THREE.ShadowMesh = function ( mesh ) {
-	
+
 	var shadowMaterial = new THREE.MeshBasicMaterial( {
-		
+
 		color: 0x000000,
 		transparent: true,
 		opacity: 0.6,
 		depthWrite: false
-		
+
 	} );
-	
+
 	THREE.Mesh.call( this, mesh.geometry, shadowMaterial );
-	
+
 	this.meshMatrix = mesh.matrixWorld;
-	
+
 	this.frustumCulled = false;
-	
 	this.matrixAutoUpdate = false;

 };
@@ -32,11 +29,12 @@ THREE.ShadowMesh.prototype.constructor = THREE.ShadowMesh;

 THREE.ShadowMesh.prototype.update = function () {

-	// based on https://www.opengl.org/archives/resources/features/StencilTalk/tsld021.htm
 	var shadowMatrix = new THREE.Matrix4();

 	return function ( plane, lightPosition4D ) {
-		
+
+		// based on https://www.opengl.org/archives/resources/features/StencilTalk/tsld021.htm
+
 		var dot = plane.normal.x * lightPosition4D.x +
 			  plane.normal.y * lightPosition4D.y +
 			  plane.normal.z * lightPosition4D.z +
@@ -63,7 +61,7 @@ THREE.ShadowMesh.prototype.update = function () {
 		sme[ 7 ]  = - lightPosition4D.w * plane.normal.y;
 		sme[ 11 ] = - lightPosition4D.w * plane.normal.z;
 		sme[ 15 ] = dot - lightPosition4D.w * -plane.constant;
-		
+
 		this.matrix.multiplyMatrices( shadowMatrix, this.meshMatrix );

 	};

--- a/examples/webgl_shadowmesh.html
+++ b/examples/webgl_shadowmesh.html
 <!DOCTYPE html>
 <html lang="en">
-
 	<head>
 		<title> three.js webgl - ShadowMesh </title>
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 		<meta charset="utf-8">
-	
 		<style>
-
 			body {
 				background-color: rgb(0, 0, 0);
 				margin: 0;
 				padding: 0;
 				overflow: hidden;
 			}
-		
+
+			#lightButton {
+				position: absolute;
+				right: 20px;
+				top: 20px;
+			}
 		</style>
 	</head>
-
 	<body>

 		<div id="container"></div>
-
-		<input id="lightButton" style="position:fixed; right:2%; top:4%; font-size:12px;" type="button" value="Switch to PointLight" onclick="lightButtonHandler()">
-
-		<div id="info" style="position:fixed; left:2%; bottom:7%; font-family:arial; font-type:bold; color:rgb(255,255,255);">
-			three.js webgl - ShadowMesh
-		</div>
-
+		<input id="lightButton" type="button" value="Switch to PointLight" onclick="lightButtonHandler()">

 		<script src="../build/three.min.js"></script>
-		
+		<script src="js/objects/ShadowMesh.js"></script>
 		<script>

-			//global variables and objects
-
 			var SCREEN_WIDTH = window.innerWidth;
 			var SCREEN_HEIGHT = window.innerHeight;

@@ -67,14 +60,11 @@
 			var frameTime = 0;
 			var TWO_PI = Math.PI * 2;

-
 			init();
-
 			animate();

-
 			function init() {
-				
+
 				renderer.setClearColor( 'rgb(0,150,255)' );
 				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 				document.getElementById( "container" ).appendChild( renderer.domElement );
@@ -87,7 +77,7 @@
 				sunLight.position.set( 5, 7, - 1 );
 				sunLight.lookAt( scene.position );
 				scene.add( sunLight );
-				
+
 				lightPosition4D.x = sunLight.position.x;
 				lightPosition4D.y = sunLight.position.y;
 				lightPosition4D.z = sunLight.position.z;
@@ -109,7 +99,7 @@
 				arrowPosition3.copy( sunLight.position ).add( new THREE.Vector3( 0, - 0.2, 0 ) );
 				arrowHelper3 = new THREE.ArrowHelper( arrowDirection, arrowPosition3, 0.9, 0xffff00, 0.25, 0.08 );
 				scene.add( arrowHelper3 );
-				
+
 				// LIGHTBULB
 				var lightSphereGeometry = new THREE.SphereGeometry( 0.09 );
 				var lightSphereMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(255,255,255)' } );
@@ -122,7 +112,7 @@
 				lightHolder = new THREE.Mesh( lightHolderGeometry, lightHolderMaterial );
 				scene.add( lightHolder );
 				lightHolder.visible = false;
-				
+
 				// GROUND
 				var groundGeometry = new THREE.BoxGeometry( 30, 0.01, 40 );
 				var groundMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(0,130,0)' } );
@@ -159,7 +149,7 @@

 				torusShadow = new THREE.ShadowMesh( torus );
 				scene.add( torusShadow );
-				
+
 				// WHITE SPHERE and SPHERE'S SHADOW
 				var sphereGeometry = new THREE.SphereGeometry( 0.5, 20, 10 );
 				var sphereMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,255)', emissive: 0x222222 } );
@@ -169,7 +159,7 @@

 				sphereShadow = new THREE.ShadowMesh( sphere );
 				scene.add( sphereShadow );
-				
+
 				// YELLOW PYRAMID and PYRAMID'S SHADOW
 				var pyramidGeometry = new THREE.CylinderGeometry( 0, 0.5, 2, 4 );
 				var pyramidMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, shading: THREE.FlatShading } );
@@ -180,13 +170,12 @@
 				pyramidShadow = new THREE.ShadowMesh( pyramid );
 				scene.add( pyramidShadow );

-			} //end function init()
-
+			}

 			function animate() {

 				requestAnimationFrame( animate );
-				
+
 				frameTime = clock.getDelta();

 				cube.rotation.x += 1.0 * frameTime;
@@ -197,7 +186,7 @@

 				torus.rotation.x -= 1.0 * frameTime;
 				torus.rotation.y -= 1.0 * frameTime;
-				
+
 				pyramid.rotation.y += 0.5 * frameTime;

 				horizontalAngle += 0.5 * frameTime;
@@ -220,13 +209,12 @@
 				torusShadow.update( groundPlane, lightPosition4D );
 				sphereShadow.update( groundPlane, lightPosition4D );
 				pyramidShadow.update( groundPlane, lightPosition4D );
-				
-				
+
+
 				renderer.render( scene, camera );
-				

-			} //end function animate()

+			}

 			function onWindowResize() {

@@ -238,18 +226,14 @@
 				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
 				camera.updateProjectionMatrix();

-				document.getElementById( 'lightButton' ).style.fontSize = SCREEN_WIDTH * 0.02 + "px";
-				document.getElementById( 'info' ).style.fontSize = SCREEN_WIDTH * 0.02 + "px";
-				
 			}

-
 			function lightButtonHandler() {

 				useDirectionalLight = !useDirectionalLight;

 				if ( useDirectionalLight ) {
-					
+
 					renderer.setClearColor( 'rgb(0,150,255)' );
 					groundMesh.material.color.set( 'rgb(0,130,0)' );
 					sunLight.position.set( 5, 7, - 1 );
@@ -269,12 +253,11 @@

 					document.getElementById( 'lightButton' ).value = "Switch to PointLight" ;

-				}
-				else {
+				} else {

 					renderer.setClearColor( 'rgb(0,0,0)' );
 					groundMesh.material.color.set( 'rgb(150,150,150)' );
-					
+
 					sunLight.position.set( 0, 6, - 2 );
 					sunLight.lookAt( scene.position );
 					lightSphere.position.copy( sunLight.position );
@@ -297,11 +280,8 @@

 				}

-			} // end function lightButtonHandler()
-
+			}

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