网页三维CAD参数化建模开发框架的搭建教程
ccwgpt 2024-11-01 11:23 41 浏览 0 评论
前言
mxcad3d是基于mxdraw的基础上，使用TypeScript和C++语言开发的一个网页三维CAD参数化建模框架，我们为开发者提供了丰富的参数化建模的开发接口，用户可以高效、便捷的对基本图元进行创建、同时丰富的JS开发接口方便了用户实现复杂的模型创建和CAD二次开发，网页测试DEMO链接如下：在线CAD梦想画图。
功能简介
参数化创建：方块、圆柱、圆锥、球体、圆环、楔形、拉伸、旋转体、放样、管道等。
几何运算： 形位变换、平移、缩放、旋转、镜像。
布尔运算：交集、差集、并集、相交轮廓。
倒角运算：圆角、斜角。
几何绘线：直线、圆、椭圆、双曲线、抛物线、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(`/node_modules/mxcad/dist/wasm/3d/${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，打开网页.如下图：
以上代码会创建一个MxCAD3DObjectl类型的对象mxcad3d，并在初始化完成后输出一条消息，mxcad3d代表的是一个文档视图对象，能把创建的模型数据保存到文档，并且显示到视图上。此时你将会在浏览器中看到一个三维视图窗口，如下图：
绘制方块
要在视图中绘制一个方块，可以通过以下代码实现：
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(`/node_modules/mxcad/dist/wasm/3d/${fileName}`, import.meta.url).href,
})
// 初始化完成
mxcad3d.on("init", ()=>{
console.log("初始化完成");
createButton("绘制方块", drawBox);
});以上代码新增了一个名为drawBox的函数，该函数会在画布中绘制一个方块。通过创建一个按钮，并在按钮的单击事件中调用drawBox函数，可以触发方块的绘制。
通过以上步骤，你可以在浏览器中看到一个带有三维视图窗口的页面，点击"绘制方块"按钮，即可在视图中绘制一个方块，如下图所示：
mxcad3d提供了强大的功能和灵活的开发接口，通过这些接口能够创建更多复杂的三维模型。
相关推荐
- Android开发基础入门(一):UI与基础控件
-
Android基础入门前言：从今天开始，我们开始分享Android客户端开发的基础知识。一、工具指南工欲善其事必先利其器，我们首先介绍一下开发Android常用的集成开发环境。小雨在上大学期间，开发a...
- 谷歌Material Design质感设计UI开发框架
-
谷歌MaterialDesign质感设计是一个新的用户界面设计概念，即将到来的Android版本称为“AndroidL”中会使用这种设计语言。在这篇文章中,我们收集出最新的和最好的Android...
- Android主流UI开源库整理（android 开源ui）
-
前言最近老大让我整理一份Android主流UI开源库的资料，以补充公司的Android知识库。由于对格式不做特别限制，于是打算用博客的形式记录下来，方便查看、防丢并且可以持续维护、不断更新。标题隐...
- 系统工具类App的开发框架（系统开发方法工具）
-
系统工具类App的开发框架选择，很大程度上取决于目标平台（Android、iOS或两者兼有），以及对性能、系统级访问深度和开发效率的需求。由于这类App常常需要深入操作系统底层，因此原生开发框架通常是...
- 2025年vue前端框架前瞻（vue前端开发规范手册）
-
Vue是一个轻量且灵活的JavaScript框架，广受开发者喜爱，因其简单易用的API和组件化的开发方式而闻名。Vite是一个现代化的前端构建工具，以其极快的开发服务器启动速度和热模块替换...
- 前端流行框架Vue3教程:28. Vue应用
-
28.Vue应用应用实例每个Vue应用都是通过createApp函数创建一个新的应用实例main.jsimport{createApp}from'vue'import...
- 2024 Vue 最全的生态工具组合推荐指南
-
Vue3虽然Vue2很多项目在用，但是官方已经宣布不再维护Vue2，所以新项目肯定首选Vue3来进行开发，组合式API开发起来比选项式API方便多了，而且Vue3的响应式实现也更...
- 基于 Vue3 Element Plus 的中后台管理系统模板
-
PureAdmin是一个开源的前端中后台管理系统模板，基于Vue3、Element-Plus，支持移动端、国际化、多主题设置，支持前端静态路由、后端动态路由配置，旨在为开发人员提供一个易于使用、高...
- 重磅!滴滴开源全新跨端小程序框架，基于 Vue 3!
-
最近，滴滴出行开源了自主研发的全新轻量级跨端小程序框架——星河(Dimina)，为开发者提供了“一次开发，多端运行”的高性能、低门槛解决方案。下面就来一览Dimina的魅力！什么是星河(Dim...
- 【推荐】一款基于 Vue + .NET 8 开源、免费、功能强大的快速开发框架
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍Vue.NetCore是一款集高效、灵活、易于扩展于一体的快速开发框架（基于Vue提供Vue2/Vue...
- 搭建Trae+Vue3的AI开发环境（vue ide 开发工具）
-
从2024年2025年，不断的有各种AI工具会在自媒体中火起来，号称各种效率王炸，而在AI是否会替代打工人的话题中，程序员又首当其冲。作为一个后端开发，这篇文章基于Trae工具，来创建和运行一个简单的...
- 一款基于 Vue + .NET 8 开源、免费、功能强大的快速开发框架
-
项目介绍Vue.NetCore是一款集高效、灵活、易于扩展于一体的快速开发框架（基于Vue提供Vue2/Vue3版本和.NET8前后端分离），适用于多种应用场景。通过前后端分离的设计、强大的...
- 盘点一下这些年PHP在桌面应用方面的解决方案
-
今天作者给大家盘点一下近些年PHP在实现桌面客户端方面的项目。PHP-GTKPHP-GTK是2001年3月创立，是PHP的一个扩展，实现了与GTK+的绑定，提供面向对象的接口，极大地简化了客户端跨平台...
- PHP+Uniapp校园圈子系统校园论坛小程序开发:踩坑与优化经验分享
-
一、系统架构与技术选型1.架构设计采用前后端分离架构，前端使用Uniapp实现跨端开发（支持微信小程序、H5、App），后端基于PHP（推荐ThinkPHP或Laravel框架）提供RESTful...
- 智能匹配+安全护航:PHP代练系统护航小程序如何提升用户信任?
-
在代练行业中，用户信任是平台发展的核心要素。基于PHP后端与uni-app跨端框架的代练系统，通过智能匹配与安全护航两大核心策略，能够有效提升用户信任，构建健康可持续的代练生态。以下从技术实现与用户体...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- beego框架 (52)
- grpc框架 (55)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)