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作为官方网站的例子，这工作很好。

任何提示/信息/建设性的言论，关于俯瞰简单和小事？

Answer 1

您需要设置

cube.castShadow = true; 

，并确保相关的阴影摄像机远平面到达立方体。

小提琴：http://jsfiddle.net/4Txgp/13/

three.js所r.58