three.js – ThreeJS阴影无法渲染

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,以及来自的例子官方网站,工作正常.

关于忽略简单和小的东西的任何提示/信息/建设性评论？