HarmonyOS 鸿蒙Next 网页三维CAD参数化建模开发框架的搭建教程

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 网页三维CAD参数化建模开发框架的搭建教程 前言

mxcad3d是基于mxdraw的基础上，使用TypeScript和C++语言开发的一个网页三维CAD参数化建模框架，我们为开发者提供了丰富的参数化建模的开发接口，用户可以高效、便捷的对基本图元进行创建、同时丰富的JS开发接口方便了用户实现复杂的模型创建和CAD二次开发，网页测试DEMO链接如下：https://demo.mxdraw3d.com:3000/mxcad3d/。

功能简介

  • 参数化创建：方块、圆柱、圆锥、球体、圆环、楔形、拉伸、旋转体、放样、管道等。
  • 几何运算： 形位变换、平移、缩放、旋转、镜像。
  • 布尔运算：交集、差集、并集、相交轮廓。
  • 倒角运算：圆角、斜角。
  • 几何绘线：直线、圆、椭圆、双曲线、抛物线、B样条曲线、Bezier曲线等的绘制。
  • 几何绘面：平面、B样条曲面、Bezier曲面的创建。

支持格式

step/stp，iges/igs，stl，obj，vrml/wrl，gltf等格式文件。

程序、运行

新建项目、安装依赖

首先，在某路径下新建一个文件夹TestMxCad3D作为项目文件夹，在TestMxCad3D 目录中打开cmd命令行程序运行以下命令来初始化项目并安装 vite和 mxcad。

npm init -y
npm install vite -D
npm install mxcad@latest

新建index.html文件

然后，在项目根目录下新建index.html文件，并绘制canvas画布，参考代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vite use mxcad</title>
</head>
<body>
<div style="height: 800px;"> <canvas id="myCanvas"></canvas></div>
</body>
</html>

新建index.ts文件

在src目录下新建index.ts文件（vite默认支持ts），代码如下：

import { MxCAD3DObject } from "mxcad"
// 创建mxcad3d对象
const mxcad3d = new MxCAD3DObject()
// 初始化mxcad3d对象
mxcad3d.create({
// canvas元素的css选择器字符串（示例中是id选择器），或canvas元素对象
canvas: "#myCanvas",
// 获取加载wasm相关文件(wasm/js/worker.js)路径位置
locateFile: (fileName) => new
URL(`/${fileName}`, import.meta.url).href,
})
// 初始化完成
mxcad3d.on("init", () => {
console.log("初始化完成");
});

index.html中引入index.ts

mxcad3d中的create()方法需要等canvas元素在页面加载完成后才能调用，因此需要将 script 标签放在 body 标签内部，让浏览器先完成HTML页面的解析，再下载并执行script标签中的代码。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vite use mxcad</title>
</head>
<body>
<div style="height: 800px; overflow: hidden;"> <canvas
id="myCanvas"></canvas></div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>

启动网页服务、运行网页

完成以上步骤后，运行下面的命令启动项目,输入命令：npx vite，打开网页.

绘制方块

要在视图中绘制一个方块，可以通过以下代码实现：

import { MxCAD3DObject, Mx3dMkBox, Mx3dGePoint } from "mxcad"
// 创建按钮
function createButton(text: string, fn: (...args) => void) {
const button = document.createElement("button");
button.innerText = text;
document.body.appendChild(button);
button.onclick = fn;
}
/**
* 绘制方块
*/
function drawBox()
{
// 获取文档
const doc = mxcad3d.getDocument();
const pt1 = new Mx3dGePoint(5, 5, 5);
const pt2 = new Mx3dGePoint(15, 15, 15);
// 构造BOX
const boxMaker = new Mx3dMkBox(pt1, pt2);
// 获取拓扑形状
const boxShape = boxMaker.Shape();
// 文档中创建一个标签
const boxLabel = doc.addShapeLabel();
// 添加拓扑形状到标签中
boxLabel.setShape(boxShape);
// 更新显示（会更新canvas中显示的模型）
mxcad3d.update();
}
// 创建mxcad3d示例对象
const mxcad3d = new MxCAD3DObject()
// 初始化
mxcad3d.create({
// canvas元素的css选择器字符串（示例中是id选择器），或canvas元素对象
canvas: "#myCanvas",
// 获取加载wasm相关文件(wasm/js/worker.js)路径位置
locateFile: (fileName) => new
URL(`/${fileName}`, import.meta.url).href,
})
// 初始化完成
mxcad3d.on("init", () => {
console.log("初始化完成");
createButton("绘制方块", drawBox);
});

以上代码新增了一个名为drawBox的函数，该函数会在画布中绘制一个方块。通过创建一个按钮，并在按钮的单击事件中调用drawBox函数，可以触发方块的绘制。

通过以上步骤，你可以在浏览器中看到一个带有三维视图窗口的页面，点击"绘制方块"按钮，即可在视图中绘制一个方块。


更多关于HarmonyOS 鸿蒙Next 网页三维CAD参数化建模开发框架的搭建教程的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 网页三维CAD参数化建模开发框架的搭建教程的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next上进行网页三维CAD参数化建模开发框架的搭建，你需要首先确保已安装并配置好鸿蒙开发环境。接下来，主要步骤包括：

  1. 选择或开发适合的Web渲染引擎：由于涉及到三维CAD建模，你需要一个能够支持WebGL或WebXR的渲染引擎，如Three.js等，这些引擎能够帮助你在网页上实现复杂的三维图形渲染。

  2. 集成参数化建模工具：为了实现参数化建模，你可能需要集成或开发一套参数化设计系统，该系统应支持用户通过调整参数来改变模型形状和尺寸。

  3. 构建用户界面：使用鸿蒙提供的UI组件或框架，设计并实现一个用户友好的界面，让用户能够方便地输入参数并查看建模结果。

  4. 测试与优化：在鸿蒙设备上测试你的应用，确保其在不同屏幕尺寸和性能配置的设备上都能流畅运行，并根据测试结果进行优化。

  5. 部署与发布：完成测试后，你可以将应用部署到鸿蒙应用市场中，供用户下载和使用。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部