DirectionalLightHelper 和 CameraHelper 之间的问题是否会导致场景阴影出现问题？答案

【问题标题】：Is problem between DirectionalLightHelper and CameraHelper causing issue with scene shadows?DirectionalLightHelper 和 CameraHelper 之间的问题是否会导致场景阴影出现问题？
【发布时间】：2021-01-07 00:20:25
【问题描述】：

我正在使用 three.js 在浏览器中构建一个相当复杂的静态渲染，并且在尝试使用代表场景中太阳的单个 THREE.DirectionalLight 生成正确阴影的过程中早期陷入困境.所有几何体（包含在另一个 .js 文件中）都启用了阴影。绿色球体用于调试目的，它被平移 (50,0,50) 到平面的中心，以表示相机的目标和 DirectionalLight.target 的位置。方向灯位置和主摄像头位置设置正确。

我关于为什么阴影不起作用的理论是因为代表阴影相机的正交相机指向错误的方向。昨天我未能弄清楚并解决定向光助手（指向原点的白线）和阴影相机助手（右）的行为。

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

有人对如何在我的场景中修复DirectionalLight.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 日更新

我最初尝试设置相机，还发现人们直接设置新的正交阴影相机的示例。由于我有动力克服这个问题，并且为了彻底，我更新了我的代码以反映该建议，不幸的是问题仍然存在。我重新检查了所有网格几何体都设置为object.receiveShadow = true 和object.castShadow = true 与MeshPhongMaterial。为什么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);

【问题讨论】：

标签： javascript three.js

【解决方案1】：

directionalLight.shadow.camera = new THREE.OrthographicCamera( -view_n，视图_n，视图_n， -view_n， 60, 150 );

请不要覆盖LightShadow.camera 的相机参考。像这样配置定向光：

dirLight.castShadow = true;
dirLight.shadow.camera.top = view_n;
dirLight.shadow.camera.bottom = - view_n;
dirLight.shadow.camera.left = - view_n;
dirLight.shadow.camera.right = view_n;
dirLight.shadow.camera.near = 60;
dirLight.shadow.camera.far = 150;

除了阴影投射之外，仅当所有阴影投射对象（如您的盒子）都将 castShadow 设置为 true 时才有效。所有阴影接收对象（例如您的地板）必须将receiveShadow 设置为true。

【讨论】：

【解决方案2】：

也许因为我在没有动画循环的情况下静态渲染这个问题，但通过将updateMatrixWorld 插入定向光目标解决了这个问题。（不幸的是，我无法更新阴影的 camerahelper，但至少阴影现在按预期工作。）

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

【讨论】：