介绍
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
创建设计
现在我们准备好了开始构建我们的设计了。我们将创建一个正方形，在正方形的中央创建一个小圆和一个掏空的圆环。首先，我们需要导入我们的库和其他必要的依赖项：
const makerjs = require('makerjs'); const Easel = require('makerjs-easel-api').Easel; const SETTINGS = { SQUARE_SIZE: 10, HOLE_SIZE: 5, RING_SIZE: 2, }
现在，我们定义了一些基本的设置，包括正方形尺寸、掏空正方形的圆环尺寸、尺寸。
接下来，我们将开始创建实际的图形构建。
创建正方形
我们通过Maker.js创建正方形，可以这样实现：
const square = new makerjs.models.Square(SETTINGS.SQUARE_SIZE);
创建小圆
要创建中央的小圆，需要使用 Circle 模型，如下：
const circle = new makerjs.models.Circle(SETTINGS.HOLE_SIZE / 2);
同时，我们还需要将圆的位置设置为正方形的中心，我们可以通过以下代码实现：
makerjs.model.move(circle, [SETTINGS.SQUARE_SIZE / 2, SETTINGS.SQUARE_SIZE / 2]);
此时，小圆将被放置在正方形的中央。
创建圆环
创建圆环需要用到 Path 模型。我们首先需要创建路径点：
const ring = new makerjs.models.ConnectTheDots(false, [[0,0], [0,1], [1,1], [1,0]]);
这些点位于0到1之间的单位矩形内。我们可以通过以下代码将路径点移动到正方形的中央：
makerjs.path.moveRelative(ring, [SETTINGS.SQUARE_SIZE / 2, SETTINGS.SQUARE_SIZE / 2]);
接下来，我们需要移除内部的圆形。我们可以使用 combineIntersection 来实现：
makerjs.model.combineIntersection(ring, circle, true, true, true, true);
现在，我们已经创建了一个掏空的圆形，并且圆形的中央是完全透明的。
将模型组合起来
现在，我们已经创建了三个模型：正方形、小圆和圆环。接下来，我们将它们组合在一起，形成一个单独的模型。
我们可以使用 combineUnion 来实现模型组合，如下：
const model = makerjs.model.combineUnion([ square, circle, ring, ]);
此时，我们的三个模型都被组合在一起。接下来我们需要在 Inventables Easel 上用这个模型来制造我们的物品。
建造
要将我们的设计生成为实际物品，我们可以在 Inventables Easel 创建一个新的项目。在创建项目的过程中，我们需要注意以下两点：
我们必须将我们的设计文件格式转换成 SVG。
我们必须将我们的设计文件上传到 Easel 的服务器上。
首先，我们可以使用 Maker.js generateSvg 来将我们的设计输出为 SVG 文件，如下：
const svg = makerjs.exporter.toSVG(model);
现在，我们已经将我们的设计转换成了 SVG 格式。接下来，我们可以使用 Easel API 来将我们的设计上传到 Easel 的服务器上。
-- -------------------- ---- ------- ----- ----- - --- ------- ------ ------------------ --- --------------------- --- -- ----- ---- -- - -- ----- - ------------------------ ----- ------- - ----------------------- ---展开代码
在这个例子中，我们使用了 easel.uploadProject 将我们的SVG文件上传到 Easel 的服务器上。
接下来，我们就可以在 Easel 的网站上打开我们的设计文件，以进行切割、刻印、雕刻等操作了。
示例代码
下面是完整的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----- - ----------------------------------- ----- -------- - - ------------ --- ---------- -- ---------- -- - ----- ------ - --- -------------------------------------------- ----- ------ - --- ---------------------------------------- - --- -------------------------- --------------------- - -- -------------------- - ---- ----- ---- - --- ------------------------------------ ------- ------ ------ -------- ------------------------------- --------------------- - -- -------------------- - ---- --------------------------------------- ------- ----- ----- ----- ------ ----- ----- - ---------------------------- ------- ------- ----- --- ----- --- - ------------------------------ ----- ----- - --- ------- ------ ------------------ --- --------------------- --- -- ----- ---- -- - -- ----- - ------------------------ ----- ------- - ----------------------- ---展开代码
结语
makerjs-easel-api 是一个非常有用的工具，可以帮助开发者更轻松地在 Inventables Easel 上构建复杂的三维模型。虽然这个库可能需要一些时间来学习和掌握，但一旦你学会了如何使用它，就能够极大地提高您的3D建模和制造工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab681e8991b448d8500
