THREE.js陰影只能使用OrbitControls顯示

Question

我今天開始使用THREE.js並設法渲染一個帶有太空船和一些框的場景。太空船應該在箱子上投下陰影，但陰影僅在我使用OrbitControls時顯示。如果我用我自己的相機，一切都很好，但不是影子。我如何設置我的PerspectiveCamera以顯示陰影？

使用OrbitControls：

不使用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); 
 
}

Answer 1

我終於解決了。由於OBJLoader的異步特性，第一次調用animate（）是在3D模型完全加載之前完成的。通過將第一個animate（）調用移到OBJLoader回調中，所有事情突然按預期工作。