网页三维CAD参数化建模开发框架的搭建教程
ccwgpt 2024-11-01 11:23 29 浏览 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提供了强大的功能和灵活的开发接口，通过这些接口能够创建更多复杂的三维模型。
相关推荐
- css布局方案汇总(28个实例图文并茂)
-
简介布局在我们前端日常开发来说是非常重要的，一个好的布局能简化代码的同时还能提高网页的性能。常见的布局方法有浮动(float)布局、绝对定位(position)布局、表格布局(table)、弹性(fl...
- 十款免费的CSS框架加速Web开发
-
Pure这是Yahoo最新推出的一款CSS框架，它只有HTML和CSS，没有使用任何JavaScript语言。总大小只有4.4kb，但功能却非常丰富，支持响应式样式和各种导航、表格、表单、按钮、网格和...
- Tailwind CSS 是不是目前世上最好的CSS框架?
-
转载说明：原创不易，未经授权，谢绝任何形式的转载今天看了一篇国外大佬对TailwindCSS的看法，在这里分享给大家，看看大家是否赞同，以下是其相关内容的整理，由于翻译水平有限，欢迎大家讨论和指...
- 下一代 CSS 框架:Mojo CSS，为何如此受欢迎?
-
TailwindCSS推出即受到广大开发者的欢迎，当前Githubstar数已达77.8k。它是一个功能类优先（utility-first）的CSS框架，它提供了一系列功能类，让开发者...
- 常见的几种摄影构图方式
-
摄影构图，是一种在摄影画面中表现结构美、形式美的方式。构图能让摄影主体更加突出，画面更加有序。所以说，构图在摄影中是非常重要的一个环节。无论是前期构图还是后期构图，摄影者都要对构图有一个比较深的了解。...
- 风光摄影10大构图技巧，会用构图，照片更容易好看
-
风光摄影10大构图技巧，会用构图，照片更容易好看先解释一下，为什么会使用构图之后，照片更容易好看？因为，构图是根据很多好看的照片，总结出来的技巧，使用这些构图技巧，就相当于站在了巨人的肩膀上，也就是用...
- 掌握框式构图的摄影技巧，会让摄影爱好者的作品更有魅力!
-
很多摄影爱好者都知道摄影构图中有个框式构图，但大多数人对框式构图的摄影技巧，却一知半解。所以摄影爱好者们有必要更全面、深入的了解，并掌握框式构图，会对你摄影水平的提高更有帮助。【欢迎点击上方关注：金立...
- 这个构图很简洁，但为什么不耐看?
-
摄影爱好者最常犯的错就是过于复杂、主体不明确，但当遇到简单的场景往往又会出现单调、不耐看的状况。为什么会这样？说白了还是观察力不够。下面是本周的摄影入围习作，我们一起来看看这些照片中主体、陪体以及背景...
- 初学者需要记牢的八种常用构图法
-
作者：冯海军摄影中，构图很关键，决定照片是否成功，所以在构图上要加以重视和推敲，虽然说构图无定法，但是也有很多的规律可循，以下列举几种常用构图，会对初学者有很大的帮助。多彩刘卫洲摄苏州姑苏俱乐部（...
- 构图这件事不难!掌握14种构图模式就稳了
-
如果说视觉元素是视觉信息的载体，那么构图就是视觉元素的载体。没有适当形式的构图对视觉元素有机、有序地承载，平面设计将无法传达预定的设计意图和视觉信息。因此，对于平面设计而言，构图是平面设计不可或缺的重...
- 框架构图如何使用?
-
1分钟教你用手机拍大片。今天我们利用框架构图，在不同的运镜方法下拍摄。·首先将手机贴近地面，拍摄人物走过的画面。·然后利用3D效果的背景衬托，将手机贴近地面，以低角度仰拍人物。·最后我们用高清画质来呈...
- 面构图的5种超实用的构图形式 前景构图，框架构图，填充构图
-
面构图的5种超实用的构图形式。为什么有的人拍摄的照片好看又舒适？仔细观察会发现他们善用构图。大家好，今天带大家了解摄影中5种超实用的面构图形式。·一、前景构图。前景是构图中的神奇要素，可以提升照片的表...
- 一看就懂!跟着马格南的大师学构图
-
马格南图片社是迄今为止全球最重要的摄影图片社，其网站包涵了太多经典的名字和照片。细细品味这些经典图片，能够学到很多有用的构图手法。跟着大师走，总不会错吧？前后景的运用这似乎是非常常见的一种手法，仔细看...
- 这才是框架构图，有想法!能给你启发么?
-
框架构图大家并不陌生，但并不是有一个框就行了。框架构图用得不好，就很死板生硬，给人感觉很假。如果你理解透了，拍出的作品不会单调。今天就给大家分享一下框架构图，你看看有哪些妙用？1.广角与长焦的应用长焦...
- 7B小模型写好学术论文，新框架告别AI引用幻觉
-
ScholarCopilot团队投稿量子位|公众号QbitAI学术写作通常需要花费大量精力查询文献引用，而以ChatGPT、GPT-4等为代表的通用大语言模型（LLM）虽然能够生成流畅文本，但...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 若依框架 (41)
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- scrapy框架 (52)
- beego框架 (42)
- java框架spring (43)
- grpc框架 (55)
- 前端框架bootstrap (42)
- orm框架有哪些 (43)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle v (42)
- oracle字符串长度 (48)
- oracle提交事务 (47)