三个错误形成的切线与生病的VertexTangentsHelper相比

Question

我注意到当我启用＆＃34; vertexTangentsHelper＆＃34;在THREE.js中的各种几何形状上，我正在形成切线。

是否正确计算了切线，（因为我怀疑它们是基于我的一些着色器输出），或者是＆＃34; vertexTangentsHelper＆＃34;有缺陷？

据我所知，顶点的切向量应指向＆＃34; u＆＃34; ＆＃34; uv＆＃34;的方向映射并垂直于该顶点的法线和比特。我在下面发布了一些屏幕截图来说明我的问题：

上图显示了使用＆＃34; THREE.PlaneGeometry＆＃34;创建的网格上显示的CORRECT切线。网格的所有切线都指向同一方向。 （网格为40 x 40，有4个高度段和4个宽度段。切线长10个单位。）

上图显示了使用＆＃34; THREE.BoxGeometry＆＃34;创建的网格上显示的INCORRECT切线。沿着边缘的切线不与其所尊重的面的切线对齐。 （网格为40 x 40 x 40，每个面有4个高度段和4个宽度段。切线长10个单位。）

可以解释这种不一致的原因？问题是＆＃34; computeTangents＆＃34;代码或在＆＃34; VertexTangentsHelper＆＃34;码？或者还有其他我没有考虑过的东西？我使用three.js re70。

Answer 1

THREE.VertexTangentsHelper没有任何问题。

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

最简单的BoxGeometry有8个顶点，但有12个面。应用于BoxGeometry时唯一可行的方法是，如果框的每个角落的顶点都是重复的，而不是共享的。

three.js r.70