three.js所的雙面材料不投射在平坦的幾何參數

Question

的兩側陰影見本jfiddle：http://jsfiddle.net/blwoodley/5Tr4D/1/

我有照在旋轉旋轉正方形藍色點光源。這給底層地面投下了陰影。除了它只在廣場的一側投下陰影。

我看到了這個討論：https://github.com/mrdoob/three.js/issues/3544這表明在平面上剔光是原因。建議給我的廣場一些深度，即使它成爲一個立方體。

我可以用這個簡單的例子來做到這一點，但是我遇到了一個表面參數幾何問題。有沒有辦法讓雙方都投下陰影，而不必讓我的幾何圖形有深度或不需要？

這是在與一個平面複製問題的小提琴主要功能：

function init() { 

container = document.createElement('div'); 
document.body.appendChild(container); 

camera = new THREE.PerspectiveCamera(30, window.innerWidth/window.innerHeight, 1, 100000); 
camera.position.x = 100; 
camera.position.y = 100; 
camera.position.z = 100; 
camera.lookAt({x: 0,y: 0,z: 0}); 

scene = new THREE.Scene(); 

var groundMaterial = new THREE.MeshLambertMaterial({ 
    color: 0xffffff, side:THREE.DoubleSide 
}); 
plane = new THREE.Mesh(new THREE.PlaneGeometry(2000,2000,10,10), groundMaterial); 
plane.rotation.x = Math.PI/2; 
plane.position.y = -40; 
plane.receiveShadow = true; 

scene.add(plane); 

var light; 

light = new THREE.SpotLight(0x0000ff); 
light.position.set(40, 40, 0); 
light.castShadow = true; 
light.shadowCameraVisible = true; 
light.shadowMapWidth = 2048; 
light.shadowMapHeight = 2048; 
light.position.set(24, 20, 0); 
light.lookAt(plane);  
light.castShadow = true; 
light.angle = .8; 
light.intensity = 30; 
light.distance=0; 
light.shadowCameraNear = 2; 
light.shadowCameraFar = 100; 
light.shadowCameraFov = 100; 
light.shadowDarkness = 1; 
light.shadowCameraVisible = true; 
scene.add(light); 

var planeGeo = new THREE.PlaneGeometry(20,20,20,20) 
_planeMesh = new THREE.Mesh(planeGeo, new THREE.MeshLambertMaterial({ color: 0x00ff00, side:THREE.DoubleSide })); 
_planeMesh.castShadow = true; 
scene.add(_planeMesh); 


// 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); 
window.addEventListener('resize', onWindowResize, false); 

}

Answer 1

是的，這是一個特點。

WebGLRenderer默認情況下，在渲染陰影時挑選正面。這是可以的，因爲假定對象具有深度。如果你願意，你可以選擇背面：

renderer.shadowMapCullFace = THREE.CullFaceBack; 

...但是兩者都不是選項。

投射陰影時未考慮material.side屬性。

three.js r.63