Javascript DirectionalLightHelper和CameraHelper之间的问题是否导致场景阴影问题？

我正在使用three.js在浏览器中构建一个相当复杂的静态渲染，在尝试使用单个

three.DirectionalLight

表示场景中的太阳时，我在早期就遇到了问题。所有几何体（包含在另一个.js文件中）都启用了阴影。绿色球体用于调试目的，并平移（50,0,50）到平面中心，以表示摄影机的目标和DirectionalLight.target的位置。平行光位置和主摄像机位置设置正确

我关于阴影不起作用的理论是因为代表阴影摄影机的正交摄影机指向错误的方向。昨天我没有弄清楚并解决平行光辅助对象（原点的白线）和阴影摄影机辅助对象（右侧）的行为

我假设方向正确，目标方向是平行光辅助对象和阴影摄影机辅助对象与平面中心对齐。经过昨天这么多的研究，我的阴影相机似乎没有自动拾取灯光位置/灯光目标向量。为什么它们仍然锚定在原点

有人对如何修复我场景中的

方向灯.target

有什么建议吗？为什么

DirectionalLightHelper

和

CameraHelper

不一致

// Set up
const canvus = document.getElementById('canvus');
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

//Camera
const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(200, 100, 100);
camera.lookAt(50, 0, 50);

// Lighting
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(100, 200, 200);
directionalLight.target.position.set(50, 0, 50);
directionalLight.castShadow = true;
directionalLight.shadow.bias = 0.0001;
directionalLight.shadow.mapSize.width = 1024; // default
directionalLight.shadow.mapSize.height = 1024; // default

const view_n = 50;
directionalLight.shadow.camera = new THREE.OrthographicCamera(
    -view_n,
    view_n,
    view_n,
    -view_n,
    60,
    150
);

scene.add(directionalLight, directionalLight.target);

//helpers
const lighthelper = new THREE.DirectionalLightHelper(directionalLight, 10);
const camerahelper = new THREE.CameraHelper(directionalLight.shadow.camera);
scene.add(lighthelper);
scene.add(camerahelper);

//Main Render
createBasicGeometry(scene); // from geometry.js
createGroundPlane(scene); // from geometry.js
renderer.render(scene, camera);

更新2020-1-5

我最初尝试设置相机，还发现有人直接设置新的正交阴影相机。由于我有动力克服这个问题，并且为了彻底，我更新了代码以反映建议，不幸的是问题仍然存在。我已使用

MeshPhongMaterial

重新检查所有网格几何体是否同时设置为

object.receiveShadow=true

和

object.castShadow=true

。为什么

directionalLight.target.position.set（50,0,50）

没有按预期更新，这完全是个谜。这种行为的原因是什么

// Updated Lighting
const view_n = 50;
directionalLight.castShadow = true;
directionalLight.shadow.bias = 0.0001;

directionalLight.shadow.camera.right = view_n;
directionalLight.shadow.camera.left = -view_n;
directionalLight.shadow.camera.top = view_n;
directionalLight.shadow.camera.bottom = -view_n;
directionalLight.shadow.camera.near = 60;
directionalLight.shadow.camera.far = 150;

directionalLight.shadow.mapSize.width = 1024; // default
directionalLight.shadow.mapSize.height = 1024; // default

scene.add(directionalLight, directionalLight.target);

当我转储

directionalLight

时，我得到了预期的目标位置，尽管在场景中没有正确对齐。而摄像机的位置则给出了另一个奇怪的结果

console.log(directionalLight.target.position);
//Vector3 {x: 50, y: 0, z: 50, isVector3: true}
console.log(directionalLight.shadow.camera.position);

directionalLight.shadow.camera=新的三点正交摄影机( -视图， 视图， 视图， -视图， 60, 150 );

请不要覆盖LightShadow.camera的相机参考。按如下方式配置平行光：

dirLight.castShadow=true；
dirLight.shadow.camera.top=视图；
dirLight.shadow.camera.bottom=-view\n；
dirLight.shadow.camera.left=-view\n；
dirLight.shadow.camera.right=视图\u n；
dirLight.shadow.camera.near=60；
dirLight.shadow.camera.far=150；

---

此外，阴影投射仅在所有阴影投射对象（如长方体）都设置为

true

时有效。所有阴影接收对象（如您的地板）都必须设置为

true

，可能是因为我正在进行静态渲染，没有动画循环。出现了此问题，但通过将

updateMatrix World

插入平行光目标解决了此问题。（不幸的是，我无法更新shadow的camerahelper，但至少shadows现在可以按预期工作了。）

directionalLight.target.updateMatrixWorld();
scene.add(directionalLight);
scene.add(directionalLight.target);