ThreeJS阴影未渲染

Question

我浏览了其他一些S.O.的问题，并遵循了所有的建议，但是我仍然不知道为什么我无法在这个非常基本的场景中渲染阴影。 http://jsfiddle.net/4Txgp/ [更新] 代码:

var SCREEN_WIDTH = window.innerWidth - 25;
var SCREEN_HEIGHT = window.innerHeight - 25;

var camera, scene;
var canvasRenderer, webglRenderer;

var container, mesh, geometry, plane;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.x = 1200;
    camera.position.y = 1000;
    camera.lookAt({
        x: 0,
        y: 0,
        z: 0
    });

    scene = new THREE.Scene();

    var groundMaterial = new THREE.MeshLambertMaterial({
        color: 0x6C6C6C
    });
    plane = new THREE.Mesh(new THREE.PlaneGeometry(10000, 10000, 100, 100), groundMaterial);
    plane.rotation.x = -Math.PI / 2;
    plane.receiveShadow = true;

    scene.add(plane);

    // LIGHTS
    // scene.add(new THREE.AmbientLight(0x666666));

    /*
    var light;

    light = new THREE.DirectionalLight(0xdfebff, 1.75);
    light.position.set(600, 800, 100);
    //light.position.multiplyScalar(1.3);

    light.castShadow = true;
    light.shadowCameraVisible = true;

    light.shadowMapWidth = light.shadowMapHeight = 2048;

    var d = 50;

    light.shadowCameraLeft = -d;
    light.shadowCameraRight = d;
    light.shadowCameraTop = d;
    light.shadowCameraBottom = -d;

    light.shadowCameraFar = 500;
    light.shadowDarkness = 0.5;

    scene.add(light);
    */

    var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 700, 1000, 100 );

spotLight.castShadow = true;
    spotLight.shadowCameraVisible = true;

spotLight.shadowMapWidth = 2048;
spotLight.shadowMapHeight = 2048;

spotLight.shadowCameraNear = 100;
spotLight.shadowCameraFar = 2000;
spotLight.shadowCameraFov = 30;

scene.add( spotLight );

    var boxgeometry = new THREE.CubeGeometry(100, 200, 100);
    var boxmaterial = new THREE.MeshLambertMaterial({
        color: 0x0aeedf
    });
    var cube = new THREE.Mesh(boxgeometry, boxmaterial);

    cube.position.x = 0;
    cube.position.y = 100;
    cube.position.z = 0;

    scene.add(cube);

    // RENDERER
    webglRenderer = new THREE.WebGLRenderer();
    webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    //webglRenderer.domElement.style.position = "relative";
    webglRenderer.shadowMapEnabled = true;
    webglRenderer.shadowMapSoft = true;

    container.appendChild(webglRenderer.domElement);
}

function animate() {
    var timer = Date.now() * 0.0002;
    camera.position.x = Math.cos(timer) * 1000;
    camera.position.z = Math.sin(timer) * 1000;
    requestAnimationFrame(animate);
    render();
}

function render() {
    camera.lookAt(scene.position);
    webglRenderer.render(scene, camera);
}

我有一个场景，其中包含一个飞机、一个物体（立方体）、一个聚光灯（从http://threejs.org/docs/58/#Reference/Lights/SpotLight直接复制用于测试目的）和一个相机。它可以正常渲染，但是立方体没有在“地面”（飞机）上投射阴影，而且阴影看起来就像所有东西都是基础材质一样。我正在使用Phongs和Lamberts的组合。

我的定向光设置为castShadow = true;，我的平面设置为receiveShadow = true，并设置了阴影映射设置。渲染器本身启用了shadowMapEnabled = true。

我尝试了各种解决方案，我记得在之前的ThreeJS版本中，根据你想要做什么，会有外部库调用，但我也看到其他人在JSFiddle上只调用ThreeJS本身的示例，以及来自官方网站的示例，都能正常工作。

有关我是否忽略了一些简单而小的内容的任何提示/信息/建设性的评论？

- ChrisCoray

Answer 1

您需要设置

cube.castShadow = true;

确保阴影相机的远平面到达立方体。

three.js r.144

- WestLangley

---

facepalm 谢谢！阴影相机远平面我实际上没有意识到，但那很有道理。cube.castShadow 我本应该知道的。 - ChrisCoray

有点琐碎，但是我想指出一个笔误；应该是 cube.castShadow = true;。 - user3141031

.castShadow属性会从父对象继承吗？ - Justin

@Justin 不，它不是继承的。 - WestLangley