three.js 病态切线与病态 VertexTangentsHelper答案

【问题标题】：three.js ill formed tangents vs ill formed VertexTangentsHelperthree.js 病态切线与病态 VertexTangentsHelper
【发布时间】：2015-02-07 04:32:19
【问题描述】：

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

【问题讨论】：

标签： javascript three.js

【解决方案1】：

THREE.VertexTangentsHelper 没有错。

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

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

three.js r.70

【讨论】：

感谢您向我解释@WestLangley 发生的事情。你统治！
问我如何改变“Geometry.computeTangents()”来计算未平均的切线并仍然让它计算手性并将该值存储在 w 组件中会不会太过分了对应的切线？
你必须自己做，对不起。你可以试试这个：( new THREE.ExplodeModifier ).modify( geometry ); geometry.computeTangents(); 查看examples/js/modifiers 目录。