在 TS 中使用 Manifold 建模

一 Manifold 是什么

1.1 简介

Manifold 是一个几何处理库，专注于高效、可靠的布尔运算和几何操作。它主要用于3D建模和计算几何领域，提供了高性能的几何算法，适用于需要精确几何计算的应用场景。

1.2 主要特点

1. 高效的布尔运算：Manifold 提供了高效的布尔运算功能，包括并集(Union)、交集(Intersection)和差集(Difference)。这些运算可以用于创建复杂的几何形状。
2. 几何修复和优化：Manifold 可以修复和优化几何体，确保几何体的拓扑结构正确，并提高几何体的质量。
3. 多种几何操作：Manifold 支持多种几何操作，如平滑、细分、简化等，可以用于修改和优化几何体。
4. 高精度几何计算：Manifold 提供高精度的几何计算，适用于需要精确结果的应用，如3D打印、CAD设计等。

1.3 应用场景

1. 3D建模和设计：用于创建和编辑三维模型。
2. CAD/CAM（计算机辅助设计/制造）：用于设计和制造复杂的机械零件和装配。
3. 科学计算和仿真：用于模拟和分析复杂的几何形状。
4. 游戏开发：用于生成和处理游戏中的三维场景和物体。
5. 虚拟/增强现实（V/AR）：用于创建虚拟和增强现实环境中的三维对象。

1.4 优势

1. 高效性：Manifold提供了高效的几何算法，能够快速处理复杂的几何运算。
2. 可靠性：Manifold专注于精确的几何计算，确保结果的准确性和可靠性。
3. 易用性：Manifold提供了简洁的API，易于集成和使用。

二 在 TS 中引用

Manifold 是一个开源的C++项目，github地址：https://github.com/elalish/manifold 也编译发版了 JS 和 python 版本，在 TypeScript 项目中，可以通过 npm 安装，npm包地址：https://www.npmjs.com/package/manifold-3d

本文将详细介绍如何在 Visual Studio Code (VSCode) 中配置一个 TypeScript 项目，并使用 Manifold 几何库进行建模。

1. 安装 Node.js 和 npm

首先，确保你已经安装了 Node.js 和 npm（Node Package Manager）。你可以从 Node.js 官网 下载并安装最新版本。

2. 初始化 npm 项目

在你的项目目录中打开终端，然后运行以下命令来初始化一个新的 npm 项目：

npm init -y

这将创建一个 package.json 文件，其中包含项目的基本信息。

3. 安装 TypeScript 和 Manifold

接下来，安装 TypeScript 和 manifold-3d 包：

npm install typescript --save-dev
npm install manifold-3d

4. 创建 tsconfig.json 文件

在项目根目录下创建一个 tsconfig.json 文件，这是 TypeScript 的配置文件。你可以使用以下命令自动生成一个默认的 tsconfig.json 文件：

npx tsc --init

然后编辑 tsconfig.json 文件，确保配置如下：

{
  "compilerOptions": {
    "target": "es6",                          // 指定 ECMAScript 目标版本
    "module": "NodeNext",                     // 指定模块系统
    "strict": true,                           // 启用所有严格类型检查选项
    "esModuleInterop": true,                  // 启用与 ES 模块的互操作性
    "skipLibCheck": true,                     // 跳过声明文件的类型检查
    "forceConsistentCasingInFileNames": true, // 强制文件名一致
    "outDir": "./dist",                       // 输出目录
    "rootDir": "./src",                       // 输入目录
    "moduleResolution": "NodeNext"            // 模块解析策略
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

5. 创建项目结构

在项目根目录下创建一个 src 文件夹，并在其中创建一个示例 TypeScript 文件，例如 index.ts：

// src/index.ts
import Module, { ManifoldToplevel } from 'manifold-3d';

async function init() {
    // 初始化 Manifold
    const model: ManifoldToplevel = await Module();

    // 调用 setup 函数进行初始化，配置 WASM 模块、设置默认参数或执行其他初始化任务
    model.setup();

    await getModel(model);
}
init().catch(console.error);

async function getModel(model: ManifoldToplevel) {

    const { CrossSection } = model;
    const { cube, sphere } = model.Manifold;

    // 创建一个边长为100的立方体，中心对齐
    const box = cube([100, 100, 100], true);
    // 创建一个半径为60的球体，细分级别为100
    const ball = sphere(60, 100);
    // 对立方体进行布尔减法运算，减去球体
    const result = box.subtract(ball);
    // 平移结果几何体
    const movedResult = result.translate([50, 0, 0]);
    // 旋转结果几何体
    const rotatedResult = result.rotate(Math.PI / 4, [0, 1, 0]);
    // 缩放结果几何体
    const scaledResult = result.scale([2, 2, 2]);

    // 获取几何体的网格
    const mesh = result.getMesh();

    // 获取几何体的属性
    let prop = result.getProperties();

    console.log('mesh:', mesh);
    console.log('Vertices:', mesh.vertProperties);
    console.log('Indices:', mesh.triVerts);
    console.log('Volume:', prop.volume);
    console.log('Surface Area:', prop.surfaceArea);
    console.log('genus:', result.genus());

    // 定义一个矩形截面
    const vertices = [
        [0, 0],
        [100, 0],
        [100, 50],
        [0, 50]
    ];
    const edges = [
        [0, 1],
        [1, 2],
        [2, 3],
        [3, 0]
    ];

    // 创建截面
    const crossSection = new CrossSection(vertices, edges);

    // 拉伸截面生成一个三维几何体
    const extrudedShape = crossSection.extrude(100);

    // 旋转截面生成一个三维几何体
    const revolvedShape = crossSection.revolve(Math.PI * 2, [0, 0, 1]);

    console.log('Extruded Shape:', extrudedShape);
    console.log('Revolved Shape:', revolvedShape);
}

6. 配置 VSCode

确保你已经安装了 VSCode 的 TypeScript 插件。通常，VSCode 自带 TypeScript 支持，但你可以安装额外的插件来增强体验，例如：

• ESLint
• Prettier - Code formatter

7. 添加构建脚本

在 package.json 文件中添加一个构建脚本，以便你可以轻松地编译 TypeScript 代码：

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

8. 编译和运行

在终端中运行以下命令来编译 TypeScript 代码：

npm run build

编译完成后，你可以运行以下命令来执行生成的 JavaScript 代码：

npm start

通过以上步骤，你应该能够在 TypeScript 项目中成功使用 Manifold 几何库进行建模。

9. 接口说明

Manifold 提供了一系列接口用于创建和操作几何体，以下是一些常见的建模接口和功能。

9.1 基本几何体创建

• cube：创建一个立方体。

const box = cube([width, height, depth], center);

• width, height, depth：立方体的尺寸。

• center：是否中心对齐（布尔值）。

• sphere：创建一个球体。

const ball = sphere(radius, segments);

• radius：球体的半径。

• segments：球体的细分级别。

• cylinder：创建一个圆柱体。

const cyl = cylinder(radius, height, segments, center);

• radius：圆柱体的半径。

• height：圆柱体的高度。

• segments：圆柱体的细分级别。

• center：是否中心对齐（布尔值）。

• cone：创建一个圆锥体。

const cone = cone(baseRadius, topRadius, height, segments, center);

• baseRadius：底部半径。

• topRadius：顶部半径。

• height：圆锥体的高度。

• segments：圆锥体的细分级别。

• center：是否中心对齐（布尔值）。

• CrossSection：创建一个截面对象。

const crossSection = new CrossSection(vertices, edges);

• vertices：二维坐标的数组，每个顶点由 [x, y] 坐标对表示。
• edges：边是顶点索引的数组，每个边由两个顶点索引对表示。

9.2 布尔运算

• subtract：布尔减法运算。

const result = shape1.subtract(shape2);

• shape1：被减的几何体。

• shape2：减去的几何体。

• union：布尔并集运算。

const result = shape1.union(shape2);

• shape1：第一个几何体。

• shape2：第二个几何体。

• intersect：布尔交集运算。

const result = shape1.intersect(shape2);

• shape1：第一个几何体。
• shape2：第二个几何体。

9.3 变换操作

• translate：平移几何体。

const movedShape = shape.translate([dx, dy, dz]);

• dx, dy, dz：平移的距离。

• rotate：旋转几何体。

const rotatedShape = shape.rotate(angle, [ax, ay, az]);

• angle：旋转的角度（弧度）。

• ax, ay, az：旋转轴。

• scale：缩放几何体。

const scaledShape = shape.scale([sx, sy, sz]);

• sx, sy, sz：缩放比例。

9.4 建模操作

• extrude：拉伸几何体。

const extrudedShape = shape.extrude(height);

• height：拉伸的高度。

• revolve：旋转生成几何体。

const revolvedShape = shape.revolve(angle, [ax, ay, az]);

• angle：旋转的角度（弧度）。

• ax, ay, az：旋转轴。

• loft：放样生成几何体。

const loftedShape = loft([shape1, shape2, ...]);

• shape1, shape2, ...：用于放样的截面几何体。

9.5 几何属性查询

• volume：计算几何体的体积。

const vol = shape.getProperties().volume;

• surfaceArea：计算几何体的表面积。

const area = shape.getProperties().surfaceArea;

• mesh：计算几何体的网格。

const mesh = shape.getMesh();

---

在线测试网站 manifoldcad：https://manifoldcad.org/