网易首页 > 网易号 > 正文 申请入驻

WEB 3D CAD中创建三维建筑墙体(网页三维CAD SDK)

0
分享至

一、前言

1.本文将介绍如何使用mxcad3d来创建建筑墙体模型。该工具提供了丰富的三维建模功能和便捷的API,首先通过npm包管理器来新建测试项目并引入mxcad包,所以需要先安装Node.js,里面自带了npm包管理器 以及包含在npm包管理器中的npx工具 (用于启动运行我们的测试项目),Node.js下载和安装教程。

更多详细的教程公Z号:梦想云图网页CAD。

二、新建测试项目

1.在合适的位置创建本次教程的测试项目文件夹Test3dWall ,并在Test3dWall 文件夹中打开cmd命令行工具 ,依次输入以下指令来初始化项目并引入mxcad包。新建项目的方法也可以在官方的快速入门文档中找到,依次输入以下操作命令,如下图:

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



2.使用VS CODE打开新建的测试项目文件夹(VS CODE是一款好用的集成开发工具,如何安装这里不再赘述,下载地址:https://code.visualstudio.com/Download)





3.打开项目后,在项目目录下新建一个index.html文件以及一个src目录,然后在src目录下新建一个index.ts文件 并编写最基本的代码:

src/index.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("初始化完成");
});



三、运行测试

1.新建终端



2.开启服务



3.打开网页,查看效果



四、编写绘制建筑墙体的代码

1.墙体的二维平面设计图:



2.index.html中添加一个按钮(以下是index.html完整代码)(关注公众号:梦想云图网页CAD)

3.src/index.ts中添加绘制墙体的代码,给按钮添加点击事件来触发绘制墙体的代码执行,以下是src/index.ts完整代码:

import { MxCAD3DObject, Mx3dGePoint, Mx3dMkPolygon, Mx3dMkFace, Mx3dMkPrism, Mx3dGeVec, Mx3dGeColor, MdGe } 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("初始化完成");
});
function funDrawWall(){
// 外墙轮廓
const wallOutterPts: Mx3dGePoint[] = [];
wallOutterPts.push(new Mx3dGePoint(0, 0, 0));
wallOutterPts.push(new Mx3dGePoint(0, 4480, 0));
wallOutterPts.push(new Mx3dGePoint(5480, 4480, 0));
wallOutterPts.push(new Mx3dGePoint(5480, 0, 0));
const wallOutterPolygon = new Mx3dMkPolygon();
wallOutterPts.forEach((pt) => {
wallOutterPolygon.Add(pt);
});
wallOutterPolygon.Close();
const wallOutterWire = wallOutterPolygon.Wire();
const wallOutterMkFace = new Mx3dMkFace(wallOutterWire);
const wallOutterFace = wallOutterMkFace.Face();
// 内墙轮廓
const wallInnerPts: Mx3dGePoint[] = [];
wallInnerPts.push(new Mx3dGePoint(240, 240, 0));
wallInnerPts.push(new Mx3dGePoint(240, 4240, 0));
wallInnerPts.push(new Mx3dGePoint(5240, 4240, 0));
wallInnerPts.push(new Mx3dGePoint(5240, 240, 0));
const wallInnerPolygon = new Mx3dMkPolygon();
wallInnerPts.forEach((pt) => {
wallInnerPolygon.Add(pt);
});
wallInnerPolygon.Close();
const wallInnerWire = wallInnerPolygon.Wire();
const wallInnerMkFace = new Mx3dMkFace(wallInnerWire);
const wallInnerFace = wallInnerMkFace.Face();
// 墙体截面
const wallFace = wallOutterFace.cut(wallInnerFace);
// 拉伸墙体
const wallMkPrism = new Mx3dMkPrism(wallFace, new Mx3dGeVec(0, 0, 3000));
let wall = wallMkPrism.Shape();
// 开窗洞
const winPts: Mx3dGePoint[] = [];
winPts.push(new Mx3dGePoint(1990, 4240, 1000));
winPts.push(new Mx3dGePoint(1990, 4240, 2200));
winPts.push(new Mx3dGePoint(3490, 4240, 2200));
winPts.push(new Mx3dGePoint(3490, 4240, 1000));
const winPolygon = new Mx3dMkPolygon();
winPts.forEach((pt) => {
winPolygon.Add(pt);
});
winPolygon.Close();
const winWire = winPolygon.Wire();
const winMkFace = new Mx3dMkFace(winWire);
const winFace = winMkFace.Face();
const winMkPrism = new Mx3dMkPrism(winFace, new Mx3dGeVec(0, 240, 0));
const win = winMkPrism.Shape();
// 开门洞
const doorPts: Mx3dGePoint[] = [];
doorPts.push(new Mx3dGePoint(5240, 1160, 0));
doorPts.push(new Mx3dGePoint(5240, 1160, 2000));
doorPts.push(new Mx3dGePoint(5240, 360, 2000));
doorPts.push(new Mx3dGePoint(5240, 360, 0));
const doorPolygon = new Mx3dMkPolygon();
doorPts.forEach((pt) => {
doorPolygon.Add(pt);
});
doorPolygon.Close();
const doorWire = doorPolygon.Wire();
const doorMkFace = new Mx3dMkFace(doorWire);
const doorFace = doorMkFace.Face();
const doorMkPrism = new Mx3dMkPrism(doorFace, new Mx3dGeVec(240, 0, 0));
const door = doorMkPrism.Shape();
wall = wall.cut(win).cut(door);
// 准备一个棕色
const brownColor = new Mx3dGeColor(MdGe.MxNameOfColor.Color_NOC_BROWN);
// 先清除视图中的模型
mxcad3d.removeAll();
// 获取视图文档
const doc = mxcad3d.getDocument();
// 文档中创建一个标签用于存储墙体形状
const wallLabel = doc.addShapeLabel();
// 墙体形状放入文档标签中
wallLabel.setShape(wall);
// 给墙体设置为棕色
wallLabel.setColor(brownColor);
// 更新显示视图
mxcad3d.update();
}
// 给button添加点击事件,点击后调用drawRoundRectPipe函数,进行圆角方管的绘制
// 立即执行函数
(function addEventToButton(){
const btn = document.querySelector("button");
if (btn) {
btn.addEventListener("click", () => {
funDrawWall();
});
}
})()

4.重新查看运行效果



5.本次教程最后完成的完整测试项目压缩包下载地址为:https://gitee.com/mxcadx/mxcad_docs/tree/master/examples3D/Test3dWall.7z。

压缩包下载解压后需要在项目目录下打开cmd命令行,然后在命令行中执行npm install来安装依赖,然后再按照本教程中的方式来运行项目查看效果。

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
“AI芯片第一股”已暴涨10倍!万亿级行业利好不断,机构高频调研股来了

“AI芯片第一股”已暴涨10倍!万亿级行业利好不断,机构高频调研股来了

数据宝
2024-11-27 18:57:43
太突然!上海这里火到“堵船”,泼天的富贵来临,房屋年租金从3万涨到11万

太突然!上海这里火到“堵船”,泼天的富贵来临,房屋年租金从3万涨到11万

上观新闻
2024-11-25 20:07:43
1-10月辽宁省各市财政收入:营口第4,辽阳第9,葫芦岛力压抚顺

1-10月辽宁省各市财政收入:营口第4,辽阳第9,葫芦岛力压抚顺

爱看剧的阿峰
2024-11-27 21:35:51
神十九号航天员身体发生了变化,这还不到一个月时间,怎么回事?

神十九号航天员身体发生了变化,这还不到一个月时间,怎么回事?

粤语音乐喷泉
2024-11-27 20:36:04
黄磊女儿黄多多已经18岁了,出落得亭亭玉立,很有气质

黄磊女儿黄多多已经18岁了,出落得亭亭玉立,很有气质

视点历史
2024-11-19 23:06:22
2016年韩国部署萨德时,我们曾经举国抗议,为何现在都没人提了?

2016年韩国部署萨德时,我们曾经举国抗议,为何现在都没人提了?

琳琳奇闻说
2024-11-20 14:50:12
中国地图看习惯了,这两地,一个在中国最左边,一个在中国最右边

中国地图看习惯了,这两地,一个在中国最左边,一个在中国最右边

星辰故事屋
2024-11-27 12:19:38
八村塁女友,河村勇辉女友,渡边雄太女友,日篮三巨头场外不简单

八村塁女友,河村勇辉女友,渡边雄太女友,日篮三巨头场外不简单

艺兔体坛
2024-11-26 17:13:58
LV总裁上海巡店,二公子身高颜值抢镜,地位不如和Lisa交往的弟弟

LV总裁上海巡店,二公子身高颜值抢镜,地位不如和Lisa交往的弟弟

小咪侃娱圈
2024-11-22 09:27:19
近5战全胜!CBA倒数第二大爆发 要当黑马了?

近5战全胜!CBA倒数第二大爆发 要当黑马了?

体娱天下
2024-11-27 11:23:48
贵州省政府发展研究中心党组书记李胜跨省赴四川履新

贵州省政府发展研究中心党组书记李胜跨省赴四川履新

澎湃新闻
2024-11-27 22:44:34
他怎么又牛了!22岁被勇士赶走,23岁被称水货老大,24岁生涯巅峰

他怎么又牛了!22岁被勇士赶走,23岁被称水货老大,24岁生涯巅峰

球毛鬼胎
2024-11-25 22:44:53
体育总局体操中心回应吴柳芳被批视频擦边:领导还在研究怎么去处理

体育总局体操中心回应吴柳芳被批视频擦边:领导还在研究怎么去处理

懂球帝
2024-11-25 19:15:18
隐瞒28年后,杨钰莹终于坦白:如果当年接受毛宁,现在早就当妈了

隐瞒28年后,杨钰莹终于坦白:如果当年接受毛宁,现在早就当妈了

简读视觉
2024-11-24 22:48:29
乌克兰捅的窟窿实在太大了,俄军连炸一夜:北约教官基地死伤惨重

乌克兰捅的窟窿实在太大了,俄军连炸一夜:北约教官基地死伤惨重

芯怡飞
2024-11-26 16:07:26
最新战报!张安达创纪录,0-2到3-2,或逆转赢德比,26冠王冲赛点

最新战报!张安达创纪录,0-2到3-2,或逆转赢德比,26冠王冲赛点

刘姚尧的文字城堡
2024-11-27 05:30:42
萝卜是结节的“催化剂”?提醒:不想结节癌变,尽量少吃4种食物

萝卜是结节的“催化剂”?提醒:不想结节癌变,尽量少吃4种食物

奇妙的本草
2024-11-27 18:00:03
“猴哥说车”迎来全网骂潮:一步错步步错,3个雷区他全部踩中了

“猴哥说车”迎来全网骂潮:一步错步步错,3个雷区他全部踩中了

聚合大娱
2024-11-26 11:50:32
什么是“谷子经济”,哪些是“谷子经济”概念股?

什么是“谷子经济”,哪些是“谷子经济”概念股?

小佩棋不蹦迪
2024-11-27 21:30:33
多没文化才要把叶嘉莹称“先生”

多没文化才要把叶嘉莹称“先生”

陶舜财经
2024-11-24 19:47:18
2024-11-28 01:35:00
CAD梦想画图
CAD梦想画图
是一款极速轻量级的CAD软件
585文章数 122关注度
往期回顾 全部

科技要闻

利润暴跌40%后,三星芯片部门任命新负责人

头条要闻

前实习生攻击公司模型训练 字节跳动起诉索赔800余万

头条要闻

前实习生攻击公司模型训练 字节跳动起诉索赔800余万

体育要闻

网红主播踢顶级联赛 这是什么奇葩俱乐部

娱乐要闻

天呐鹿晗瘦了这么多,像漫画出来的

财经要闻

马光远:所有的房地产政策基本都到位了

汽车要闻

中国的超豪华车尊界S800 预售百万起/ L3级智驾

态度原创

数码
本地
艺术
手机
亲子

数码要闻

优篮子俯拍自拍杆 TT88 开售,99 元

本地新闻

民间高手丨千年传承“手艺人”更是“守艺人”

艺术要闻

故宫珍藏的墨迹《十七帖》,比拓本更精良,这才是地道的魏晋写法

手机要闻

2499元起!REDMI K80发布:骁龙8至尊版,性价比超强

亲子要闻

幼儿园毕业第一天就去爬泰山,8岁小男孩452天登顶泰山18次,长大后想攀登珠穆朗玛峰

无障碍浏览 进入关怀版