ThreeJSシャドーがレンダリングされない

Question

私はいくつかの他のS.O.質問は、アドバイスのすべてに従っていますが、なぜ私はこの非常に基本的なシーンでレンダリングするための影を得ることができないのか迷っています。

http://jsfiddle.net/4Txgp/

[更新]コード：私は平面、物体（キューブ）、（テスト目的でhttp://threejs.org/docs/58/#Reference/Lights/SpotLightから直接コピー）スポットライトでシーンを有する

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); 
} 

、及びカメラ。キューブが "地面"（飛行機）に影を投げていないことを除けば、それはうまく描写され、すべてが基本的な素材で行われたように陰影が現れます。私はフォンとランバートのコンボを使用しています。

私の方向性ライトは、キャストシャドウ= trueに設定され、私のプレーンは、シャドウマップ設定とともに、receiveShadow = trueで設定されます。レンダラー自体にはshadowMapEnabled = trueがあります。

私はさまざまなソリューションを試しましたが、以前のバージョンのThreeJSでは、あなたがやりたいことに応じて外部ライブラリ呼び出しがあることを覚えていますが、JSFiddleの他の例も見てきました。公式サイトからの例として、うまく動作します。

シンプルで小さなものを見落とすことについてのヒント/情報/建設的な発言はありますか？

Answer 1

あなたは

cube.castShadow = true; 

を設定し、シャドウカメラ遠く面が立方体に達したことを確認する必要があります。

フィドル：http://jsfiddle.net/4Txgp/13/

three.js r.58