fix moving light with moving target

Author: mbredif

examples/webgl_shadowmap_viewer.html

@@ -74,14 +74,13 @@
 				spotLight.name = 'Spot Light';
 				spotLight.angle = Math.PI / 5;
 				spotLight.penumbra = 0.3;
-				spotLight.position.set( 10, 10, 5 );
+				spotLight.position.set( 2, 2, 2 );
 				spotLight.lookAt( 0, 0, 0 );
 				spotLight.castShadow = true;
-				spotLight.shadow.camera.near = 8;
-				spotLight.shadow.camera.far = 30;
+				spotLight.shadow.camera.near = 0.5;
+				spotLight.shadow.camera.far = 40;
 				spotLight.shadow.mapSize.width = 1024;
 				spotLight.shadow.mapSize.height = 1024;
-				scene.add( spotLight );
 
 				scene.add( new THREE.CameraHelper( spotLight.shadow.camera ) );
 
@@ -117,13 +116,25 @@
 				torusKnot.receiveShadow = true;
 				scene.add( torusKnot );
 
+
 				var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
 				cube = new THREE.Mesh( geometry, material );
 				cube.position.set( 8, 3, 8 );
 				cube.castShadow = true;
 				cube.receiveShadow = true;
 				scene.add( cube );
 
+				var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
+				target = new THREE.Mesh( geometry, material );
+				target.scale.multiplyScalar( 18 );
+				target.position.set( 30, 30, 30 );
+				target.castShadow = true;
+				target.receiveShadow = true;
+				torusKnot.add( target );
+
+				spotLight.target = target;
+				cube.add( spotLight );
+
 				var geometry = new THREE.BoxBufferGeometry( 10, 0.15, 10 );
 				var material = new THREE.MeshPhongMaterial( {
 					color: 0xa0adaf,
@@ -217,8 +228,8 @@
 				renderShadowMapViewers();
 
 				torusKnot.rotation.x += 0.25 * delta;
-				torusKnot.rotation.y += 2 * delta;
-				torusKnot.rotation.z += 1 * delta;
+				torusKnot.rotation.y += 1 * delta;
+				torusKnot.rotation.z += 2 * delta;
 
 				cube.rotation.x += 0.25 * delta;
 				cube.rotation.y += 2 * delta;

src/renderers/webgl/WebGLShadowMap.js

@@ -12,6 +12,7 @@ import { Vector3 } from '../../math/Vector3.js';
 import { Vector2 } from '../../math/Vector2.js';
 import { Matrix4 } from '../../math/Matrix4.js';
 import { Frustum } from '../../math/Frustum.js';
+import { Object3D } from '../../core/Object3D.js';
 
 function WebGLShadowMap( _renderer, _objects, maxTextureSize ) {
 
@@ -31,7 +32,9 @@ function WebGLShadowMap( _renderer, _objects, maxTextureSize ) {
 		_depthMaterials = new Array( _NumberOfMaterialVariants ),
 		_distanceMaterials = new Array( _NumberOfMaterialVariants ),
 
-		_materialCache = {};
+		_materialCache = {},
+
+		_lightWorld = new Object3D();
 
 	var shadowSide = { 0: BackSide, 1: FrontSide, 2: DoubleSide };
 
@@ -203,14 +206,26 @@ function WebGLShadowMap( _renderer, _objects, maxTextureSize ) {
 
 				faceCount = 1;
 
-				if ( light.target ) {
+				if ( shadowCamera.matrixAutoUpdate ) {
 
-					_lookTarget.setFromMatrixPosition( light.target.matrixWorld );
-					light.lookAt( _lookTarget );
+					if ( light.target ) {
 
-				}
+						_lookTarget.setFromMatrixPosition( light.target.matrixWorld );
+						if ( light.parent ) {
 
-				if ( shadowCamera.matrixAutoUpdate ) {
+							_lightWorld.position.setFromMatrixPosition( light.matrixWorld );
+							_lightWorld.lookAt( _lookTarget );
+							light.quaternion.copy( light.parent.quaternion ).inverse();
+							light.quaternion.multiply( _lightWorld.quaternion );
+							light.updateMatrixWorld();
+
+						} else {
+
+							light.lookAt( _lookTarget );
+
+						}
+
+					}
 
 					shadowCamera.matrixWorld.copy( light.matrixWorld );
 					shadowCamera.matrixWorld.scale( cameraConvention );