介绍
Maker.js 是一个用于创建CAD和CAM应用程序的JavaScript库。该库提供了一些基本的图形构建元素，包括线段、圆弧、线、路径等等，可以帮助开发者更加轻松地实现3D模型的设计和制造。而 easel-api 则是 makerjs 的一个npm包，为 makerjs 提供了基于 Inventables Easel API 的功能扩展。
在本篇文章中，我们将学习如何使用 makerjs-easel-api 这个npm包，以及如何在 Inventables Easel 上构建我们的图形模型。
安装
要使用 makerjs-easel-api，您需要先安装 Node.js 和 npm。安装完成后，可以通过以下命令来安装 makerjs-easel-api：
npm install makerjs-easel-api
创建设计
现在我们准备好了开始构建我们的设计了。我们将创建一个正方形，在正方形的中央创建一个小圆和一个掏空的圆环。首先，我们需要导入我们的库和其他必要的依赖项：
----- ------- - ------------------- ----- ----- - ----------------------------------- ----- -------- - - ------------ --- ---------- -- ---------- -- -
现在，我们定义了一些基本的设置，包括正方形尺寸、掏空正方形的圆环尺寸、尺寸。
接下来，我们将开始创建实际的图形构建。
创建正方形
我们通过Maker.js创建正方形，可以这样实现：
----- ------ - --- --------------------------------------------
创建小圆
要创建中央的小圆，需要使用 Circle 模型，如下：
----- ------ - --- ---------------------------------------- - ---
同时，我们还需要将圆的位置设置为正方形的中心，我们可以通过以下代码实现：
-------------------------- --------------------- - -- -------------------- - ----
此时，小圆将被放置在正方形的中央。
创建圆环
创建圆环需要用到 Path 模型。我们首先需要创建路径点：
----- ---- - --- ------------------------------------ ------- ------ ------ --------
这些点位于0到1之间的单位矩形内。我们可以通过以下代码将路径点移动到正方形的中央：
------------------------------- --------------------- - -- -------------------- - ----
接下来，我们需要移除内部的圆形。我们可以使用 combineIntersection 来实现：
--------------------------------------- ------- ----- ----- ----- ------
现在，我们已经创建了一个掏空的圆形，并且圆形的中央是完全透明的。
将模型组合起来
现在，我们已经创建了三个模型：正方形、小圆和圆环。接下来，我们将它们组合在一起，形成一个单独的模型。
我们可以使用 combineUnion 来实现模型组合，如下：
----- ----- - ---------------------------- ------- ------- ----- ---
此时，我们的三个模型都被组合在一起。接下来我们需要在 Inventables Easel 上用这个模型来制造我们的物品。
建造
要将我们的设计生成为实际物品，我们可以在 Inventables Easel 创建一个新的项目。在创建项目的过程中，我们需要注意以下两点：
我们必须将我们的设计文件格式转换成 SVG。
我们必须将我们的设计文件上传到 Easel 的服务器上。
首先，我们可以使用 Maker.js generateSvg 来将我们的设计输出为 SVG 文件，如下：
----- --- - ------------------------------
现在，我们已经将我们的设计转换成了 SVG 格式。接下来，我们可以使用 Easel API 来将我们的设计上传到 Easel 的服务器上。
----- ----- - --- ------- ------ ------------------ ---
--------------------- --- -- ----- ---- -- -
-- ----- -
------------------------ -----
-------
-
-----------------------
---在这个例子中，我们使用了 easel.uploadProject 将我们的SVG文件上传到 Easel 的服务器上。
接下来，我们就可以在 Easel 的网站上打开我们的设计文件，以进行切割、刻印、雕刻等操作了。
示例代码
下面是完整的示例代码：
----- ------- - -------------------
----- ----- - -----------------------------------
----- -------- - -
------------ ---
---------- --
---------- --
-
----- ------ - --- --------------------------------------------
----- ------ - --- ---------------------------------------- - ---
-------------------------- --------------------- - -- -------------------- - ----
----- ---- - --- ------------------------------------ ------- ------ ------ --------
------------------------------- --------------------- - -- -------------------- - ----
--------------------------------------- ------- ----- ----- ----- ------
----- ----- - ----------------------------
-------
-------
-----
---
----- --- - ------------------------------
----- ----- - --- ------- ------ ------------------ ---
--------------------- --- -- ----- ---- -- -
-- ----- -
------------------------ -----
-------
-
-----------------------
---结语
makerjs-easel-api 是一个非常有用的工具，可以帮助开发者更轻松地在 Inventables Easel 上构建复杂的三维模型。虽然这个库可能需要一些时间来学习和掌握，但一旦你学会了如何使用它，就能够极大地提高您的3D建模和制造工作效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ab681e8991b448d8500