(VUE實現Web3D)網頁三維CAD中繪製窗戶模型

2024年11月04日09:40:22 財經 7356

前言

本文使用mxcad3d在網頁中創建一個簡單的三維窗戶模型mxcad3d提供了豐富的三維建模功能和便捷的API,使得創建各種三維模型變得簡單方便,最終效果如下圖

(VUE實現Web3D)網頁三維CAD中繪製窗戶模型 - 天天要聞

環境搭建和入門

首先學習mxcad的基本使用方法,可通過官方的入門教程來搭建一個最基本的項目模板,依次查看教程:安裝`Node.js`以及`VS Code`開發工具創建mxcad開發項目API文檔接口使用說明

壓縮包下載解壓後需要在項目目錄下打開`cmd命令行`,然後在命令行中執行`npm install`來安裝依賴,然後再按照本教程中的方式來運行項目查看效果

編寫創建窗戶模型的代碼

1. 根據官方快速入門教程來創建一個名為`Test3dWindow`的項目,如下圖:

(VUE實現Web3D)網頁三維CAD中繪製窗戶模型 - 天天要聞

2. 編寫繪製窗戶模型的代碼

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 > <canvas id="myCanvas"></canvas></div>

<button>繪製窗戶模型</button>

<script type="module" src="./src/index.ts"></script>

</body>

</html>

src/index.ts中編寫繪製窗戶模型的函數,src/index.ts的完整代碼如下

import { MdGe, Mx3dGeAxis, Mx3dGeColor, Mx3dGeDir, Mx3dGeMaterial, Mx3dGeomPlane, Mx3dGePoint, Mx3dGeVec, Mx3dMkBox, Mx3dMkFace, Mx3dMkPolygon, Mx3dMkPrism, 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("初始化完成");

// 修改背景顏色

const color1 = new Mx3dGeColor(61/255, 139/255, 221/255, MdGe.MxTypeOfColor.Color_TOC_sRGB);

const color2 = new Mx3dGeColor(203/255, 223/255, 247/255, MdGe.MxTypeOfColor.Color_TOC_sRGB);

mxcad3d.setGradientBgColor(color1, color2, MdGe.MxGradientFillMethod.GFM_VER);

// 設置透視投影

mxcad3d.setProjectionType(MdGe.MxCameraProjection.CProjection_Perspective);

// 打開光照陰影

mxcad3d.enableDirLightSrc(true);

});

function drawWindow{

// 窗戶邊框橫截面輪廓點

const pts: Mx3dGePoint = ;

pts.push(new Mx3dGePoint(0, 0, 0));

pts.push(new Mx3dGePoint(1, 0, 0));

pts.push(new Mx3dGePoint(1, 0, 2));

pts.push(new Mx3dGePoint(4, 0, 2));

pts.push(new Mx3dGePoint(4, 0, 0));

pts.push(new Mx3dGePoint(5, 0, 0));

pts.push(new Mx3dGePoint(5, 0, 10));

pts.push(new Mx3dGePoint(3, 0, 10));

pts.push(new Mx3dGePoint(3, 0, 8));

pts.push(new Mx3dGePoint(2, 0, 8));

pts.push(new Mx3dGePoint(2, 0, 10));

pts.push(new Mx3dGePoint(0, 0, 10));

// 窗戶邊框橫截面輪廓多段線

const polygon = new Mx3dMkPolygon;

pts.forEach((pt) => polygon.Add(pt));

polygon.Close;

// 窗戶邊框橫截面輪廓線

const wire = polygon.Wire;

// 窗戶邊框橫截面輪廓線生成窗框橫截面

const makeface = new Mx3dMkFace(wire);

const face = makeface.Face;

const vec = new Mx3dGeVec(0, 100, 0);

// 橫截面拉伸出窗框體形狀

const frame = new Mx3dMkPrism(face, vec);

let frameShape = frame.Shape;

// 構造兩個平面用於分割窗戶邊框(邊框兩端的斜45度角)

const pt = new Mx3dGePoint(0, 0, 0);

const dir = new Mx3dGeDir(0, -1, 1);

const plane = new Mx3dGeomPlane(pt, dir);

// 平面1

const planeFace = plane.Face(1e-5);

pt.setXYZ(0, 50, 0);

dir.SetXYZ(0, 0, 1);

const axis = new Mx3dGeAxis(pt, dir);;

// 平面2

const planeFace2 = planeFace.MirroredByAxis(axis);

// 分割窗戶邊框(分割成了兩個斜45度的小三角形部分和中間的一個梯形部分)

const parts = frameShape.spliter([planeFace, planeFace2]);

// 篩選出中間那個梯形的部分(這裡是通過質心的位置來判斷的)

parts.forEach((shape)=>{

// 這裡Centroid的參數添填的MdGe.MxQuantAspect.Quant_Volume這個枚舉,是因為shape是實體,它的質心是體質心,所以這裡填MdGe.MxQuantAspect.Quant_Volume

// 如果shape是面,它的質心是面質心,所以要填MdGe.MxQuantAspect.Quant_Area

// 如果shape是線,它的質心是線質心,所以要填MdGe.MxQuantAspect.Quant_Length

const centroid = shape.Centroid(MdGe.MxQuantAspect.Quant_Volume);

if (centroid.Y > 45 && centroid.Y < 55) {

frameShape = shape;

}

});

// 通過旋轉得到另外三個邊的邊框

const frameShape2 = frameShape.Rotated(new Mx3dGeAxis([0, 50, 50], [1, 0, 0]), Math.PI / 2);

const frameShape3 = frameShape.Rotated(new Mx3dGeAxis([0, 50, 50], [1, 0, 0]), Math.PI);

const frameShape4 = frameShape2.Rotated(new Mx3dGeAxis([0, 50, 50], [1, 0, 0]), Math.PI);

// 合併四個邊框,獲得邊框整體形狀

frameShape = frameShape.fuse(frameShape2).fuse(frameShape3).fuse(frameShape4);

// 窗框顏色

const frameColor = new Mx3dGeColor(0.5, 0.5, 0.5, MdGe.MxTypeOfColor.Color_TOC_RGB);

// 窗框材質

const frameMaterial = new Mx3dGeMaterial(MdGe.MxNameOfMaterial.Material_NOM_ShinyPlastified);

// 玻璃

const glass = new Mx3dMkBox([2, 8, 8], [3, 92, 92]);

// 玻璃形狀

const glassShape = glass.Shape;

// 玻璃顏色

const glassColor = new Mx3dGeColor(0, 0.9, 0.549, MdGe.MxTypeOfColor.Color_TOC_RGB);

// 玻璃材質,看起來是透明的

const glassMaterial = new Mx3dGeMaterial(MdGe.MxNameOfMaterial.Material_NOM_Glass);

// 獲取模型文檔

const doc = mxcad3d.getDocument;

// 新增一個形狀標籤用於保存邊框形狀

const frameLabel = doc.addShapeLabel;

frameLabel.setShape(frameShape);

frameLabel.setColor(frameColor)

frameLabel.setMaterial(frameMaterial);

// 新增一個形狀標籤用於保存玻璃形狀

const glassLabel = doc.addShapeLabel;

glassLabel.setShape(glassShape);

glassLabel.setColor(glassColor)

glassLabel.setMaterial(glassMaterial);

// 更新視圖顯示

mxcad3d.update;

}

// 給button添加點擊事件,點擊後調用drawWindow函數,進行窗戶模型的繪製

// 立即執行函數

(function addEventToButton{

const btn = document.querySelector("button");

if (btn) {

btn.addEventListener("click", => {

drawWindow;

});

}

})

3. 新建終端,運行`npx vite`命令來運行項目,效果如下圖:

(VUE實現Web3D)網頁三維CAD中繪製窗戶模型 - 天天要聞

財經分類資訊推薦

沙彌新股申購解析:同宇新材(2025-7-1) - 天天要聞

沙彌新股申購解析:同宇新材(2025-7-1)

沙彌新股申購解析:同宇新材(2025-35)今日創業板一支標的申購,精析如下:(1)同宇新材(保薦人:興業證券)301630公司主營業務系電子樹脂的研發、生產和銷售,主要應用於覆銅板生產。
7月1日A股猛料:3部門發文!資金面迎4重利好!將掀起短線狂潮! - 天天要聞

7月1日A股猛料:3部門發文!資金面迎4重利好!將掀起短線狂潮!

聚焦A股市場每日重磅消息!在閱讀正文前,你必須知道一點:沒有幾個主力資金會笨到在利好一出爐就將股價直線拉升到漲停,所以請股民朋友們耐心一點,讓利好飛一會,也許你會發現不一樣的投資機會!  【國內外財經要聞/A股大盤展望】  猛料一:三部門發
周一熱門中概股多數下跌 網易漲1.45%,台積電跌0.91% - 天天要聞

周一熱門中概股多數下跌 網易漲1.45%,台積電跌0.91%

來源:環球市場播報周一熱門中概股多數下跌。納斯達克中國金龍指數(HXC)收跌0.49%。上漲股當中(按市值從高到低),網易漲1.45%,騰訊音樂漲2.04%,富途控股漲1.95%,中國新城農村漲2.80%,嗶哩嗶哩漲0.14%,萬國數據漲1
原油:WTI下跌 OPEC+決議之前中東緊張局勢緩和 - 天天要聞

原油:WTI下跌 OPEC+決議之前中東緊張局勢緩和

來源:環球市場播報隨着交易員猜測OPEC+增產規模、以及對中東緊張局勢擾亂全球石油供應的擔憂消散,原油在創下兩年來最大單周跌幅之後小幅下跌。WTI原油下跌0.6%,結算價在每桶65美元附近,此前上周暴跌13%。
收盤:美股周一收高 納指與標普指數再創新高 - 天天要聞

收盤:美股周一收高 納指與標普指數再創新高

來源:環球市場播報北京時間7月1日凌晨,美股周一收高,納指與標普500指數再創歷史新高。三大股指在6月份和上半年均錄得漲幅。加拿大取消數字服務稅並準備與美國恢復貿易談判,令市場情緒得到提振。美參議院即將對特朗普的稅改法案進行表決。道指漲27
“理財”年化利率高達存款4倍?銀行工作人員急了→ - 天天要聞

“理財”年化利率高達存款4倍?銀行工作人員急了→

2024年末的一天,兩位穿戴時髦的女士來到青島市一家銀行網點,要求大幅上調手機銀行轉賬限額。網點工作人員經詢問得知,兩位客戶經同事推薦想購買一款理財產品,該產品宣稱年化利率是銀行定期存款的4倍。經過銀行工作人員進一步了解,購買該產品需要向個
要求美聯儲降息 特朗普又批鮑威爾 這次還帶上了整個委員會 - 天天要聞

要求美聯儲降息 特朗普又批鮑威爾 這次還帶上了整個委員會

當地時間6月30日,美國總統特朗普在社交媒體發文表示,“太遲先生”美聯儲主席鮑威爾和整個委員會都應該為沒有降息感到羞恥。特朗普表示,如果他們好好工作,“美國就能節省數萬億美元的利息成本”“但委員會只是袖手旁觀,所以他們也難辭其咎”。特朗普稱,美國應該支付1%的利率。當天,美國白宮新聞秘書萊維特表示,特朗...
2025年7月1號行情預覽 - 天天要聞

2025年7月1號行情預覽

指數方面:看突破或者震蕩,這裡已經消化掉了金融下跌的風險了,所以主觀上還是看繼續為主,唯一的缺點是量能。量能跟上的話就是可以繼續做共振。