在three.js中更新bufferGeometry中的法线答案

【问题标题】：updating normal in bufferGeometry in three.js在three.js中更新bufferGeometry中的法线
【发布时间】：2017-09-22 12:34:04
【问题描述】：

我有两个在一端相交的圆柱体。我可以单独更改交叉点的半径，但它们仍然在一端相遇，如下所示。但是，我希望这两者之间的交点是平滑的，或者换句话说，它们在交点中的法线要像这里提到的那样共享：http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-9-vbo-indexing/。我已将法线更新设置为 TRUE，并将法线的所有 y 分量在交点处更改为零。它仍然没有显示出平滑的交叉点。这两个圆柱体是用BufferGeometry制作的。

所以我的部分代码更重要：1- 因为几何是 BufferGeometry，所以我首先使用下面的两个命令为两个几何创建法线：

comp.mesh.geometry.computeFaceNormals();
comp.mesh.geometry.computeVertexNormals();

2- 然后由于两个几何图形的顶点数相同，我将所有顶点的 y 分量设置为 0：

for (i=0;i<comp.mesh.geometry.attributes.position.array.length;i++){
comp.mesh.geometry.attributes.normal.array[i*3 + 1]  = 0;
comp1.mesh.geometry.attributes.normal.array[i*3 + 1]  = 0;
}

当我让程序显示法线时，它们的法线 y 分量为 0，但几何图形还不平滑。

【问题讨论】：

显示您的代码。
谢谢韦斯特兰利。请查看添加链接中的代码。
请在您的帖子中分享您的代码（最好是sn-p）。如果 jsfiddle 曾经被删除，那么您的问题的上下文就会随之消失。

标签： three.js buffer-geometry

【解决方案1】：

我认为唯一可行的方法是焊接这些点。您需要检查重复项，并为它们分配相同的索引。使用这些不定数进行三角测量和顶点法线计算。

【讨论】：

只要法线调整正确，从技术上讲，您不需要组合几何图形。这是一个示例，其中两个单独的网格几乎没有接触，但看起来很平滑，因为我调整了它们的法线。 jsfiddle.net/TheJim01/gnoxeoem
您明确设置它们，如果您知道它们需要什么就可以了。对于更通用的解决方案，您需要以某种方式告诉那里的顶点他们需要平均哪些面。
我更新了我的示例来计算它们。当然，我的例子是一个非常简单的例子。对于像 Hesamoy 正在尝试做的事情，需要收集一个位置的所有顶点的法线，对它们进行平均，然后将平均值应用于缓冲区中所有引用的法线位置。甚至可以使用现有的索引来提供帮助。是的，可以通过删除重复项来提高缓冲区的效率，但它仍然需要做一堆叉积来获取法线刚刚失效的顶点的所有面法线。最好不要单独使用索引。