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

kunkun小黑子

曾经实现过一个解析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 { // 点 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; };