THREE.JS中陰影的怪異行爲

我想渲染一組照片，它們位於三維空間中，它們彼此投射陰影。我開始與兩個矩形，這裏是我的代碼THREE.JS中陰影的怪異行爲

function loadScene() { 
    var WIDTH = 1200, 
     HEIGHT = 500, 
     VIEW_ANGLE = 45, 
     ASPECT = WIDTH/HEIGHT, 
     NEAR = 0.1, 
     FAR = 10000, 

     world = document.getElementById('world'), 
     renderer = new THREE.WebGLRenderer(), 
     camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR), 
     scene = new THREE.Scene(), 
     texture = THREE.ImageUtils.loadTexture('image.jpg', {}, function() { 
      renderer.render(scene, camera); 
     }), 
     material = new THREE.MeshLambertMaterial({map: texture}), 
     solidMaterial = new THREE.MeshPhongMaterial({color: 0xCC0000}), 
     rectangle = new THREE.PlaneGeometry(200, 120), 
     mesh = new THREE.Mesh(rectangle, material), 
     mesh1 = new THREE.Mesh(rectangle, material), 
     spotLight = new THREE.SpotLight(0xFFFFFF, 1.3); 

    camera.position.set(0, 0, 200); 
    mesh.translateX(140); 
    mesh.translateZ(-70); 
    mesh.receiveShadow = true; 
    mesh1.castShadow = true; 
    spotLight.position.x = -100; 
    spotLight.position.y = 230; 
    spotLight.position.z = 230; 
    spotLight.castShadow = true; 

    scene.add(spotLight); 
    scene.add(mesh); 
    scene.add(mesh1); 
    renderer.setSize(WIDTH, HEIGHT); 
    renderer.shadowMapEnabled = true; 
    renderer.render(scene, camera); 
    world.appendChild(renderer.domElement); 
}

這裏solidMaterial是一個堅實的紅色，material是紋理材料。我得到如下：

如果我使用material兩個網格，矩形顯示爲預期，但沒有陰影。如果我爲兩者使用solidMaterial，也是如此。
如果我使用material代替mesh（更遠的一個）和solidMaterial代碼mesh1，我看到一個紅色矩形，它在紋理上投射陰影。這是唯一符合我預期的情況。
如果我使用solidMaterial爲mesh（一遠）和material爲mesh1，我看到一個紅色的長方形與它的影子，但在前面的紋理矩形沒有在所有繪製。

什麼是陰影的正確使用？

來源

2011-10-28 Andrea

事實證明，當兩個矩形具有相同的材質時，陰影不會出現。我想知道這是否是THREE.js中的一個錯誤。另一方面，如果我使用兩種不同的材質，即使它們具有相同的紋理，陰影也會如預期那樣出現。

來源

2011-10-28 14:42:12 Andrea

我不知道Three.js的內部結構，但我猜測它會繪製所有在一次調用中共享材質的幾何圖形。不幸的是，這使得陰影非常困難，但是對於其他地方更好的性能來說，這可能是一個合理的折衷。另外，既然你發現了這種簡單的解決方法，我懷疑有很多需要「糾正」這種行爲。 – Toji

THREE.JS中陰影的怪異行爲

回答

相關問題