javascript - Three.js 病态切线与病态 VertexTangentsHelper

Question

我注意到，当我在 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。

Answer 1

THREE.VertexTangentsHelper没有任何问题.

要计算单个顶点的切向量，Geometry.computeTangents()对共享该顶点的每个三 Angular 形计算的切向量进行平均。

最简单的BoxGeometry有 8 个顶点，但有 12 个面。应用于 BoxGeometry 时它能正常工作的唯一方法如果盒子每个 Angular 的顶点都是重复的，而不是共享的，就会出现这种情况。

三.js r.70