incomplete shadow with THREE.js

Question

I am a beginner with javascript and THREE.js and I need help.

You can see below what I obtained

and this is the code:

 // on initialise le moteur de rendu renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.getElementById('container').appendChild(renderer.domElement); // on initialise la scène scene = new THREE.Scene(); // on initialise la camera que l'on place ensuite sur la scène camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 100000 ); camera.position.set(0, 0, 1000); scene.add(camera); // plane me = new THREE.Mesh(new THREE.PlaneGeometry(900,550), new THREE.MeshPhongMaterial({color: 0xffffff})); scene.add( me ); me.position.x = 130; me.position.y = 10; me.rotation.y = -20; // on créé un cube au quel on définie un matériau puis on l'ajoute à la scène cube = new THREE.Mesh( new THREE.CubeGeometry( 100, 100, 100 ), new THREE.MeshPhongMaterial({color:0x00ffff}) ); scene.add( cube ); cube.position.y = 0; cube.position.x = 20; cube.position.z = 0; cube.rotation.y = 0; scene.add( new THREE.AmbientLight( 0x212223) ); light = new THREE.SpotLight(0xffffff, 1); light.position.set(-300,-100,20); light.angle = Math.PI/5; light.shadowCameraVisible = true; scene.add(light); renderer.shadowMap.enabled = true; renderer.shadowMapDarkness = 1; light.castShadow = true; light.intensity = 0.8; cube.castShadow = true; cube.receiveShadow = true; me.receiveShadow = true; lightHelper = new THREE.SpotLightHelper( light ); scene.add(lightHelper); renderer.render( scene, camera ); 

the rest of my code change the x and y value of the light or of the cube and the shadow of the cube is not always complete and I don't understand why... Like I am am beginner I think I have do a mistake in my code.

Answer 1

yes its work when I put the position.x = 300 but it's don't work with all the x values and I don't understand why ( the rest of my animation modify the x value)

Shadow mapping (usually) work like this:

You create a new orthographic or perspective camera (depending on if you use a directional or a point light), render the scene's z-buffer onto a texture, then when you render objects, you check if the point on the z-buffer, which corresponds to the current fragment has a higher z value, than the current fragment, and if it does, then it's in the shadow. if it has the exact same value (+- some amount because of the precision of the depth buffer), then it's in the light.

Because you need a camera to render the stuff on the screen, it has a minimal distance it can render something.

Tl;dr the clipping distance is your bane this time.