Three.js DoubleSided 材质不会在平面参数几何体的两侧投射阴影 [英] Three.js DoubleSided material doesn't cast shadow on both sides of planar parametric geometry
问题描述
见这个 jfiddle:http://jsfiddle.net/blwoodley/5Tr4D/1/
See this jfiddle: http://jsfiddle.net/blwoodley/5Tr4D/1/
我有一个蓝色聚光灯,它照射在一个旋转的正方形上.这会在下面的地面上投下阴影.除了它只在正方形的一侧投下阴影.
I have a blue spot light that shines on a rotating rotating square. This casts a shadow to the underlying ground. Except that it only casts a shadow on one side of the square.
我看到了这个讨论:https://github.com/mrdoob/three.js/issues/3544 这表明平面上的面部剔除是原因.建议是给我的正方形一些深度,即使它成为一个立方体.
I saw this discussion: https://github.com/mrdoob/three.js/issues/3544 which indicates that face culling on planar surfaces is the cause. the recommendation is to give my square some depth, i.e. make it a cube.
我可以用这个简单的例子来做到这一点,但我遇到了同样的问题,参数几何是一个表面.有没有办法让双方都投下阴影,而不必给我的几何体一个没有或不需要的深度?
I can do that with this simple example, but I'm encountering the same problem with a parametric geometry that is a surface. Is there a way to get both sides to cast a shadow without having to give my geometry a depth in doesn't have or need?
这是用平面复制问题的小提琴中的主要功能:
Here is the main function in the fiddle that replicates the problem with a plane:
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);
}
推荐答案
是的,这是一个功能.
WebGLRenderer
,默认情况下,在渲染阴影时剔除正面.这是可以的,因为假设对象具有深度.如果需要,您可以改为剔除背面:
WebGLRenderer
, by default, culls front faces when rendering shadows. This is OK, because it is assumed that objects have depth. You can cull back faces, instead, if you want:
renderer.shadowMapCullFace = THREE.CullFaceBack;
...但剔除两者都不是一种选择.
... but culling neither is not an option.
投射阴影时不考虑 material.side
属性.
The material.side
property is not taken into consideration when casting shadows.
three.js r.63
three.js r.63
这篇关于Three.js DoubleSided 材质不会在平面参数几何体的两侧投射阴影的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!