前端 - 如何在网页上实现对于3D CAD文件的解析预览？

Question

如何在网页上实现对于3D CAD文件的解析预览？
比如常用的机械设计文件格式，solidworks、UG、CATIA等

Answer 1

你可以看看这个库 https://www.npmjs.com/package/mxdraw

mxdraw 是个在线CAD的JS库，实现在线CAD，DWG图纸浏览和编辑等功能的一套解决方案， 支持大部分现代主流浏览器比如Chrome、Edge等, 不支持IE浏览器。 DWG文件通过后端程序格式转换后后端程序详见，就可使用mxdraw在线打开。

Answer 2

在网页上实现对 3D CAD 文件的解析和预览通常需要使用特定的库或工具，因为这些文件格式通常是专有的，并且需要相应软件来解析。以下是一种可能的解决方案：

使用三维模型库和工具

1. Three.js: 这是一个流行的用于在网页上渲染 3D 模型的 JavaScript 库。它可以帮助解析和显示多种 3D 文件格式。对于 SolidWorks、UG、CATIA 文件，你可能需要将它们转换为能够被 Three.js 解析的格式，比如 STL、OBJ 或者 glTF。
2. 转换器: 你需要一个转换器将专有的 CAD 文件格式转换为网页可渲染的格式。例如，可以使用 SolidWorks、UG 或 CATIA 等软件将文件保存为 OBJ、STL 或 glTF 格式。这些格式通常更易于在网页上渲染。

示例实现：

假设你有一个 SolidWorks 文件，你可以通过以下步骤在网页上进行预览：

1. 转换文件格式：使用 SolidWorks 软件将文件保存为 STL 或者 OBJ 格式。
2. 引入 Three.js：在网页中引入 Three.js 库。
3. 加载和渲染模型：使用 Three.js 加载转换后的文件，并将其渲染到网页上的 3D 场景中。

// 引入 Three.js 库<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>// 创建 Three.js 场景const scene = new THREE.Scene();// 创建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 加载模型const loader = new THREE.STLLoader(); // 如果你转换为 STL 格式loader.load('path/to/your/model.stl', function (geometry) {    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });    const mesh = new THREE.Mesh(geometry, material);    scene.add(mesh);    renderer.render(scene, camera);});

这个示例假设你已经转换了 SolidWorks 文件为 STL 格式。你可以使用不同的加载器和材质来适配不同的文件格式和展示效果。这仅是一个简单的示例。在实际应用中，你可能需要处理更复杂的场景、光照、交互以及更多的渲染效果。此外，对于每种文件格式，你可能需要使用不同的加载器和处理方法来确保正确的渲染和显示。

Answer 3

曾经实现过一个解析CAD到Three.js的逻辑，主要的思路是遍历CAD文件中的几何顶点，然后转换成Three.js的逻辑。

这里不宜贴太长的代码，如果需要完整的loader代码，请私信我获取

这里给出核心代码：

const handlePolygon = (vertices) => {  // 点  const geomPositions = [];  // 面索引  const geomIndexs = [];  // 面的法向量  const geomNormals = [];  // 计算当前存储了多少个点，每三个元素为一个点的坐标  let countVertices = geomPositions.length / 3;  // 用来记录这个多边形的点在vertices中的位置  const tmpIndexs = [];  // 遍历多边形的每一点  for (let i = 0; i < vertices.length; i++) {    // 获取多边形中的一点    const point = vertices[i];    // 将点坐标解析到vertices中    geomPositions.push(...point);    // 记录该顶点在vertices中位置    tmpIndexs.push(countVertices);    countVertices++;  }  // 将坐标数组划分成3个一组的点坐标  const verticesChunks = chunkArray(geomPositions, 3);  for (let i = 2; i < tmpIndexs.length; i++) {    const p0Index = tmpIndexs[0];    const p1Index = tmpIndexs[i - 1];    const p2Index = tmpIndexs[i];    // 设置平面索引    geomIndexs.push(p0Index, p1Index, p2Index);    const p0 = new Vector3().fromArray(verticesChunks[p0Index]);    const p1 = new Vector3().fromArray(verticesChunks[p1Index]);    const p2 = new Vector3().fromArray(verticesChunks[p2Index]);    // 计算三角形法向量    const normalVector = calculateTriangleNormalVector(p0, p1, p2);    // 设置三角形每个点的法向量    geomNormals.push(...normalVector.toArray(), ...normalVector.toArray(), ...normalVector.toArray());  }  return {    positions: geomPositions,    indexs: geomIndexs,    normals: geomNormals  };};const geom3DParse = (polygons) => {  // 点  let geomPositions = [];  // 面索引  let geomIndexs = [];  // 面的法向量  let geomNormals = [];  // 提取多面体的每个平面的点坐个  const polygonsArray = polygons.filter((polygon) => 'vertices' in polygon).map((polygon) => polygon.vertices);  // 解析每个平面的点和面索引  polygonsArray.forEach((vertices) => {    const { positions, indexs, normals } = handlePolygon(vertices);    const geomIndexsLength = geomIndexs.length;    geomPositions = geomPositions.concat(positions);    geomNormals = geomNormals.concat(normals);    geomIndexs = geomIndexs.concat(indexs.map((index) => index + geomIndexsLength));  });  const geomerty = new BufferGeometry();  geomerty.setAttribute('position', new BufferAttribute(new Float32Array(geomPositions), 3));  geomerty.setAttribute('normal', new BufferAttribute(new Float32Array(geomNormals), 3));  geomerty.index = new BufferAttribute(new Uint16Array(geomIndexs), 1);  return geomerty;};

Answer 4

在网页上实现对于3D CAD文件的解析预览，可以采用以下几种方式：

1. 使用WebGL和Three.js：Three.js是一个基于WebGL的3D库，可以帮助我们在网页上创建和显示3D图形。对于3D CAD文件的解析，我们可以利用Three.js的加载器进行导入，然后渲染出模型。
2. 使用BIM框架：建筑信息模型（BIM）框架如ArchiCAD或者Revit提供了Web端的展示功能，可以将3D CAD文件导入并展示。
3. 使用CAD软件的API：有些CAD软件提供了Web API，比如AutoDesk的Forge平台，可以通过API导入和显示3D模型。
4. 使用第三方服务：有一些专门提供3D模型展示服务的第三方平台，比如Google的SketchUp Viewer或者Twinmotion等，可以通过API或者直接上传的方式导入模型并展示。

以上方法中，使用WebGL和Three.js的方式比较灵活，可以根据自己的需求进行定制。但是需要一定的编程知识来实现。而使用BIM框架或者CAD软件的API，相对比较方便，但需要相应的软件环境支持。使用第三方服务的门槛最低，但需要遵守相应的服务条款。