three.js 病态切线与病态 VertexTangentsHelper

three.js ill formed tangents vs ill formed VertexTangentsHelper

我注意到当我在 THREE.js 中的各种几何体上启用 "vertexTangentsHelper" 时,我得到了错误的切线。

切线是否计算错误(我怀疑它们是基于我的某些着色器输出),还是 "vertexTangentsHelper" 有缺陷?

据我了解,顶点的切向量应指向 "uv" 地图的 "u" 方向,并垂直于该顶点的法线和双切线。我在下面发布了一些屏幕截图来说明我的问题:

上图说明了使用 "THREE.PlaneGeometry" 创建的网格上显示的正确切线。网格点的所有切线都沿同一方向。 (网格为 40 x 40,具有 4 个高度段和 4 个宽度段。切线长度为 10 个单位。)

上图说明了使用 "THREE.BoxGeometry" 创建的网格上显示的不正确切线。沿边的切线未与其相关面的切线对齐。 (网格为 40 x 40 x 40,每个面有 4 个高度段和 4 个宽度段。切线长度为 10 个单位。)

这种不一致的原因是什么?问题出在 "computeTangents" 代码还是 "VertexTangentsHelper" 代码中?或者还有什么我没有考虑到的吗?我正在使用 three.js re70。

THREE.VertexTangentsHelper没有问题。

要计算单个顶点的切向量,Geometry.computeTangents() 计算共享该顶点的每个三角形的切向量的平均值。

最简单的BoxGeometry有8个顶点,但是有12个面。将它应用于 BoxGeometry 时,唯一能正常工作的方法是盒子每个角的顶点都被复制,而不是共享。

three.js r.70