Added changes done in three.js repository

torchesburn · Aug 23, 2020 · a6313ee · a6313ee
1 parent c5c7244
commit a6313ee
Show file tree

Hide file tree

Showing 11 changed files with 1,929 additions and 961 deletions.
diff --git a/build/three-csm.js b/build/three-csm.js
diff --git a/build/three-csm.module.js b/build/three-csm.module.js
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -18,21 +18,57 @@
 	</head>
 
 	<body>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.js"></script>
 		<script src="OrbitControls.js"></script>
 		<script src="dat.gui.min.js"></script>
 		<script src="../../build/three-csm.js"></script>
 
 		<script>
-			var renderer, scene, camera, controls, csm;
+			var renderer, scene, camera, orthoCamera, controls, csm, csmHelper;
+
+			var params = {
+				orthographic: false,
+				fade: true,
+				far: 1000,
+				mode: 'practical',
+				lightX: - 1,
+				lightY: - 1,
+				lightZ: - 1,
+				margin: 100,
+				lightFar: 5000,
+				lightNear: 1,
+				autoUpdateHelper: true,
+				updateHelper: function () {
+
+					csmHelper.update();
+
+				}
+			};
 
 			init();
 			animate();
 
+			function updateOrthoCamera() {
+
+				var size = controls.target.distanceTo( camera.position );
+				var aspect = camera.aspect;
+
+				orthoCamera.left = size * aspect / - 2;
+				orthoCamera.right = size * aspect / 2;
+
+				orthoCamera.top = size / 2;
+				orthoCamera.bottom = size / - 2;
+				orthoCamera.position.copy( camera.position );
+				orthoCamera.rotation.copy( camera.rotation );
+				orthoCamera.updateProjectionMatrix();
+
+			}
+
 			function init() {
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( '#454e61' );
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 5000 );
+				orthoCamera = new THREE.OrthographicCamera();
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -49,28 +85,8 @@
 				var ambientLight = new THREE.AmbientLight( 0xffffff, 0.5 );
 				scene.add( ambientLight );
 
-				var params = {
-					far: 1000,
-					mode: 'practical',
-					lightX: - 1,
-					lightY: - 1,
-					lightZ: - 1,
-					margin: 100,
-					lightFar: 5000,
-					lightNear: 1,
-					helper: function () {
-
-						var helper = csm.helper( camera.matrix );
-						scene.add( helper );
-
-					}
-				};
-
 				csm = new THREE.CSM({
-					fov: camera.fov,
-					near: camera.near,
-					far: params.far,
-					aspect: camera.aspect,
+					maxFar: params.far,
 					cascades: 4,
 					mode: params.mode,
 					parent: scene,
@@ -79,10 +95,16 @@
 					camera: camera
 				} );
 
+				csm.fade = true;
+
+				csmHelper = new THREE.CSM.Helper(csm);
+				csmHelper.visible = false;
+				scene.add( csmHelper );
+
 				var floorMaterial = new THREE.MeshPhongMaterial( { color: '#252a34' } );
 				csm.setupMaterial( floorMaterial );
 
-				var floor = new THREE.Mesh( new THREE.PlaneBufferGeometry( 10000, 10000 ), floorMaterial );
+				var floor = new THREE.Mesh( new THREE.PlaneBufferGeometry( 10000, 10000, 8, 8 ), floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.castShadow = true;
 				floor.receiveShadow = true;
@@ -116,9 +138,23 @@
 
 				var gui = new dat.gui.GUI();
 
+				gui.add( params, 'orthographic' ).onChange( function ( value ) {
+
+					csm.camera = value ? orthoCamera : camera;
+					csm.updateFrustums();
+
+				} );
+
+				gui.add( params, 'fade' ).onChange( function ( value ) {
+
+					csm.fade = value;
+					csm.updateFrustums();
+
+				} );
+
 				gui.add( params, 'far', 1, 5000 ).step( 1 ).name( 'shadow far' ).onChange( function ( value ) {
 
-					csm.far = value;
+					csm.maxFar = value;
 					csm.updateFrustums();
 
 				} );
@@ -176,14 +212,41 @@
 
 				} );
 
-				gui.add( params, 'helper' ).name( 'add frustum helper' );
+				const helperFolder = gui.addFolder( 'helper' );
+
+				helperFolder.add( csmHelper, 'visible' );
+
+				helperFolder.add( csmHelper, 'displayFrustum' ).onChange( function () {
+
+					csmHelper.updateVisibility();
+
+				} );
+
+				helperFolder.add( csmHelper, 'displayPlanes' ).onChange( function () {
+
+					csmHelper.updateVisibility();
+
+				} );
+
+				helperFolder.add( csmHelper, 'displayShadowBounds' ).onChange( function () {
+
+					csmHelper.updateVisibility();
+
+				} );
+
+				helperFolder.add( params, 'autoUpdateHelper' ).name( 'auto update' );
+
+				helperFolder.add( params, 'updateHelper' ).name( 'update' );
+
+				helperFolder.open();
 
 				window.addEventListener( 'resize', function () {
 
 					camera.aspect = window.innerWidth / window.innerHeight;
 					camera.updateProjectionMatrix();
 
-					csm.setAspect( camera.aspect );
+					updateOrthoCamera();
+					csm.updateFrustums();
 
 					renderer.setSize( window.innerWidth, window.innerHeight );
 
@@ -194,12 +257,33 @@
 
 				requestAnimationFrame( animate );
 
-				csm.update( camera.matrix );
+				camera.updateMatrixWorld();
+				csm.update();
 				controls.update();
 
-				renderer.render( scene, camera );
+				if ( params.orthographic ) {
+
+					updateOrthoCamera();
+					csm.updateFrustums();
+					if ( params.autoUpdateHelper ) {
+
+						csmHelper.update();
+
+					}
+					renderer.render( scene, orthoCamera );
+
+				} else {
+
+					if ( params.autoUpdateHelper ) {
+
+						csmHelper.update();
+
+					}
+					renderer.render( scene, camera );
+
+				}
 
 			}
 		</script>
 	</body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "three-csm",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "Cascaded shadow mapping (CSM) implementation for three.js",
 	"main": "build/three-csm.js",
 	"module": "build/three-csm.module.js",