javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title> three.js webgl - ShadowMesh </title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<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> - shadow mesh<br />
			<input id="lightButton" type="button" value="Switch to PointLight">
		</div>

		<div id="container"></div>

		<!-- Import maps polyfill -->
		<!-- Remove this when import maps will be widely supported -->
		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

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

		<script type="module">

			import * as THREE from 'three';

			import { ShadowMesh } from 'three/addons/objects/ShadowMesh.js';

			let SCREEN_WIDTH = window.innerWidth;
			let SCREEN_HEIGHT = window.innerHeight;

			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera( 55, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 3000 );
			const clock = new THREE.Clock();
			const renderer = new THREE.WebGLRenderer();

			const sunLight = new THREE.DirectionalLight( 'rgb(255,255,255)', 3 );
			let useDirectionalLight = true;
			let arrowHelper1, arrowHelper2, arrowHelper3;
			const arrowDirection = new THREE.Vector3();
			const arrowPosition1 = new THREE.Vector3();
			const arrowPosition2 = new THREE.Vector3();
			const arrowPosition3 = new THREE.Vector3();
			let groundMesh;
			let lightSphere, lightHolder;
			let pyramid, pyramidShadow;
			let sphere, sphereShadow;
			let cube, cubeShadow;
			let cylinder, cylinderShadow;
			let torus, torusShadow;
			const normalVector = new THREE.Vector3( 0, 1, 0 );
			const planeConstant = 0.01; // this value must be slightly higher than the groundMesh's y position of 0.0
			const groundPlane = new THREE.Plane( normalVector, planeConstant );
			const lightPosition4D = new THREE.Vector4();
			let verticalAngle = 0;
			let horizontalAngle = 0;
			let frameTime = 0;
			const TWO_PI = Math.PI * 2;

			init();
			animate();

			function init() {

				scene.background = new THREE.Color( 0x0096ff );

				renderer.useLegacyLights = false;
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
				document.getElementById( 'container' ).appendChild( renderer.domElement );
				window.addEventListener( 'resize', onWindowResize );

				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
				const lightSphereGeometry = new THREE.SphereGeometry( 0.09 );
				const lightSphereMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(255,255,255)' } );
				lightSphere = new THREE.Mesh( lightSphereGeometry, lightSphereMaterial );
				scene.add( lightSphere );
				lightSphere.visible = false;

				const lightHolderGeometry = new THREE.CylinderGeometry( 0.05, 0.05, 0.13 );
				const lightHolderMaterial = new THREE.MeshBasicMaterial( { color: 'rgb(75,75,75)' } );
				lightHolder = new THREE.Mesh( lightHolderGeometry, lightHolderMaterial );
				scene.add( lightHolder );
				lightHolder.visible = false;

				// GROUND
				const groundGeometry = new THREE.BoxGeometry( 30, 0.01, 40 );
				const 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
				const cubeGeometry = new THREE.BoxGeometry( 1, 1, 1 );
				const 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 ShadowMesh( cube );
				scene.add( cubeShadow );

				// BLUE CYLINDER and CYLINDER's SHADOW
				const cylinderGeometry = new THREE.CylinderGeometry( 0.3, 0.3, 2 );
				const 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 ShadowMesh( cylinder );
				scene.add( cylinderShadow );

				// MAGENTA TORUS and TORUS' SHADOW
				const torusGeometry = new THREE.TorusGeometry( 1, 0.2, 10, 16, TWO_PI );
				const 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 ShadowMesh( torus );
				scene.add( torusShadow );

				// WHITE SPHERE and SPHERE'S SHADOW
				const sphereGeometry = new THREE.SphereGeometry( 0.5, 20, 10 );
				const 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 ShadowMesh( sphere );
				scene.add( sphereShadow );

				// YELLOW PYRAMID and PYRAMID'S SHADOW
				const pyramidGeometry = new THREE.CylinderGeometry( 0, 0.5, 2, 4 );
				const pyramidMaterial = new THREE.MeshPhongMaterial( { color: 'rgb(255,255,0)', emissive: 0x440000, flatShading: true, shininess: 0 } );
				pyramid = new THREE.Mesh( pyramidGeometry, pyramidMaterial );
				pyramid.position.set( - 4, 1, 2 );
				scene.add( pyramid );

				pyramidShadow = new ShadowMesh( pyramid );
				scene.add( pyramidShadow );

				document.getElementById( 'lightButton' ).addEventListener( 'click', lightButtonHandler );

			}

			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 );

			}

			function onWindowResize() {

				SCREEN_WIDTH = window.innerWidth;
				SCREEN_HEIGHT = window.innerHeight;

				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

				camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
				camera.updateProjectionMatrix();

			}

			function lightButtonHandler() {

				useDirectionalLight = ! useDirectionalLight;

				if ( useDirectionalLight ) {

					scene.background.setHex( 0x0096ff );

					groundMesh.material.color.setHex( 0x008200 );
					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 {

					scene.background.setHex( 0x000000 );

					groundMesh.material.color.setHex( 0x969696 );

					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 THREE.DirectionalLight';

				}

			}

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