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

Three.js DoubleSided材质不会在平面参数几何体的两侧投射阴影

1 个答案: