我注意到，当我在 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()对共享该顶点的每个三 Angular 形计算的切向量进行平均。
最简单的BoxGeometry有 8 个顶点，但有 12 个面。应用于 BoxGeometry 时它能正常工作的唯一方法如果盒子每个 Angular 的顶点都是重复的，而不是共享的，就会出现这种情况。
三.js r.70
关于javascript - Three.js 病态切线与病态 VertexTangentsHelper，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28373189/