Three.js 使用三种材质的Meshlambert照明不正常_Three.js

Three.js 使用三种材质的Meshlambert照明不正常

three.js

Three.js 使用三种材质的Meshlambert照明不正常,three.js,Three.js,我正在用Three.js创建3D房间。我已经使用了Meshlambert材料作为墙体材料。当我在房间里加上一盏指示灯时，它工作正常。但当我在房间外面再加一个灯泡时，它就不工作了 var cubeMat = new THREE.MeshLambertMaterial({ color: 0xD3D3D3, side: THREE.DoubleSide }); 下面是一个复制测试用例： var摄像机、场景、渲染器； init（）；制作动画（）；白斑病；变种2；方向向量=1；函数addLi

我正在用Three.js创建3D房间。我已经使用了Meshlambert材料作为墙体材料。当我在房间里加上一盏指示灯时，它工作正常。但当我在房间外面再加一个灯泡时，它就不工作了

var cubeMat = new THREE.MeshLambertMaterial({ color: 0xD3D3D3, side: THREE.DoubleSide });

下面是一个复制测试用例：

var摄像机、场景、渲染器；
init（）；
制作动画（）；
白斑病；
变种2；
方向向量=1；
函数addLights（）{
var-bulbGeometry=新的三种球墨法（0.02,16,8）；
Bulblith=新的三点光源（0xffee88,2100,2）；
Bulblith2=新的三点光源（0xffee88,2100,2）；
var bulbMat=新的三点网格标准材料({
发射：0xffffee，
发射强度：1，
颜色：0x000000
});
添加（新的三个网格（球几何，球几何））；
球茎病位置集（-0.5,0.6，-1.5）；
bulblith.shadow.camera.near=0.01；
bulblith.castShadow=true；
场景。添加（白叶枯病）；
Bulblith2.添加（新的三个网格（bulbGeometry，bulbMat））；
球茎病2。位置。设置（-0.5,0.6，-1.5）；
bulblith2.shadow.camera.near=0.01；
bulblith2.castShadow=true；
场景。添加（2）；
var hemiLight=新的三个半球灯光（0xddeeff，0x0f0e0d，0.02）；
场景。添加（半光）；
}
函数addFloor（）{
var floorMat=new THREE.MeshLambertMaterial（{color:0xD3D3，side:THREE.DoubleSide}）；
var地板测量法=新的三点几何（20,20）；
//地板测量学。计算平面法线（）；
//地板测量学。计算垂直法线（）；
var floorMesh=新的三个网格（地板测量法、地板模型）；
floorMesh.receiveShadow=true；
floorMesh.rotation.x=-Math.PI/2.0；
场景。添加（floorMesh）；
}
函数addWalls（）{
var cubeMat=new THREE.MeshLambertMaterial（{color:0xD3D3，side:THREE.DoubleSide}）；
var-boxGeometry=新的三个.boxGeometry（0.1,2,5）；
//boxGeometry.computeFaceNormals（）；
//boxGeometry.computeVertexNormals（）；
var boxMesh=新的三点网格（boxGeometry，cubeMat）；
boxMesh.position.set（0.1,0.25，-0.5）；
boxMesh.castShadow=true；
boxMesh.receiveShadow=true；
场景。添加（boxMesh）；
var boxMesh2=新的三点网格（boxGeometry，cubeMat）；
boxMesh2.位置设置（0.5,0.25,0.5）；
boxMesh2.castShadow=true；
boxMesh2.receiveShadow=true；
场景.add（boxMesh2）；
}
函数addControls（）{
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
controls.target.set（0,0,0）；
控件更新（）；
}
函数init（）{
摄像头=新的三个透视摄像头（50，window.innerWidth/window.innerHeight，0.1100）；
camera.position.x=-4；
摄像机位置z=4；
摄像机位置y=2；
场景=新的三个。场景（）；
addLights（）；
addFloor（）；
addWalls（）；
renderer=new THREE.WebGLRenderer（）；
renderer.physicallyCorrectLights=true；
renderer.gammaInput=true；
renderer.gammaOutput=true；
renderer.shadowMap.enabled=true；
renderer.toneMapping=THREE.ReinhardToneMapping；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
addControls（）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
球叶枯病位置x+=（球叶枯病方向===1）？0.01:-0.01；
如果（球叶枯病位置x>1）球叶枯病方向=0；
如果（球茎位置x<-1）球茎方向=1；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}

看起来您可能在MeshLambertMaterial中发现了一个错误，该错误计算了多个阴影。我用你的代码玩了一段时间，从外观上看，材质正在执行一个乘法运算，它只在两个灯光都亮的地方亮起，而不是只有一个灯光亮起时亮起：

1 x 1 = 1;
1 x 0 = 0;
0 x 0 = 0;

实际上，应以相加的方式计算灯光：

1 + 1 = 2;
1 + 0 = 1;
0 + 0 = 0;

我找到的唯一解决方案是将墙和地板材质更改为

MeshPhongMaterial

。此外，您可能不需要在墙上安装三个双面

var floorMat = new THREE.MeshPhongMaterial({ color: 0xD3D3D3, side: THREE.DoubleSide });
var cubeMat = new THREE.MeshPhongMaterial({ color: 0xD3D3D3 });

1 x 1 = 1;
1 x 0 = 0;
0 x 0 = 0;

实际上，应以相加的方式计算灯光：

1 + 1 = 2;
1 + 0 = 1;
0 + 0 = 0;

我找到的唯一解决方案是将墙和地板材质更改为

MeshPhongMaterial

。此外，您可能不需要在墙上安装三个双面

var floorMat = new THREE.MeshPhongMaterial({ color: 0xD3D3D3, side: THREE.DoubleSide });
var cubeMat = new THREE.MeshPhongMaterial({ color: 0xD3D3D3 });

由于网格的

receiveShadow

和

castShadow

都设置为

true

，因此您看到的是自阴影瑕疵

通过调整

light.shadow.bias

，可以减少自阴影伪影。不幸的是，这样做可能会导致其他工件

阴影可能很棘手。我建议你用谷歌搜索这个话题，确保你理解所有涉及的问题

此外，

MeshLambertMaterial

在处理阴影方面受到限制。如果您有环境地图，我会使用

MeshStandardMaterial

，否则我会使用

MeshPhongMaterial

three.js r.87