(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中繪製窗戶模型 - 天天要聞

財經分類資訊推薦

急於扭虧的邁威生物把首個創新葯交給大廠賣 - 天天要聞

急於扭虧的邁威生物把首個創新葯交給大廠賣

界面新聞記者 | 唐卓雅界面新聞編輯 | 謝欣6月26日晚間,邁威生物公布兩則交易,分別將注射用阿格司亭α(包括商品名為邁粒生®,產品代號:8MW0511)、IL-11靶向療法(包括9MW3811)授權給齊魯製藥和CALICO LIFE S
助力更多企業品牌“出圈”“出海”!2025煙台參博會將於7月4日開幕 - 天天要聞

助力更多企業品牌“出圈”“出海”!2025煙台參博會將於7月4日開幕

齊魯網·閃電新聞6月27日訊 品重煙台,“參”情有約。為加強區域間的交流合作,助力企業品牌建設和市場開拓,打造世界海參人“看產業、選新品、對接全渠道”的產業盛會,促進海參產業高質量發展,2025海參產業(煙台)博覽會暨海洋食材展將於7月4日—至6日在煙台國際博覽中心舉辦。這是一場連接全球產業鏈上下游、展示世界知...
煙台市:推動養老事業和養老產業協同高質量發展 - 天天要聞

煙台市:推動養老事業和養老產業協同高質量發展

齊魯網·閃電新聞6月27日訊 6月27日,煙台市人民政府新聞辦公室舉行“抓改革創新 促高質量發展”主題系列第一場新聞發布會,介紹煙台市深化醫療養老領域改革的最新進展與核心舉措。煙台市衛生健康委黨組書記、主任包偉,煙台市民政局黨組書記徐忠,煙台市衛生健康委體制改革與藥物管理科科長、一級主任科員遲新傑,煙台市民...
首次承修大型郵輪,青島郵輪產業再獲突破 - 天天要聞

首次承修大型郵輪,青島郵輪產業再獲突破

6月26日,青島的老朋友——大型豪華郵輪“夢想”號再次踏浪而來,到青島北海造船有限公司進塢維修,這也是青島首次承接大型郵輪維修業務,標誌着青島正式進入郵輪高附加值維修領域,實現產業鏈上游關鍵環節的突破。“夢想”號郵輪7.75萬總噸,共15層
河北省醫藥行業化學檢驗員技能競賽在華葯啟幕 - 天天要聞

河北省醫藥行業化學檢驗員技能競賽在華葯啟幕

6月25日,備受矚目的河北省醫藥行業化學檢驗員技能競賽在華北製藥集團盛大啟幕。本次競賽由河北省能源化工工會主辦,河北省藥品醫療器械檢驗研究院協辦、華北製藥集團承辦,旨在提升我省醫藥行業化學檢驗員的專業技能水平,保障藥品質量安全,推動醫藥行業高質量發展。來自全省醫藥行業的20支企業代表隊、共計60名化學檢驗...
第四屆RCEP區域(山東)進口商品博覽會在臨沂開幕 - 天天要聞

第四屆RCEP區域(山東)進口商品博覽會在臨沂開幕

齊魯晚報·齊魯壹點 高松 賀雲龍6月27日,第四屆RCEP區域(山東)進口商品博覽會在臨沂開幕。本屆博覽會企業參展348家,展覽面積3.5萬平方米,設置1200個國際標準展位,開展首日累計到會觀眾1.5萬人次,呈現以下四大亮點:國際化水平更
美關稅升級衝擊德產業,德專家呼籲攜手中國維護全球貿易 - 天天要聞

美關稅升級衝擊德產業,德專家呼籲攜手中國維護全球貿易

在美國持續推動關稅升級,並可能於7月9日重啟對歐盟商品加征最高50%進口關稅之際,近日,德國企業界與研究機構紛紛發出警告,認為美國持續升級的單邊貿易措施正製造高度不確定性,不僅衝擊全球產業鏈穩定,也將對德國出口與製造業構成長期損害。
如果全球金融危機重演,普通人如何保住錢袋子? - 天天要聞

如果全球金融危機重演,普通人如何保住錢袋子?

你有沒有想過,萬一未來的某一天,全球性金融危機再度上演,普通人如何保住錢袋子,避免財富被無情收割?也許你的第一反應是“亂世買黃金”,但歷史上每一次全球性金融危機,從來不是突然降臨,而是存在三個不同的危機階段,現金、黃金、債券、股票各自扮演的