ThreeJS gölge oluşturulmuyor

Question

Diğer bir çok S.O.'ye baktım. sorular, tüm tavsiyeleri takip ettim, ancak bu çok temel sahnede neden gölgeler çizemediğimi hala clueless yapıyorum.

http://jsfiddle.net/4Txgp/

[Güncelleme] Kod: bir uçak, bir nesnenin (küp), (test amacıyla http://threejs.org/docs/58/#Reference/Lights/SpotLight doğrudan kopyalanabilir) bir spot ile bir sahne sahip

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

ve kamera. Küpün "zemin" (düzlem) üzerinde bir gölge oluşturmadığı ve gölgelemenin her şeyin temel bir malzemede yapılmış gibi görünmesi dışında, ince bir görünüm verir. Phongs ve Lamberts'ın bir kombinasyonunu kullanıyorum.

Yönlü ışığım castShadow = true olarak ayarlandı ve düzlemim shadow map ayarları ile birlikte almaShadow = true ile ayarlandı. İşleyicinin kendisi shadowMapEnabled = true değerine sahiptir.

Çeşitli çözümleri denedim, daha önce ThreeJS sürümlerini hatırladığımı hatırlıyorum, ne yapmak istediğinize bağlı olarak harici kütüphane çağrıları olurdu, ama aynı zamanda JSFiddle ile ilgili diğer örnekleri de gördüm. resmi siteden örnekler olarak, bu iyi çalışıyor.

Basit ve küçük bir şeyle ilgili herhangi bir ipucu/bilgi/yapıcı açıklama var mı?

Answer 1

Sen

cube.castShadow = true; 

ayarlamak ve gölge kamera uzak düzlem küp ulaştığından emin olmak gerekir.

Fiddle: http://jsfiddle.net/4Txgp/13/

Three.js r.58