AI 助理
备案控制台
开发者社区 云原生 文章 正文

网页CAD中二维CAD图转三维CAD的方法

2024-08-16 35
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
应用实时监控服务ARMS - 应用监控，每月50GB免费额度
函数计算FC，每月15万CU 3个月
容器服务 Serverless 版 ACK Serverless，952元额度 多规格
简介： 本文介绍了一种将网页CAD中的二维图纸转换成三维模型的方法，特别聚焦于通过拉伸平面图形至一定高度来实现三维效果。文中利用了mxcad和mxcad3d两个框架，前者负责读取和解析二维CAD图纸，后者则基于这些数据构建三维模型。文章详细阐述了安装配置步骤及代码实现细节，包括创建项目、安装依赖、编写HTML与JavaScript代码等，并提供了完整的示例代码。最终实现了从二维图纸自动转换并展示三维模型的功能，同时添加了交互元素以方便用户操作。

一、前言

网页CAD中经常有这样的需求：将二维的CAD图纸通过转换为三维的形状（如将平面二维的图形向上拉伸一定的高度），进而进行三维展示的效果，本文以将平面二维的图形向上拉伸一定的高度为例，实现二维CAD图形转三维图形。

二、mxcad和mxcad3d

mxcad是一个功能丰富、简易高效的二维CAD开发框架，它提供丰富的二次开发接口，支持在网页中渲染、读写多种CAD图纸格式，如dwg、dxf等格式文件。
mxcad3d是一个三维CAD开发框架，为开发者提供了丰富的参数化建模的开发接口，用户可以在网页中高效、便捷的对基本三维模型进行创建并显示。

三、基本流程

1.通过mxcad打开并读取CAD图纸中的图元数据。
2.通过mxcad3d，将上一步读取到的CAD图纸中的图元数据作为三维模型的建模数据进行建模。

四、安装mxcad框架、编写测试代码

mxcad和mxcad3d都位于一个名叫mxcad的npm包中，本教程将创建的Test2dTo3d 完整项目文件，可以在这里下载：
https://gitee.com/mxcadx/mxcad_docs/blob/master/examples3D/Test2dTo3d.7z

4.1新建项目、安装mxcad
首先，在某路径下新建一个文件夹Test2dTo3d作为项目文件夹，在Test2dTo3d 目录中打开cmd命令行程序运行以下命令来初始化项目并安装 vite和 mxcad，如下图：
图片1.png

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

4.2 给项目新建文件、添加一些测试资源文件
使用VS Code打开项目根目录Test2dTo3d：

–在根目录Test2dTo3d下新建src目录、index.html文件和vite.config.ts文件。
–在src目录下新建assets目录和index.ts文件。
–在assets目录下放上本次教程所使用到的图片和图纸资源文件

如下图:
图片2.png

4.3向新建的文件中添加代码
index.html中的代码
这是页面的结构，需要我们提前准备两个canvas用于分别显示二维和三维场景，添加了一个按钮用于执行我们的二维图纸转三维模型的程序，最后需要引入我们的测试代码"./src/index.ts",如下图：
图片3.png
代码如下：

<!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: 700px;"> <canvas id="myCanvas3d"></canvas></div>
    <hr />
    <div style="height: 500px;"> <canvas id="myCanvas2d"></canvas></div>
    <hr />
    <button>转换</button>
    <script type="module" src="./src/index.ts"></script>
</body>
</html>

4.4 vite.config.ts中的代码
这是二维mxcad要求的配置多线程的一个配置文件，我们这里最好进行配置，如下图：
图片4.png
代码如下：

import { defineConfig } from "vite"
export default defineConfig({
    server: {
        headers: {
          "Cross-Origin-Opener-Policy": "same-origin",
          "Cross-Origin-Embedder-Policy": "require-corp",
        }
    }
})

4.5 index.ts中的代码
这里我们创建了二维的mxcad2d对象和三维的mxcad3d对象，通过mxcad2d来读取二维图纸的信息，然后mxcad3d通过这些图纸信息生成三维模型。并且，将页面中的转换按扭的点击事件绑定到执行转换的函数，这样我们在页面中点击转换按扭后就能将二维图纸转换为三维模型了。
代码中用到了用到的类型和对象等的API，可以访问mxcad的官方API文档：二维，三维。
本教程的演示效果也可以在官方的在线测试DEMO中找到 此在线DEMO实现的代码也可以从官方提供的开发包来获取，如下图：
图片5.png

代码如下：

import
{
  // 3D
  MxCAD3DObject,
  Mx3dShapeWire,
  Mx3dGeColor,
  Mx3dSymbolText,
  Mx3dShapeEdge,
  Mx3dGePoint,
  Mx3dGeomCircle,
  Mx3dShapeDownCast,
  Mx3dWireTool,
  MdGe,
  Mx3dGeCSYSR,
  Mx3dGeDir,
  Mx3dUtils,
  Mx3dMkFace,
  Mx3dMkPrism,
  Mx3dGeVec,
  Mx3dAlgoFillet,
  Mx3dShapeObject,
  // 2D
  McObject,
  McDb,
  McDbArc,
  McDbLine,
  McDbPolyline,
  McDbText,
  McGePoint3d,
  MxCADSelectionSet
} from "mxcad"
// 3D
// 创建三维mxcad3d对象
const mxcad3d = new MxCAD3DObject()
// 初始化三维mxcad3d对象
mxcad3d.create({
    // canvas元素的css选择器字符串（示例中是id选择器），或canvas元素对象
    canvas: "#myCanvas3d",
    // 获取加载wasm相关文件(wasm/js/worker.js)路径位置
    locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/3d/${fileName}`, import.meta.url).href,
})
// 三维mxcad3d对象初始化完成事件
mxcad3d.on("init", ()=>{
    console.log("三维初始化完成");
});
// 2D
// 创建二维mxcad2d对象
const mxcad2d = new McObject()
mxcad2d.create({
    // canvas元素的css选择器字符串（示例中是id选择器），或canvas元素对象
    canvas: "#myCanvas2d",
    // 获取加载wasm相关文件(wasm/js/worker.js)路径位置
    locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/2d/${fileName}`, import.meta.url).href,
    // 需要初始化打开的文件url路径，（mxweb是dwg文件转换后能够在网页进行读写的文件格式，编辑完毕后也可以保存回dwg格式）
    fileUrl: new URL("../src/assets/map.dwg.mxweb", import.meta.url).href,
    // 提供加载字体的目录路径
    fontspath: new URL("node_modules/mxcad/dist/fonts", import.meta.url).href,
})
// 二维mxcad2d对象初始化完成事件
mxcad2d.on("init", () => {
  console.log("二维初始化完成");
});
// 二维mxcad2d对象打开文件完成事件
mxcad2d.on("openFileComplete", () => {
  console.log("二维图纸打开完成");
});
// 用于将三维形状添加到三维文档中
function addShapeToDoc(theShape: Mx3dShapeObject, color = new Mx3dGeColor(MdGe.MxNameOfColor.Color_NOC_WHITE), texture = ""){
  const doc = mxcad3d.getDocument();
  const label = doc.addShapeLabel();
  label.setName("Mx3dShape");
  label.setShape(theShape);
  label.setColor(color);
  if (texture) {
    label.setTexture(texture);
  }
  mxcad3d.fitAllObjects(true);
}
// 获取二维圆弧的起点、中点、终点
function get2DArc3Points(arc: McDbArc): {starPt: McGePoint3d, midPt: McGePoint3d, endPt: McGePoint3d}{
  const retPtStart = arc.getStartPoint();
  const retPtEnd = arc.getEndPoint();
  const starPt = retPtStart.val;
  const endPt = retPtEnd.val;
  const endParamRet = arc.getEndParam();
  const startParamRet = arc.getStartParam();
  const midParam = startParamRet.val + (endParamRet.val - startParamRet.val) / 2;
  const midPtRet = arc.getPointAtParam(midParam);
  const midPt = midPtRet.val;
  return {starPt, midPt, endPt}
}
// 用于保存地基基础信息的数据结构
type BaseData = { wires: Mx3dShapeWire[], outerWireIndex: number };
// 用于保存建筑物、公共设施等信息的数据结构
type MetaData = { wire: Mx3dShapeWire, color: Mx3dGeColor }[];
// 用于保存文字信息的数据结构
type TextData = Mx3dSymbolText[];
// 用于保存图中所有图元信息的数据结构
type MapData = {
  base: BaseData,
  building: MetaData,
  atm: MetaData,
  elevator: MetaData,
  icon: MetaData,
  exit: MetaData,
  wc: MetaData,
  text: TextData
}
// 获取图中所有数据
function getMapData(ss: MxCADSelectionSet): MapData {
  // baseData
  const base: BaseData = { wires: [], outerWireIndex: 0 };
  // buildingData
  const building: MetaData = [];
  // atmData
  const atm: MetaData = [];
  // elevatorData
  const elevator: MetaData = [];
  // iconData
  const icon: MetaData = [];
  // exitData
  const exit: MetaData = [];
  // wcData
  const wc: MetaData = [];
  // textData
  const text: TextData = [];
  ss.forEach((id) => {
    const ent: any = id.getMcDbEntity();
    if (ent instanceof McDbPolyline) {
      const pl = ent as McDbPolyline;
      const resBuffer = pl.explode();
      const edges: Mx3dShapeEdge[] = [];
      for(let i = 0; i < resBuffer.GetCount(); i++){
        const resObj = resBuffer.AtObject(i);
        if (resObj.ret) {
          const subEnt = resObj.val;
          // 判断类型
          if (subEnt instanceof McDbLine) {
            const line = subEnt as McDbLine;
            const ptStart = line.startPoint;
            const ptEnd = line.endPoint;
            const ptStart3d = new Mx3dGePoint(ptStart.x, ptStart.y, 0);
            const ptEnd3d = new Mx3dGePoint(ptEnd.x, ptEnd.y, 0);
            // 通过二维直线段的数据构造三维直线段
            const edge = new Mx3dShapeEdge(ptStart3d, ptEnd3d);
            edges.push(edge);
          }else if (subEnt instanceof McDbArc) {
            const arc = subEnt as McDbArc;
            const arcPts = get2DArc3Points(arc);
            const starPt = arcPts.starPt;
            const endPt = arcPts.endPt;
            const midPt = arcPts.midPt;
            const starPt3d = new Mx3dGePoint(starPt.x, starPt.y, 0);
            const midPt3d = new Mx3dGePoint(midPt.x, midPt.y, 0);
            const endPt3d = new Mx3dGePoint(endPt.x, endPt.y, 0);
            // 通过二维圆弧的数据构造三维圆弧
            const edge = Mx3dGeomCircle.MakeArcOfCircle(starPt3d, midPt3d, endPt3d);
            edges.push(edge);
          }
        }
      }
      // 二维多段线转换为了三维的Wire
      const wire = Mx3dShapeDownCast.Wire(Mx3dWireTool.ConnectEdgesToWires(edges, 1e-6, false)[0]);
      const trueColor = ent.trueColor;
      // 通过二维的颜色数据构造三维颜色
      const color = new Mx3dGeColor(trueColor.red / 255., trueColor.green / 255., trueColor.blue / 255., MdGe.MxTypeOfColor.Color_TOC_sRGB);
      // 根据二维图纸中的图层，判断各个Wire属于哪个部分，并添加至相应的数据结构中
      if (ent.layer === "10" || ent.layer === "20" || ent.layer === "30")
      {
        if (ent.layer === "10") {
          base.outerWireIndex = base.wires.length;
        }
        base.wires.push(wire);
      }
      else if (ent.layer === "0")
      {
        building.push({ wire, color });
      }
      else if (ent.layer === "atm")
      {
        atm.push({ wire, color });
      }
      else if (ent.layer === "elevator")
      {
        elevator.push({ wire, color });
      }
      else if (ent.layer === "icon")
      {
        icon.push({ wire, color });
      }
      else if (ent.layer === "exit")
      {
        exit.push({ wire, color });
      }
      else if (ent.layer === "wc")
      {
        wc.push({ wire, color });
      }
    }
    else if (ent instanceof McDbText)
    {
      const mcdbTxt = ent as McDbText;
      const content = mcdbTxt.textString;
      const height = mcdbTxt.height * 5;
      const vJust = mcdbTxt.verticalMode;
      const hJust = mcdbTxt.horizontalMode;
      const pt = mcdbTxt.position;
      // 通过二维的文字信息构造三维文字
      const symbolText = new Mx3dSymbolText(content, height, new Mx3dGePoint(pt.x, pt.y, pt.z + 5));
      // 匹配文字的垂直对齐方式
      let vJust3d;
      switch (vJust) {
        case McDb.TextVertMode.kTextBase:
          vJust3d = MdGe.MxVerticalTextAlignment.CVTA_TOPFIRSTLINE;
          break;
        case McDb.TextVertMode.kTextBottom:
          vJust3d = MdGe.MxVerticalTextAlignment.CVTA_BOTTOM;
          break;
        case McDb.TextVertMode.kTextVertMid:
          vJust3d = MdGe.MxVerticalTextAlignment.CVTA_CENTER;
          break;
        case McDb.TextVertMode.kTextTop:
          vJust3d = MdGe.MxVerticalTextAlignment.CVTA_TOP;
          break;
      }
      // 匹配文字的水平对齐方式
      let hJust3d;
      switch (hJust) {
        case McDb.TextHorzMode.kTextAlign:
          hJust3d = MdGe.MxHorizontalTextAlignment.HTA_LEFT;
          break;
        case McDb.TextHorzMode.kTextCenter:
          hJust3d = MdGe.MxHorizontalTextAlignment.HTA_CENTER;
          break;
        case McDb.TextHorzMode.kTextFit:
          hJust3d = MdGe.MxHorizontalTextAlignment.HTA_LEFT;
          break;
        case McDb.TextHorzMode.kTextLeft:
          hJust3d = MdGe.MxHorizontalTextAlignment.HTA_LEFT;
          break;
        case McDb.TextHorzMode.kTextMid:
          hJust3d = MdGe.MxHorizontalTextAlignment.HTA_CENTER;
          break;
        case McDb.TextHorzMode.kTextRight:
          hJust3d = MdGe.MxHorizontalTextAlignment.HTA_RIGHT;
          break;
      }
      symbolText.SetVJustification(vJust3d);
      symbolText.SetHJustification(hJust3d);
      symbolText.SetFontAspect(MdGe.MxFontAspect.FA_BoldItalic);
      symbolText.SetOrientation3D(new Mx3dGeCSYSR(symbolText.Position(), new Mx3dGeDir(0, 0, 1)));
      symbolText.SetZoomable(true);
      text.push(symbolText);
    }
  });
  // 返回所有的数据
  return { base, building, atm, elevator, icon, exit, wc, text };
}
// 读取二维图纸中所有图元的数据，处理为三维数据后，进行高度的拉伸，并贴图等
async function create3DFrom2D(){
  // 加载贴图资源
  const cloth_pic = await Mx3dUtils.LoadFileFromUrl(new URL("./assets/1.jpg", import.meta.url).href, "1.jpg");
  const digital_products_pic = await Mx3dUtils.LoadFileFromUrl(new URL("./assets/2.jpg", import.meta.url).href, "2.jpg");
  const food_pic = await Mx3dUtils.LoadFileFromUrl(new URL("./assets/3.jpg", import.meta.url).href, "3.jpg");
  const atm_pic = await Mx3dUtils.LoadFileFromUrl(new URL("./assets/atm.jpg", import.meta.url).href, "atm.jpg");
  const elevator_pic = await Mx3dUtils.LoadFileFromUrl(new URL("./assets/elevator.jpg", import.meta.url).href, "elevator.jpg");
  const exit_pic = await Mx3dUtils.LoadFileFromUrl(new URL("./assets/exit.jpg", import.meta.url).href, "exit.jpg");
  const wc_pic = await Mx3dUtils.LoadFileFromUrl(new URL("./assets/wc.jpg", import.meta.url).href, "wc.jpg");
  // 创建当前二维mxcad2d对象的选择集
  const ss = new MxCADSelectionSet();
  // 全选当前二维mxcad2d对象中的图元
  ss.allSelect();
  // 获取所有图元信息
  const mapData = getMapData(ss);
  // offset
  const offset = 0.1;
  // 拉伸base
  const baseWiresObj = mapData.base;
  const baseWires = baseWiresObj.wires;
  const baseWiresOuterWireIndex = baseWiresObj.outerWireIndex;
  const baseOuterFaceMaker = new Mx3dMkFace(baseWires[baseWiresOuterWireIndex]);
  let baseFace = baseOuterFaceMaker.Face();
  for(let i = 0; i < baseWires.length; i++){
    if (i === baseWiresOuterWireIndex) {
      continue;
    }
    baseFace = baseFace.cut(new Mx3dMkFace(baseWires[i]).Face());
  }
  const basePrismMaker = new Mx3dMkPrism(baseFace, new Mx3dGeVec(0, 0, -1));
  const baseShape = basePrismMaker.Shape();
  addShapeToDoc(baseShape);
  // 拉伸Building
  const buildingWires = mapData.building;
  buildingWires.forEach(building => {
    const buildingFace = new Mx3dMkFace(building.wire).Face();
    const buildingShape = new Mx3dMkPrism(buildingFace, new Mx3dGeVec(0, 0, 4)).Shape();
    addShapeToDoc(buildingShape, building.color);
  });
  // 拉伸atm
  const atmDatas = mapData.atm;
  atmDatas.forEach(atm => {
    const atmFace = new Mx3dMkFace(atm.wire).Face();
    const atmShape = new Mx3dMkPrism(atmFace, new Mx3dGeVec(0, 0, 4)).Shape();
    atmFace.TranslateByVec(0, 0, 4 + offset);
    addShapeToDoc(atmFace, void 0, atm_pic);
    addShapeToDoc(atmShape, atm.color);
  });
  // 拉伸elevator
  const elevatorDatas = mapData.elevator;
  elevatorDatas.forEach(elevator => {
    const elevatorFace = new Mx3dMkFace(elevator.wire).Face();
    const elevatorShape = new Mx3dMkPrism(elevatorFace, new Mx3dGeVec(0, 0, 4)).Shape();
    elevatorFace.TranslateByVec(0, 0, 4 + offset);
    addShapeToDoc(elevatorFace, void 0, elevator_pic);
    addShapeToDoc(elevatorShape, elevator.color);
  });
  // 拉伸exit
  const exitDatas = mapData.exit;
  exitDatas.forEach(exit => {
    const exitFace = new Mx3dMkFace(exit.wire).Face();
    const exitShape = new Mx3dMkPrism(exitFace, new Mx3dGeVec(0, 0, 4)).Shape();
    exitFace.TranslateByVec(0, 0, 4 + offset);
    addShapeToDoc(exitFace, void 0, exit_pic);
    addShapeToDoc(exitShape, exit.color);
  });
  // 拉伸wc
  const wcDatas = mapData.wc;
  wcDatas.forEach(wc => {
    const wcFace = new Mx3dMkFace(wc.wire).Face();
    const wcShape = new Mx3dMkPrism(wcFace, new Mx3dGeVec(0, 0, 4)).Shape();
    wcFace.TranslateByVec(0, 0, 4 + offset);
    addShapeToDoc(wcFace, void 0, wc_pic);
    addShapeToDoc(wcShape, wc.color);
  });
  // 创建icon
  const iconDatas = mapData.icon;
  iconDatas.forEach(icon => {
    const iconFace = new Mx3dMkFace(icon.wire).Face();
    iconFace.TranslateByVec(0, 0, 4 + offset);
    if (icon.color.Name() === MdGe.MxNameOfColor.Color_NOC_RED)
    {
      addShapeToDoc(iconFace, void 0, cloth_pic);
    }
    else if (icon.color.Name() === MdGe.MxNameOfColor.Color_NOC_YELLOW)
    {
      addShapeToDoc(iconFace, void 0, digital_products_pic);
    }
    else if (icon.color.Name() === MdGe.MxNameOfColor.Color_NOC_GREEN)
    {
      addShapeToDoc(iconFace, void 0, food_pic);
    }
  });
  // 更新显示（将三维文档中的图形显示出来）
  mxcad3d.update();
  // 绘制文字
  const texts = mapData.text;
  texts.forEach(text => {
    mxcad3d.displaySymbolText(text);
  });
}
// 给button添加点击事件，点击后调用create3DFrom2D函数，进行2D到3D的转换
(function addEventToButton(){
  const btn = document.querySelector("button");
  if (btn) {
    btn.addEventListener("click", () => {
      create3DFrom2D();
    });
  }
})()

转换结果，如下图：
图片6.png

文章标签：
前端开发
API
开发框架
JavaScript
开发者
游客uqb2obj6pe7ry
目录
相关文章
简简单单做算法
|
5月前
|
算法 数据安全/隐私保护 计算机视觉
基于二维CS-SCHT变换和LABS方法的水印嵌入和提取算法matlab仿真
该内容包括一个算法的运行展示和详细步骤，使用了MATLAB2022a。算法涉及水印嵌入和提取，利用LAB色彩空间可能用于隐藏水印。水印通过二维CS-SCHT变换、低频系数处理和特定解码策略来提取。代码段展示了水印置乱、图像处理（如噪声、旋转、剪切等攻击）以及水印的逆置乱和提取过程。最后，计算并保存了比特率，用于评估水印的稳健性。
简简单单做算法
58 5
游客uqb2obj6pe7ry
|
10天前
|
移动开发 前端开发 JavaScript
H5网页三维CAD中创建一个装配体
本文介绍了如何使用mxcad3d创建小车装配体模型。通过官方教程搭建项目环境，使用API创建车轮、车轴、车身等部件，并通过实例引用与组合实现装配体的构建。最终通过按钮触发绘制小车模型，展示其三维效果。
游客uqb2obj6pe7ry
17 2
游客uqb2obj6pe7ry
|
1月前
|
JavaScript 前端开发 API
在线三维CAD中创建一个三维管道模型（网页浏览编辑三维CAD）
本文介绍了如何使用mxcad3d创建三维管道模型。mxcad3d提供了丰富的API，使复杂的管道结构设计变得直观简便。首先需安装mxcad包并初始化项目。接着，通过编写JavaScript函数实现圆角方管的绘制，并将其添加到web界面中。点击绘制按钮即可生成管道模型并实时展示。这为网页CAD中的三维建模任务提供了强大支持。相关代码与项目可在[mxcad3d官方仓库](https://gitee.com/mxcadadox/mxcad_docs/tree/master/examples3D/Test3dPipe.7z)获取。
游客uqb2obj6pe7ry
28 4
在线三维CAD中创建一个三维管道模型（网页浏览编辑三维CAD）
游客uqb2obj6pe7ry
|
2月前
|
API 开发者
在线CAD实现图纸比较功能
MXCAD提供了一项实用的图纸比对功能，帮助设计师高效识别不同版本CAD图纸间的改动。用户只需几个简单步骤即可启动比对过程：打开MXCAD在线示例，上传目标图纸，选择“图纸比对”并加载待比对文件。系统会清晰标出所有差异，甚至支持实体定位以便更直观地查看变化细节。此外，MXCAD还开放了相关API，允许开发者根据具体需求进行定制化二次开发，如利用`McObject.loadDwgBackground()`方法加载背景图纸并通过`MxCompare`类获取差异数据等。关注“梦想云图网页CAD”公众号了解更多资讯。
游客uqb2obj6pe7ry
314 1
在线CAD实现图纸比较功能
游客uqb2obj6pe7ry
|
17天前
|
JavaScript API 图形学
（在线查看三维模型）在线CAD中创建三维建筑墙体
本文详细介绍如何使用mxcad3d创建建筑墙体模型。首先需安装Node.js及npm包管理器，并通过npm初始化项目、引入mxcad包。接着，在项目中编写HTML与TypeScript代码以实现墙体绘制，包括外墙、内墙、窗户和门的创建。最后，通过运行项目验证效果。教程及完整项目示例可在[mxcad3d官方仓库](https://gitee.com/mxcadx/mxcad_docs/tree/master/examples3D/Test3dWall.7z)获取。更多详细步骤，请关注“梦想云图网页CAD”公众号。
游客uqb2obj6pe7ry
17 0
国中之林
|
2月前
【qt】平面CAD(计算机辅助设计 )项目 上
【qt】平面CAD(计算机辅助设计 )项目 上
国中之林
39 0
游客uqb2obj6pe7ry
|
3月前
|
开发框架 JavaScript 前端开发
网页三维CAD参数化建模开发框架的搭建教程
mxcad3d是基于mxdraw的基础上，使用TypeScript和C++语言开发的一个网页三维CAD参数化建模框架，我们为开发者提供了丰富的参数化建模的开发接口，用户可以高效、便捷的对基本图元进行创建、同时丰富的JS开发接口方便了用户实现复杂的模型创建和CAD二次开发
游客uqb2obj6pe7ry
54 1
七七喝椰奶
|
10月前
|
图形学
Unity三维模型
Unity三维模型
七七喝椰奶
67 0
长沙红胖子Qt
|
数据可视化
Qt开发技术：Q3D图表开发笔记（三）：Q3DSurface三维曲面图介绍、Demo以及代码详解
qt提供了q3d进行三维开发，虽然这个框架没有得到大量运用也不是那么成功，性能上也有很大的欠缺，但是普通的点到为止的应用展示还是可以的。其中就包括华丽绚烂的三维图表，数据量不大的时候是可以使用的。前面介绍了基础的q3d散点图、柱状图，本篇介绍基础的三维曲面图。Q3DSurface类提供了渲染3D曲面图的方法。该类使开发人员能够渲染3D表面图，并通过自由旋转场景来查看它们。可以通过QSurface3DSeries控制曲面的视觉财产，例如绘制模式和着色。
长沙红胖子Qt
656 0
游客cfbfffbdpmmhc
CAD
平面图、轴测图和立体图
游客cfbfffbdpmmhc
512 0
CAD