three.js(13)-三角形面

Posted 2023-04-15

参考技术A 我们知道，两点确定一条直线，三点可以确定一个平面，也就是三角形面。
我们所看到的网格模型，实际上都是根据顶点坐标，绘制成一个个三角形面，然后拼接而成的。

那么如何自己实现一个面呢？

这样就实现了一个三角形。那如何实现一个完整的矩形呢？
三个点只能决定一个三角形，如果要画一个矩形，那就要再画一个三角形。
而我们给的顶点一共是4个，那前面4个画完了一个三角形，后面一个顶点找不到另外两个点，肯定是画不出来了。
一种办法是再给出两个顶点，但这样就太啰嗦了。我们可以指定一下顶点的索引位置。

我们把图形的顶点做个索引编号，其中0,1,2顶点可以确定一个三角形面，而2,3,0可以再确定一个三角形面，二者合起来就是一个完整的矩形了。

我们打印一下BoxGeometry信息。

其实faces放的就是索引信息，vertices放的是顶点，threejs已经给我们封装好了。这样我们可以按图索骥，自己实现一个正方体了。

Three.js - 变形几何和细化三角形网格

【中文标题】Three.js - 变形几何和细化三角形网格

【英文标题】：Three.js - morphing geometries and refining triangular meshes

【发布时间】：2013-06-25 12:11:00

【问题描述】：

我正在尝试使用 Three.js 将一种几何图形变形为另一种几何图形。这是我到目前为止所做的（请参阅http://stemkoski.github.io/Three.js/Morph-Geometries.html 以获取实时示例）。

我正在尝试从一个小的多面体变形为一个更大的立方体（三角化并以原点为中心）。动画是通过着色器完成的。较小多面体上的每个顶点都有两个关联的属性，即其最终位置和其最终 UV 坐标。为了计算每个顶点的最终位置，我从原点通过较小多面体的每个顶点进行光线投射，并找到与较大立方体的交点。为了计算最终的 UV 值，我使用了重心坐标和较大立方体相交面顶点处的 UV 值。

这导致了一次不可怕但不是很好的第一次尝试。由于（通常）较大立方体的任何顶点都不是较小多面体的任何顶点的最终位置，因此立方体表面的大块缺失。所以接下来我通过添加更多顶点来细化较小的多面体，如下所示：对于较大立方体的每个顶点，我将光线投射到原点，并且每条光线与较小多面体的一个面相交，我删除了那个三角形面并添加了点交叉点和三个较小的面来替换它。现在变形更好（这是上面链接的实时示例），但变形仍然没有填满立方体的整个体积。

我最好的猜测是，除了将较大立方体的顶点投影到较小的多面体上之外，我还需要投影边——如果 A 和 B 是由较大立方体上的边连接的顶点，那么投影较小的多面体上的这些顶点也应该通过边连接。但是，当然，投影边缘可能会跨越较小多面体的网格中的多个预先存在的三角形，需要添加多个新顶点，重新三角化等。看来我真正需要的是一种算法计算两个三角形网格的共同细化。有谁知道如上所述的变形（在具有不同三角化的两个网格之间）的这种算法和/或示例（带有代码）？

【参考方案1】：

事实证明，这是一个错综复杂的问题。在技​​术文献中，我感兴趣的算法有时被称为“地图叠加算法”；我正在构建的网格有时被称为“超级网格”。

我一直在阅读的关于这个问题的一些有用的作品包括：

网格变形：最新技术和概念。 博士。 Jindrich Parus 的论文 http://herakles.zcu.cz/~skala/MSc/Diploma_Data/REP_2005_Parus_Jindrich.pdf （第 4 章特别有用）

计算几何：算法和应用（书籍） 马克·德伯格等人 （第 2 章特别有用）

多面体对象的形状变换（文章） 计算机图形学, 26, 2, 1992 年 7 月 作者：James R. Kent 等人 http://www.cs.uoi.gr/~fudos/morphing/structural-morphing.pdf

我已经开始编写一系列演示来构建实现上述文献中讨论的算法所需的机制，以解决我最初的问题。到目前为止，这些包括：

网格的球面投影@http://stemkoski.github.io/Three.js/Sphere-Project.html 一个THREE.Geometry@http://stemkoski.github.io/Three.js/Topology-Data.html的拓扑数据结构

还有很多工作要做；随着我取得更多进展，我会定期更新此答案，并且仍然希望其他人有信息可以贡献！