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

}

- Bob Woodley

Answer 1

是的，这是一项功能。

WebGLRenderer默认情况下会在渲染阴影时剔除前面的面。这是可以接受的，因为假定对象具有深度。如果需要，你可以剔除背面：

renderer.shadowMapCullFace = THREE.CullFaceBack;

......但是不剪辑也不是一个选项。

在投射阴影时，不考虑material.side属性。

three.js r.63

- WestLangley

---

谢谢你的回答。看起来我需要一个实体，而不是表面。但似乎没有办法挤出参数几何体，这是正确的吗？ - Bob Woodley

您需要创建一个新的帖子并描述您的特定几何形状。 - WestLangley