前言
three-simplicial-complex 是一个基于 three.js 的 npm 包，它提供了一种简洁的方式来绘制三角剖分。学习使用此包能够增加我们对 three.js 库的理解，并且在需要绘制三角剖分时可以提高开发效率。
安装
在使用此包之前，我们需要在项目中使用 npm 安装三个依赖包：three、d3 和 three-simplicial-complex。
npm install three d3 three-simplicial-complex
基本用法
在导入三个依赖包并进行简单配置后，我们只需要传入一个三角剖分数据就可以绘制一个三角剖分的三维图形。
-- -------------------- ---- ------- ------ - -- ----- ---- -------- ------ - -- -- ---- ----- ------ - ----------------- - ---- --------------------------- ----- ----- - ------------------ ----- ------ - ------------------- ----- ----- - --- -------------- ----- ------ - --- --------------------------- ----- - ------- ---- ------ ----- -------- - --- ---------------------- ----------------------- -------- ----------------------------------------------- ----- -------- - - --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- -- ----- ------- - - --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- --- -- --- -- ----- ------------ - --------------------------- --------- ----- -------- - --- ----------------------- ---------------------- ----------- --- --------------------------------------------- -- -- --------------------- ----------------------------------------- ---- -------------------------------- ----- -------- - --- --------------------------- ------ -------- --- ----- ---- - --- -------------------- ---------- ---------------- ----------------- - -- ----------------- - -- ----------------------------- ----- ----- - --- -------------------------- -- ----- --------------------- -- --- ----------------- ----- ------- - -- -- - ------------------------------- ---------------------- -------- -- ----------
深入学习
three-simplicial-complex 的底层是基于 d3 三角剖分算法库实现的。所以我们同样可以使用 d3 三角剖分算法库来生成数据。
三角剖分算法是将平面或超平面分为多个三角形或简单形式的集合的算法。在二维平面中，计算几何问题中采用的三角形剖分一般都是 Delaunay 三角剖分或者 Bowyer-Watson 算法。在三维空间中，很多三角剖分算法都是通过对平面投影来实现的，比如：Delaunay 三角剖分、Bowyer-Watson 算法和 Greedy Insertion（贪心插入法）等。
此处我们以 d3 三角剖分算法为例：
-- -------------------- ---- ------- ------ - -- ----- ---- -------- ------ - -- -- ---- ----- ------ - ----------------- - ---- --------------------------- ----- ----- - ------------------ ----- ------ - ------------------- ----- ----- - --- -------------- ----- ------ - --- --------------------------- ----- - ------- ---- ------ ----- -------- - --- ---------------------- ----------------------- -------- ----------------------------------------------- ----- ------ - - ----- ---- ----- ----- ---- ----- ----- ---- ----- ----- ---- ----- -- ----- -------- - ------------------------- ----- ------------ - ------------------ ---------------- --------------------------- -- ----- -------- - --- ----------------------- ---------------------- ----------- --- --------------------------------------------- -- -- --------------------- ----------------------------------------- ---- -------------------------------- ----- -------- - --- --------------------------- ------ -------- --- ----- ---- - --- -------------------- ---------- ---------------- ----------------- - -- ----------------- - -- ----------------------------- ----- ----- - --- -------------------------- -- ----- --------------------- -- --- ----------------- ----- ------- - -- -- - ------------------------------- ---------------------- -------- -- ----------
结尾
three-simplicial-complex 提供了一种方便快捷的方式，我们可以用简单的几行代码绘制三角剖分效果，并很好地展示了如何将三角剖分数据传递给 three.js 作为缓存几何体。
希望本篇文章对大家在学习 three.js 库以及三角剖分算法时有所帮助。为了深度学习，我们可以探究更多的三角剖分算法和修改 npm 包的源代码等。以下是用 react 封装的一个例子，仅供参考。
-- -------------------- ---- -------
------ ------ - ------- --------- - ---- --------
------ - -- ----- ---- --------
------ - -- -- ---- -----
------ - ----------------- - ---- ---------------------------
----- --------------- - -- -- -
----- --------- - -------------
----- ------- - -- -- -
-------------------------------
-------------------------------------- ----------------
--
------------ -- -
----- ----- - ------------------
----- ------ - -------------------
----- ----- - --- --------------
----- ------ - --- --------------------------- ----- - ------- ---- ------
----- -------- - --- ----------------------
----------------------- --------
---------------------------------------------------
----- ------ - -
----- ---- -----
----- ---- -----
----- ---- -----
----- ---- -----
--
----- -------- - -------------------------
----- ------------ - ------------------
----------------
---------------------------
--
----- -------- - --- -----------------------
----------------------
-----------
--- --------------------------------------------- --
--
--------------------- ----------------------------------------- ----
--------------------------------
----- -------- - --- --------------------------- ------ -------- ---
----- ---- - --- -------------------- ----------
----------------
----------------- - --
----------------- - --
-----------------------------
----- ----- - --- -------------------------- -- -----
--------------------- -- ---
-----------------
----------
------ -- -- -
---------------------------------------------------
--
-- ----
------ ---- --------------- ---
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64842