I can not adjust the shadow. What's wrong?

window.onload = function(){ var width = window.innerWidth; var height = window.innerHeight; var canvas = document.getElementById('canvas'); canvas.setAttribute('width', width); canvas.setAttribute('height', height); var renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas}); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 5000); camera.position.set(0, 0, 1000); var light = new THREE.DirectionalLight(0xffffff,1); light.position.set(50, 500, 22); light.target.position.set(300, 400, 200); light.castShadow = true; scene.add(light); var helper = new THREE.CameraHelper( light.shadow.camera ); scene.add(helper); var geometry = new THREE.SphereGeometry(200, 12, 12); var material = new THREE.MeshLambertMaterial({color: 0xffffff, vertexColors: THREE.FaceColors}); for (var i = 0; i < geometry.faces.length; i++) { geometry.faces[i].color.setRGB(Math.random(),Math.random(),Math.random()); } var mesh = new THREE.Mesh(geometry,material); mesh.receiveShadow = true;    mesh.castShadow = true; scene.add(mesh); //var geometry2 = new THREE.BoxGeometry( 10000, 50, 10000, 1, 1, 1); var geometry2 = new THREE.PlaneGeometry(10000,10000,1,1); var material2 = new THREE.MeshLambertMaterial( {color: 0x00ee00} ); var plane2 = new THREE.Mesh( geometry2, material2 ); plane2.receiveShadow = true; plane2.castShadow = true; plane2.rotation.x = -Math.PI / 2; plane2.position.y = -400; scene.add( plane2 ); function loop(){ renderer.render(scene,camera); requestAnimationFrame(function(){loop();}); } loop(); }

    1 answer 1

    DirectionalLightShadow , here is a description of how to set shadows in the presence of THREE.DirectionalLight() in the scene.

    In your case, you can add settings for the camera shadow when initializing the light source:

     var light = new THREE.DirectionalLight(0xffffff,1); light.position.set(50, 500, 22); light.target.position.set(300, 400, 200); light.shadow.camera.near = 0.5; light.shadow.camera.far = 5000; light.shadow.camera.left = -500; light.shadow.camera.bottom = -500; light.shadow.camera.right = 500; light.shadow.camera.top = 500; light.castShadow = true; scene.add(light); var helper = new THREE.CameraHelper( light.shadow.camera ); scene.add(helper);

    jsfiddle r85 example