Three.js：Three.Geometry + LambertMaterial网格上的错误光线

Question

我已经改进了我之前对这个问题（previous question version）的表述，并使用了最近构建的Three.JS并且解释了我的Three.Geometry照明问题的jsfiddle。我无法在Stack Snippets中使用依赖项，但JSFiddle可以工作：

JSFIDDLE SHOWING INCORRECT LIGHTING

注意左侧（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具有单独实例化并由数组指定的朗伯面，而地理4具有传递给网格构造函数的单个朗伯材料。

材料阵列存储类THREE.MeshFaceMaterial中的材料是否可能需要特定顺序才能使立方体正确点亮？我按顺序分配了它们：2个底面，8个侧面，2个顶面。

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

Answer 1

在这里回答： https://gamedev.stackexchange.com/questions/93031/three-js-lighting-not-calculating-correctly-on-three-geometry-objects/93099#93099

从物体外部看，三角形绕组需要逆时针方向。

要确认，请将THREE.DoubleSide的所有实例更改为THREE.FrontSide并运行。 THREE.FrontSide应该看起来很完美，因为它是three.js的默认值 - 但在你的例子中却没有。希望这有帮助！ ：）

Answer 2

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

虽然我确实重新排列了顶点顺序以确保90度垂直法线，但我发现这并没有对相邻的物体照明产生重大影响。

答案是，three.js本质上并没有计算场景图中相邻对象的光照，虽然shadowmap功能试图解决这个问题，但我的研究表明，shadowmap解决方案对我的用例并没有真正起作用

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

我有什么：

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

我最终使用的是：

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

使用computeVertexNormals（）...

无

虽然不是完美的光效（光线平坦），但现在可行。感谢帮助海报。