थ्रीजेएस छाया

Question

प्रतिपादन नहीं कर रहा है मैंने कई अन्य एसओ को देखा है। प्रश्न, सभी सलाहों का पालन किया, लेकिन मैं अभी भी इस बात से अनजान हूं कि मुझे इस मूलभूत दृश्य को प्रस्तुत करने के लिए छाया क्यों नहीं मिल सकती है।

http://jsfiddle.net/4Txgp/

[Updated] कोड:

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 से सीधे नकल की) के साथ एक दृश्य है, और एक कैमरा। यह ठीक है, सिवाय इसके कि घन "जमीन" (विमान) पर एक छाया कास्टिंग नहीं कर रहा है, और छायांकन दिखता है जैसे मूल सामग्री में सबकुछ किया गया है। मैं फोंग्स और लैम्बर्ट्स का कॉम्बो का उपयोग कर रहा हूं।

मेरी दिशात्मक रोशनी को छाया/सत्य पर सेट करने के लिए सेट किया गया है, और मेरा विमान छाया मानचित्र सेटिंग्स के साथ getShadow = true के साथ सेट है। रेंडरर में shadowMapEnabled = true है।

मैंने विभिन्न समाधानों का प्रयास किया है, मुझे याद है कि थ्रीजेएस के पिछले संस्करणों के साथ आप बाहरी पुस्तकालय कॉल करेंगे जो आप करना चाहते थे, लेकिन मैंने जेएसएफडल पर अन्य उदाहरण भी देखे हैं, केवल तीन जेएसएस को स्वयं ही बुला रहे हैं आधिकारिक साइट के उदाहरण के रूप में, यह ठीक काम करता है।

कुछ सरल और छोटे दिखने के बारे में कोई संकेत/जानकारी/रचनात्मक टिप्पणियां?

Answer 1

आप

cube.castShadow = true; 

सेट और यह सुनिश्चित करें छाया कैमरा अब तक विमान घन तक पहुँच जाता है बनाने की जरूरत है।

फिडल: http://jsfiddle.net/4Txgp/13/

Three.js r.58