(在线查看三维模型)在线CAD中创建三维建筑墙体

本文涉及的产品
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
注册配置 MSE Nacos/ZooKeeper,182元/月
任务调度 XXL-JOB 版免费试用,400 元额度,开发版规格
简介: 本文详细介绍如何使用mxcad3d创建建筑墙体模型。首先需安装Node.js及npm包管理器,并通过npm初始化项目、引入mxcad包。接着,在项目中编写HTML与TypeScript代码以实现墙体绘制,包括外墙、内墙、窗户和门的创建。最后,通过运行项目验证效果。教程及完整项目示例可在[mxcad3d官方仓库](https://gitee.com/mxcadx/mxcad_docs/tree/master/examples3D/Test3dWall.7z)获取。更多详细步骤,请关注“梦想云图网页CAD”公众号。

一、前言

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

111.jpg

2.使用VS CODE 打开新建的测试项目文件夹
222.jpg
333.jpg

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

<!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>

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

444.jpg

三、运行测试

1.新建终端
555.jpg

2.开启服务
666.jpg

3.打开网页,查看效果
777.jpg

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

1.墙体的二维平面设计图:
888.jpg
2.index.html中添加一个按钮(以下是index.html完整代码)

<!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>
    <button>绘制建筑墙体</button>
</body>
</html>

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.重新查看运行效果
999.jpg

5.本次教程最后完成的完整测试项目压缩包下载地址为:https://gitee.com/mxcadx/mxcad_docs/tree/master/examples3D/Test3dWall.7z。
压缩包下载解压后需要在项目目录下打开cmd命令行,然后在命令行中执行npm install来安装依赖,然后再按照本教程中的方式来运行项目查看效果。

相关文章
|
数据可视化 定位技术 Sentinel
如何用Google Earth Engine快速、大量下载遥感影像数据?
【2月更文挑战第9天】本文介绍在谷歌地球引擎(Google Earth Engine,GEE)中,批量下载指定时间范围、空间范围的遥感影像数据(包括Landsat、Sentinel等)的方法~
4434 1
如何用Google Earth Engine快速、大量下载遥感影像数据?
|
人工智能 云栖大会 云计算
9.19-9.20 云栖工坊邀您亲手打造AI助手
9.19-9.20 云栖工坊邀您亲手打造AI助手
823 29
|
1月前
|
人工智能 自然语言处理 并行计算
语音克隆 Index-TTS 详细介绍
Index-TTS 是由国内团队开发的端到端超大规模语音合成系统,具备高自然度与相似度,支持中文及中英混读。其参数量达10亿级,训练数据超10万小时,推理延迟低于200毫秒,提供零样本音色克隆、长篇章朗读及可控风格等关键功能,定位为中文领域的Bark/VALL-E 2 + Tortoise + xTTS三合一系统。
|
JavaScript 前端开发 API
在线三维CAD中创建一个三维管道模型(网页浏览编辑三维CAD)
本文介绍了如何使用mxcad3d创建三维管道模型。mxcad3d提供了丰富的API,使复杂的管道结构设计变得直观简便。首先需安装mxcad包并初始化项目。接着,通过编写JavaScript函数实现圆角方管的绘制,并将其添加到web界面中。点击绘制按钮即可生成管道模型并实时展示。这为网页CAD中的三维建模任务提供了强大支持。相关代码与项目可在[mxcad3d官方仓库](https://gitee.com/mxcadadox/mxcad_docs/tree/master/examples3D/Test3dPipe.7z)获取。
184 97
在线三维CAD中创建一个三维管道模型(网页浏览编辑三维CAD)
|
自然语言处理 IDE 开发工具
通义灵码编程智能体上线,支持Qwen3模型
通义灵码最全使用指南,一键收藏。
128893 31
通义灵码编程智能体上线,支持Qwen3模型
Vue Cli 脚手架安装
本文介绍了如何使用npm和cnpm淘宝镜像加速来安装Vue CLI脚手架工具,并验证安装成功。接着,通过Vue CLI创建新项目,并启动项目服务。
Vue Cli 脚手架安装
|
Java 关系型数据库 数据库连接
greenplum驱动都有哪几个
【5月更文挑战第23天】greenplum驱动都有哪几个
440 4
|
存储 机器学习/深度学习 人工智能
未来已来:AI技术的最新趋势与前沿探索
【7月更文第20天】在这个日新月异的时代,人工智能(AI)已经从科幻概念逐渐深入到我们日常生活的方方面面,其发展速度之快超乎想象。从基础的语音识别、图像分析到复杂的决策制定、自动驾驶,AI技术正以前所未有的力量推动着社会进步。本文将带您一同展望AI技术的未来发展方向,深入探讨量子计算、生物计算等新兴领域的前沿探索,以及它们如何重新定义AI的边界。
740 0
|
JavaScript 网络安全 开发工具
对象存储oss使用问题之文件上传在暂停时报错:ResponseError: socket hang up如何解决
《对象存储OSS操作报错合集》精选了用户在使用阿里云对象存储服务(OSS)过程中出现的各种常见及疑难报错情况,包括但不限于权限问题、上传下载异常、Bucket配置错误、网络连接问题、跨域资源共享(CORS)设定错误、数据一致性问题以及API调用失败等场景。为用户降低故障排查时间,确保OSS服务的稳定运行与高效利用。
1579 0
|
C++
3D模型在线转换工具
NSDT 3Dconvert是一个可以进行3D模型格式转换的在线工具,并支持GLTF、GLB、OBJ、STL、STP、IGS、FBX、IFC、DXF等3D模型在线预览和转换成果下载。
2239 1
3D模型在线转换工具