Three.js：Three.Geometry + LambertMaterial网格物体上的光照不正确

Question

我通过使用最新版本的Three.JS并演示了Three.Geometry照明问题的jsfiddle改进了该问题的先前表述（ 先前的问题版本 ）。 我无法使依赖项在Stack Snippets中工作，但JSFiddle可以工作：

JSFIDDLE展示不正确的照明

请注意，左侧的照明不正确的面（Three.Geometry对象），右侧的照明正确的相邻面（Three.CubeGeometry）。

我的灯码：

hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 50, 0 );
app.scene.add( hemiLight );

dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
dirLight.color.setHSL( 0.1, 1, 0.95 );
dirLight.position.set( -1, 1.75, 1 );
dirLight.position.multiplyScalar( 50 );
app.scene.add( dirLight );

您可以看到THREE.CubeGeometry（网格1、2、3）和THREE.Geometry（网格4、5、6）对象的JSFiddle源。 网格5和6具有分别实例化并由数组分配的lambert面，而geo 4具有传递给网格构造函数的单个lambert材质。

物料阵列存储类THREE.MeshFaceMaterial中的物料是否可能需要按照特定的顺序才能使多维数据集正确点亮？ 我已经按顺序分配了它们：2个底面，8个侧面，2个顶面。

如果Three.Geometry对象似乎已正确添加到场景中，为什么灯光会平铺在绿色立方体上？ 谢谢。

Answer 1

如此处回答： https : //gamedev.stackexchange.com/questions/93031/three-js-lighting-not-calculating-correct-on-three-geometry-objects/93099#93099

从物体的外部看，三角形绕组需要逆时针旋转。

要确认，请将THREE.DoubleSide的所有实例更改为THREE.FrontSide并运行。 THREE.FrontSide应该看起来很完美，因为它是three.js的默认设置-但在您的示例中，它不是。 希望这对您有所帮助！ :)

Answer 2

只是为了跟进，以防其他人偶然发现：

虽然我确实重新排列了顶点顺序以确保90度垂直法线，但我发现这与相邻的对象照明没有实质性的区别。

答案是three.js并不是从本质上计算场景图中相邻对象之间的光照，而阴影贴图功能试图解决此问题，但我的调查表明，阴影贴图解决方案实际上不适用于我的用例。

相反，我仅应用了两种几何计算中的一种来获得模拟的灯光效果

我所拥有的：

geo.computeFaceNormals(); 
geo.computeVertexNormals();

我最终使用的是：

geo.computeFaceNormals(); 
//geo.computeVertexNormals();

使用computeVertexNormals（）...

没有

虽然不是完美的灯光效果（灯光是平坦的），但目前仍可以使用。 感谢您的帮助海报。