THREE.js 无法从简单的立方体将阴影投射到平面上

Question

我对 Three.js 很陌生，但我就是不明白为什么这不起作用。我有一个非常简单的场景；聚光灯下飞机上的立方体。我希望有一个阴影从立方体投射到平面上。立方体和平面渲染良好，但没有出现阴影。

这是失败的尝试： http://www.owensouthwood.com/experiments/cubething/

我预计立方体右下方的地板上会出现阴影。

这里是init() 函数，如您所见，它包含确保castShadow=true 和receiveShadow=true 的行——我还需要什么？

function init() {
            // create new scene
            scene = new THREE.Scene();

            // setup renderer
            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0x000000, 1.0); 
            renderer.setSize(W,H);
            renderer.shadowMapEnabled = true;

            // setup camera pointing at scene
            camera = new THREE.PerspectiveCamera( 45, W/H, 0.1 , 10000);
            camera.position.x = 1;
            camera.position.y = 1;
            camera.position.z = 1;
            camera.lookAt(scene.position);

            // draw a cube
            var cubeWidth = 0.5;
            var cubeHeight = 0.5;
            var cubeDepth = 0.5;            
            var cubeGeometry = new THREE.CubeGeometry(cubeWidth, cubeHeight, cubeDepth);
            var cubeMaterial = new THREE.MeshPhongMaterial({ color: "yellow", ambient: "white", shininess: 9, metal: true, reflectivity: 9 });                
            cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            // make the cube cast and recieve shadow
            cube.castShadow = true;
            cube.receiveShadow = true;            
            scene.add(cube);

            // draw a floor (plane) for the cube to sit on 
            var planeGeometry = new THREE.PlaneGeometry(20, 20);
            var planeMaterial = new THREE.MeshPhongMaterial({ color: "white" });  
            var plane = new THREE.Mesh(planeGeometry, planeMaterial);
            // make the plane recieve shadow from the cube
            plane.receiveShadow = true;
            plane.rotation.x = -0.5 * Math.PI;
            plane.position.y = -2;
            scene.add(plane);

            // add a spotlight to illuminate the cube and cause shadows            
            var spotLight = new THREE.SpotLight(0xffffff);
            spotLight.position.set(1, 2, 2);
            spotLight.castShadow = true; 
            spotLight.intensity = 1;
            scene.add(spotLight);

            // render it!
            document.body.appendChild(renderer.domElement);
            render();

        }

请问我做错了什么？

谢谢 欧文

Answer 1

您需要使用以下行 spotLight.shadowCameraNear = 1; 因为.shadowCameraNear 接受数字所以它不能用作布尔值

Answer 2

已解决 - 虽然我不确定这是解决问题的正确方法，但似乎在我的聚光灯定义中添加以下行可以解决问题：

spotLight.shadowCameraNear = true;