使用 MeshLambertMaterial 重叠 PointLight 阴影 [英] Overlapping PointLight Shadows using MeshLambertMaterial

问题描述

我正在用 ThreeJS 建造我房子的一个小代表，我已经整理了墙壁等，并且正在添加灯光.我正在使用 PointLights，因为它们代表灯泡.

I'm building a small representation of my house in ThreeJS, and I have the walls and such sorted and am in the process of adding the lights. I'm using PointLights as they are representing lightbulbs.

我遇到的问题是，有两盏灯，只有它们覆盖的区域被点亮，剩下的半影"是漆黑的，我希望它们以一半的强度点亮.下面的图形表示.

The issue I'm having is that with two lights, only the area that they both cover is lit, and the remaining 'half-shadow' is pitch black, when I would expect them to be lit with half of the intensity. Graphical representation below.

图形表示

在这张图片中，圆圈代表灯光，光束代表我希望光线如何落在较小的房间里.带有阴影"的区域代表我希望有半阴影"的地方.

In this image, the circles represent the lights, with the beams representing how I expect the light to fall in the smaller room. The area with the 'shading' represents where I expect to have the 'half-shadows'.

在我看来，场景中唯一真正被照亮的区域是两个 PointLights 都发光的地方，当只有一个 PointLights 会影响一个区域时，该区域是一片漆黑.

It seems to me that the only area that is actually lit in the scene is where BOTH of the two PointLights shine, and when only one would affect an area, the area is pitch black.

墙壁作为 BoxGeometries 添加，门周围的墙壁作为形状的 ExtrudeGeometry.

The walls are added as BoxGeometries, with the walls around the door as an ExtrudeGeometry of a Shape.

这是灯的代码:

scene.add( function() {
    var mainLight1 = new THREE.PointLight( 0xFFFFFF, 0.33 );
    mainLight1.position.set( -middleFloorDim.width / 5, middleFloorDim.height * 9.75 / 10, -middleFloorDim.depth / 4 );
    mainLight1.castShadow = true;

    return mainLight1;
}());

scene.add( function() {
    var mainLight2 = new THREE.PointLight( 0xFFFFFF, 0.33 );
    mainLight2.position.set( -middleFloorDim.width / 5, middleFloorDim.height * 9.75 / 10, middleFloorDim.depth / 4 );
    mainLight2.castShadow = true;

    return mainLight2;
}());

这里是渲染器的代码:

var renderer = new THREE.WebGLRenderer({ antialias: true, });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

以及其中一堵墙的示例:

And an example of one of the walls:

scene.add( function() {
    var northWall = new THREE.Mesh(
      new THREE.BoxGeometry( middleFloorDim.depth, middleFloorDim.height , 0.01 ),
      new THREE.MeshLambertMaterial({
        color: PALETTE.MIDDLE_FLOOR_WALLS,
      })
    );
    northWall.rotation.y = Math.PI / 2;
    northWall.position.set( -middleFloorDim.width / 2, middleFloorDim.height / 2, 0 );
    northWall.castShadow = true;
    northWall.receiveShadow = true;
    return northWall;
}());

推荐答案

当您有多个光源并且接收阴影的材质是 MeshLambertMaterial 时，您会遇到阴影问题.

You are having problems with shadows when you have multiple light sources and the material receiving the shadow is MeshLambertMaterial.

这是 MeshLambertMaterial 的一个限制，因为它使用 Gouraud 着色——光照计算是在顶点着色器中计算的.由于阴影是在片段着色器中计算的，因此无法识别该点的光源.

This is a limitation of MeshLambertMaterial due to the fact that it uses Gouraud shading -- the illumination calculation is computed in the vertex shader. Since shadows are computed in the fragment shader, there is no way to identify the light sources at that point.

对于适当的阴影，例如使用 MeshPhongMaterial 或 MeshStandardMaterial.

For proper shadows, use MeshPhongMaterial or MeshStandardMaterial, for example.

three.js r.88

three.js r.88

这篇关于使用 MeshLambertMaterial 重叠 PointLight 阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！