THREE.JS不會投射陰影

我在做三個js教程，此代碼應該投射陰影，但渲染陰影不存在於平面上時。THREE.JS不會投射陰影

代碼有什麼問題？我正在閱讀文檔和其他代碼，我找不到問題。

此致敬禮！

編輯：

如果我使用requestAnimationFrame循環只是工作......但只有在這種情況下，爲什麼？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Learning THREE JS Basic</title> 
     <script src="../../libs/three.js"></script> 
     <script src="../../libs/jquery.js"></script> 

     <style> 
     body { 
      margin : 0; 
      overflow : hidden; 
     } 
     </style> 
    </head> 

    <body> 
     <div id="visor"></div> 

     <script> 
      $(function() { 
       var scene = new THREE.Scene(); 

       var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 

       var renderer = new THREE.WebGLRenderer(); 
       renderer.setClearColor(0xEEEEEE); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       renderer.shadowMap.enabled = true; 

       var axes = new THREE.AxisHelper(20); 
       scene.add(axes); 

       var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1); 
       var planeMaterial = new THREE.MeshLambertMaterial({ 
        color: 0xFFFFFF 
       }); 

       var plane = new THREE.Mesh(planeGeometry, planeMaterial); 

       plane.rotation.x = -0.5*Math.PI; 

       plane.position.x = 15; 
       plane.position.y = 0; 
       plane.position.z = 0; 

       plane.receiveShadow = true; 

       scene.add(plane); 

       var cubeGeometry = new THREE.BoxGeometry(4,4,4); 
       var cubeMaterial = new THREE.MeshLambertMaterial({ 
        color: 0xFF0000 
       }); 

       var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); 

       cube.position.x = -4; 
       cube.position.y = 3; 
       cube.position.z = 0; 

       cube.castShadow = true; 

       scene.add(cube); 

       var sphereGeometry = new THREE.SphereGeometry(4, 20, 20); 
       var sphereMaterial = new THREE.MeshLambertMaterial({ 
        color: 0x7777FF 
       }); 

       var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); 

       sphere.position.x = 20; 
       sphere.position.y = 4; 
       sphere.position.z = 2; 

       sphere.castShadow = true; 

       scene.add(sphere); 

       var spotLight = new THREE.SpotLight(0xFFFFFF); 
       spotLight.position.set(-40, 60, -10); 
       spotLight.castShadow = true; 

       scene.add(spotLight); 

       camera.position.x = -30; 
       camera.position.y = 40; 
       camera.position.z = 30; 
       camera.lookAt(scene.position); 

       $("#visor").append(renderer.domElement); 
       renderer.render(scene, camera); 
      }); 
     </script> 
    </body> 
</html>

來源

2016-03-07 Mou

如果第二次調用'renderer.render（scene，camera）'，則會進行陰影渲染。這在three.js r.73中不是問題。這個問題似乎是在第74段中提出的。看着它。 – WestLangley

由three.js r.76dev中的@mrdoob修復。 – WestLangley

three.js所r.74和r.75在其陰影未在第一次調用總是呈現爲render()的錯誤。這個bug已經在three.js r.76dev中修復了。

你的解決方法是第二次調用renderer.render(scene, camera)，或者有一個動畫循環。

three.js r.75

來源

2016-03-19 20:50:11 WestLangley

THREE.JS不會投射陰影

回答

相關問題