THREE.js 阴影仅使用 OrbitControls 可见答案

【问题标题】：THREE.js shadow only visible using OrbitControlsTHREE.js 阴影仅使用 OrbitControls 可见
【发布时间】：2016-01-20 13:30:15
【问题描述】：

我今天开始使用 THREE.js，并设法渲染了一个带有宇宙飞船和一些盒子的场景。宇宙飞船应该在盒子上投下阴影，但阴影只在我使用 OrbitControls 时显示。如果我使用自己的相机，一切都会渲染得很好，但阴影就不行。如何设置我的 PerspectiveCamera 以显示阴影？

使用 OrbitControl：

不使用 OrbitControls：

我是初学者，无法让我的 jsfiddle 代码工作，但代码是 here

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.copy(ship.position);
spotLight.position.z += 5;
spotLight.shadowDarkness = 0.7;
spotLight.target = ship;
spotLight.castShadow = true;

spotLight.shadowMapWidth = 1024;
spotLight.shadowMapHeight = 1024;
spotLight.shadowCameraNear = 1;
spotLight.shadowCameraFar = 20;
spotLight.intensity = 0.2;
spotLight.shadowCameraFov = 30;
spotLight.shadowCameraNear = true;


scene.add(spotLight);


if (useOrbitControls) {


  controls = new THREE.OrbitControls(camera);
  controls.center.clone(ship.position);
  controls.addEventListener('change', render);
}

【问题讨论】：

根据您的世界大小，shadowCameraFar 参数值可能太低。

标签： three.js

【解决方案1】：

我终于解决了。由于 OBJLoader 的异步特性，第一次调用 animate() 是在 3D 模型完全加载之前进行的。通过将第一个 animate() 调用移动到 OBJLoader 回调中，一切都突然按预期工作了。

【讨论】：