Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge pull request #6071 from erichlof/dev

new THREE.ShadowMesh
Mr.doob 10 years ago
parent
b326bdf64b e9732f5744
commit
6c4a787745
2 changed files with 378 additions and 0 deletions
Unified View Show Diff Stats
  1. 307 0
      examples/webgl_shadowmesh.html
  2. 71 0
      src/objects/ShadowMesh.js

+ 307 - 0
examples/webgl_shadowmesh.html
View File 

@@ -0,0 +1,307 @@
 
+<!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;
 
+			}
 
+		
+		</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>
 
+
 
+
 
+		<script src="../build/three.min.js"></script>
 
+		
+		<script>
 
+
 
+			//global variables and objects
 
+
 
+			var SCREEN_WIDTH = window.innerWidth;
 
+			var SCREEN_HEIGHT = window.innerHeight;
 
+
 
+			var scene = new THREE.Scene();
 
+			var camera = new THREE.PerspectiveCamera( 55, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
 
+			var clock = new THREE.Clock();
 
+			var renderer = new THREE.WebGLRenderer();
 
+
 
+			var sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 1 );
 
+			var useDirectionalLight = true;
 
+			var arrowHelper1, arrowHelper2, arrowHelper3;
 
+			var arrowDirection = new THREE.Vector3();
 
+			var arrowPosition1 = new THREE.Vector3();
 
+			var arrowPosition2 = new THREE.Vector3();
 
+			var arrowPosition3 = new THREE.Vector3();
 
+			var groundMesh;
 
+			var lightSphere, lightHolder;
 
+			var pyramid, pyramidShadow;
 
+			var sphere, sphereShadow;
 
+			var box, boxShadow;
 
+			var cube, cubeShadow;
 
+			var cylinder, cylinderShadow;
 
+			var torus, torusShadow;
 
+			var normalVector = new THREE.Vector3( 0, 1, 0 );
 
+			var planeConstant = 0.01; // this value must be slightly higher than the groundMesh's y position of 0.0
 
+			var groundPlane = new THREE.Plane( normalVector, planeConstant );
 
+			var lightPosition4D = new THREE.Vector4();
 
+			var verticalAngle = 0;
 
+			var horizontalAngle = 0;
 
+			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 );
 
+				window.addEventListener( 'resize' , onWindowResize, false );
 
+
 
+				camera.position.set( 0, 2.5, 10 );
 
+				scene.add( camera );
 
+				onWindowResize();
 
+
 
+				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;
 
+				// amount of light-ray divergence. Ranging from:
 
+				// 0.001 = sunlight(min divergence) to 1.0 = pointlight(max divergence)
 
+				lightPosition4D.w = 0.001; // must be slightly greater than 0, due to 0 causing matrixInverse errors
 
+
 
+				// YELLOW ARROW HELPERS
 
+				arrowDirection.subVectors( scene.position, sunLight.position ).normalize();
 
+
 
+				arrowPosition1.copy( sunLight.position );
 
+				arrowHelper1 = new THREE.ArrowHelper( arrowDirection, arrowPosition1, 0.9, 0xffff00, 0.25, 0.08 );
 
+				scene.add( arrowHelper1 );
 
+
 
+				arrowPosition2.copy( sunLight.position ).add( new THREE.Vector3( 0, 0.2, 0 ) );
 
+				arrowHelper2 = new THREE.ArrowHelper( arrowDirection, arrowPosition2, 0.9, 0xffff00, 0.25, 0.08 );
 
+				scene.add( arrowHelper2 );
 
+
 
+				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)' } );
 
+				lightSphere = new THREE.Mesh( lightSphereGeometry, lightSphereMaterial );
 
+				scene.add( lightSphere );
 
+				lightSphere.visible = false;
 
+
 
+				var lightHolderGeometry = new THREE.CylinderGeometry( 0.05, 0.05, 0.13 );
 
+				var lightHolderMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(75,75,75)' } );
 
+				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)' } );
 
+				groundMesh = new THREE.Mesh( groundGeometry, groundMaterial );
 
+				groundMesh.position.y = 0.0; //this value must be slightly lower than the planeConstant (0.01) parameter above
 
+				scene.add( groundMesh );
 
+
 
+				// RED CUBE and CUBE's SHADOW
 
+				var cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
 
+				var cubeMaterial = new THREE.MeshLambertMaterial( { color: 'rgb(255,0,0)', emissive: 0x200000 } );
 
+				cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
 
+				cube.position.z = - 1;
 
+				scene.add( cube );
 
+
 
+				cubeShadow = new THREE.ShadowMesh( cube );
 
+				scene.add( cubeShadow );
 
+
 
+				// BLUE CYLINDER and CYLINDER's SHADOW
 
+				var cylinderGeometry = new THREE.CylinderGeometry( 0.3, 0.3, 2 );
 
+				var cylinderMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(0,0,255)', emissive: 0x000020 } );
 
+				cylinder = new THREE.Mesh( cylinderGeometry, cylinderMaterial );
 
+				cylinder.position.z = - 2.5;
 
+				scene.add( cylinder );
 
+
 
+				cylinderShadow = new THREE.ShadowMesh( cylinder );
 
+				scene.add( cylinderShadow );
 
+
 
+				// MAGENTA TORUS and TORUS' SHADOW
 
+				var torusGeometry = new THREE.TorusGeometry( 1, 0.2, 10, 16, TWO_PI );
 
+				var torusMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,0,255)', emissive: 0x200020 } );
 
+				torus = new THREE.Mesh( torusGeometry, torusMaterial );
 
+				torus.position.z = - 6;
 
+				scene.add( torus );
 
+
 
+				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 } );
 
+				sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
 
+				sphere.position.set( 4, 0.5, 2 );
 
+				scene.add( sphere );
 
+
 
+				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 } );
 
+				pyramid = new THREE.Mesh( pyramidGeometry, pyramidMaterial );
 
+				pyramid.position.set( - 4, 1, 2 );
 
+				scene.add( pyramid );
 
+
 
+				pyramidShadow = new THREE.ShadowMesh( pyramid );
 
+				scene.add( pyramidShadow );
 
+
 
+			} //end function init()
 
+
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+				
+				frameTime = clock.getDelta();
 
+
 
+				cube.rotation.x += 1.0 * frameTime;
 
+				cube.rotation.y += 1.0 * frameTime;
 
+
 
+				cylinder.rotation.y += 1.0 * frameTime;
 
+				cylinder.rotation.z -= 1.0 * frameTime;
 
+
 
+				torus.rotation.x -= 1.0 * frameTime;
 
+				torus.rotation.y -= 1.0 * frameTime;
 
+				
+				pyramid.rotation.y += 0.5 * frameTime;
 
+
 
+				horizontalAngle += 0.5 * frameTime;
 
+				if ( horizontalAngle > TWO_PI )
 
+					horizontalAngle -= TWO_PI;
 
+				cube.position.x = Math.sin( horizontalAngle ) * 4;
 
+				cylinder.position.x = Math.sin( horizontalAngle ) * - 4;
 
+				torus.position.x = Math.cos( horizontalAngle ) * 4;
 
+
 
+				verticalAngle += 1.5 * frameTime;
 
+				if ( verticalAngle > TWO_PI )
 
+					verticalAngle -= TWO_PI;
 
+				cube.position.y = Math.sin( verticalAngle ) * 2 + 2.9;
 
+				cylinder.position.y = Math.sin( verticalAngle ) * 2 + 3.1;
 
+				torus.position.y = Math.cos( verticalAngle ) * 2 + 3.3;
 
+
 
+				// update the ShadowMeshes to follow their shadow-casting objects
 
+				cubeShadow.update( groundPlane, lightPosition4D );
 
+				cylinderShadow.update( groundPlane, lightPosition4D );
 
+				torusShadow.update( groundPlane, lightPosition4D );
 
+				sphereShadow.update( groundPlane, lightPosition4D );
 
+				pyramidShadow.update( groundPlane, lightPosition4D );
 
+				
+				
+				renderer.render( scene, camera );
 
+				
+
 
+			} //end function animate()
 
+
 
+
 
+			function onWindowResize() {
 
+
 
+				SCREEN_WIDTH = window.innerWidth;
 
+				SCREEN_HEIGHT = window.innerHeight;
 
+
 
+				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
 
+
 
+				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 );
 
+					sunLight.lookAt( scene.position );
 
+
 
+					lightPosition4D.x = sunLight.position.x;
 
+					lightPosition4D.y = sunLight.position.y;
 
+					lightPosition4D.z = sunLight.position.z;
 
+					lightPosition4D.w = 0.001; // more of a directional Light value
 
+
 
+					arrowHelper1.visible = true;
 
+					arrowHelper2.visible = true;
 
+					arrowHelper3.visible = true;
 
+
 
+					lightSphere.visible = false;
 
+					lightHolder.visible = false;
 
+
 
+					document.getElementById( 'lightButton' ).value = "Switch to PointLight" ;
 
+
 
+				}
 
+				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 );
 
+					lightHolder.position.copy( lightSphere.position );
 
+					lightHolder.position.y += 0.12;
 
+
 
+					lightPosition4D.x = sunLight.position.x;
 
+					lightPosition4D.y = sunLight.position.y;
 
+					lightPosition4D.z = sunLight.position.z;
 
+					lightPosition4D.w = 0.9; // more of a point Light value
 
+
 
+					arrowHelper1.visible = false;
 
+					arrowHelper2.visible = false;
 
+					arrowHelper3.visible = false;
 
+
 
+					lightSphere.visible = true;
 
+					lightHolder.visible = true;
 
+
 
+					document.getElementById( 'lightButton' ).value = "Switch to DirectionalLight" ;
 
+
 
+				}
 
+
 
+			} // end function lightButtonHandler()
 
+
 
+
 
+		</script>
 
+
 
+	</body>
 
+
 
+</html>

+ 71 - 0
src/objects/ShadowMesh.js
View File 

@@ -0,0 +1,71 @@
 
+// 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.
 
+
 
+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;
 
+
 
+};
 
+
 
+THREE.ShadowMesh.prototype = Object.create( THREE.Mesh.prototype );
 
+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 ) {
 
+		
+		var dot = plane.normal.x * lightPosition4D.x +
 
+			  plane.normal.y * lightPosition4D.y +
 
+			  plane.normal.z * lightPosition4D.z +
 
+			  -plane.constant * lightPosition4D.w;
 
+
 
+		var sme = shadowMatrix.elements;
 
+
 
+		sme[ 0 ]  = dot - lightPosition4D.x * plane.normal.x;
 
+		sme[ 4 ]  = - lightPosition4D.x * plane.normal.y;
 
+		sme[ 8 ]  = - lightPosition4D.x * plane.normal.z;
 
+		sme[ 12 ] = - lightPosition4D.x * -plane.constant;
 
+
 
+		sme[ 1 ]  = - lightPosition4D.y * plane.normal.x;
 
+		sme[ 5 ]  = dot - lightPosition4D.y * plane.normal.y;
 
+		sme[ 9 ]  = - lightPosition4D.y * plane.normal.z;
 
+		sme[ 13 ] = - lightPosition4D.y * -plane.constant;
 
+
 
+		sme[ 2 ]  = - lightPosition4D.z * plane.normal.x;
 
+		sme[ 6 ]  = - lightPosition4D.z * plane.normal.y;
 
+		sme[ 10 ] = dot - lightPosition4D.z * plane.normal.z;
 
+		sme[ 14 ] = - lightPosition4D.z * -plane.constant;
 
+
 
+		sme[ 3 ]  = - lightPosition4D.w * plane.normal.x;
 
+		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 );
 
+
 
+	};
 
+
 
+}();