从CAD地图到3D模型：基于SVG和Three.js的自动化转换方案

1次阅读

共计 3153 个字符，预计需要花费 8 分钟才能阅读完成。

CAD 数据直接用于 Web3D 可视化主要面临三大挑战：

坐标系差异 ：CAD 使用物理单位（毫米 / 英寸）和绝对坐标，而 WebGL 采用 NDC 标准化设备坐标（- 1 到 1 范围）
数据冗余 ：CAD 中的图层、块参照等特性会导致重复几何数据
格式障碍 ：主流 CAD 格式（DWG/DXF）缺乏浏览器原生支持，需中间转换

格式	优势	劣势
DXF	保留 CAD 完整结构	解析复杂，无 CSS 支持
SVG	矢量保留，CSS 可样式化	不支持三维数据
GeoJSON	地理坐标系标准化	丢失 CAD 原始精度

最终选择 SVG：
– 保留矢量化路径数据
– 可通过 CSS 控制可视化样式
– 浏览器原生解析支持

转换公式：

// 世界坐标转 NDC
function worldToNDC(x, y, bounds) {const [minX, minY, maxX, maxY] = bounds;
  return [(x - minX) / (maxX - minX) * 2 - 1,
    -((y - minY) / (maxY - minY) * 2 - 1)
  ];
}

关键步骤：

获取 CAD 模型包围盒（BoundingBox）
遍历所有实体（LINE/POLYLINE/SPLINE）
应用坐标转换并输出 SVG path

// SVG 路径转 BufferGeometry
function svgPathToGeometry(path, height) {const shapes = THREE.SVGLoader.createShapes(path);
  const geometry = new THREE.ExtrudeGeometry(shapes, {
    depth: height,
    bevelEnabled: false
  });
  return geometry.center();}

配置参数说明：

depth：挤压深度（建议 CAD 单位×0.001）
curveSegments：曲线细分精度（默认 12）
UVGenerator：自定义纹理坐标生成器

Douglas-Peucker 算法实现：

function simplify(points, tolerance) {if (points.length <= 2) return points;

  const firstPoint = points[0];
  const lastPoint = points[points.length - 1];

  let maxDistance = 0;
  let index = 0;

  for (let i = 1; i < points.length - 1; i++) {const distance = perpendicularDistance(points[i], firstPoint, lastPoint);
    if (distance > maxDistance) {
      maxDistance = distance;
      index = i;
    }
  }

  if (maxDistance > tolerance) {const left = simplify(points.slice(0, index + 1), tolerance);
    const right = simplify(points.slice(index), tolerance);
    return left.slice(0, -1).concat(right);
  }

  return [firstPoint, lastPoint];
}

const matrix = new THREE.Matrix4();
const meshes = [];

svgPaths.forEach((path, i) => {matrix.setPosition(i * spacing, 0, 0);
  instancedMesh.setMatrixAt(i, matrix);
  meshes.push(svgPathToGeometry(path));
});

const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries(meshes);

Chrome DevTools 操作流程：

打开 Memory 面板
执行转换操作
拍摄堆快照（Heap Snapshot）
筛选 Detached DOM 树
检查 THREE.* 对象引用

常见错误现象：
– 纹理拉伸变形
– 重复贴图错位

解决方案：

new THREE.ExtrudeGeometry(shape, {
  UVGenerator: {generateTopUV: (geometry, vertices, indexA, indexB, indexC) => {
      return [new THREE.Vector2(vertices[indexA * 3], vertices[indexA * 3 + 1]),
        new THREE.Vector2(vertices[indexB * 3], vertices[indexB * 3 + 1]),
        new THREE.Vector2(vertices[indexC * 3], vertices[indexC * 3 + 1])
      ];
    }
  }
});

// cad-to-svg.js
const {parseString} = require('dxf-parser');
const fs = require('fs');

function convertDxfToSvg(dxfPath) {const dxfText = fs.readFileSync(dxfPath, 'utf-8');
  const parsed = parseString(dxfText);

  let svg = `<svg xmlns="http://www.w3.org/2000/svg">`;

  parsed.entities.forEach(entity => {switch (entity.type) {
      case 'LINE':
        svg += `<path d="M${entity.start.x},${entity.start.y} L${entity.end.x},${entity.end.y}"/>`;
        break;
      // 其他实体类型处理...
    }
  });

  return svg + '</svg>';
}

// three-app.js
import * as THREE from 'three';
import {SVGLoader} from 'three/examples/jsm/loaders/SVGLoader';

const loader = new SVGLoader();
loader.load('map.svg', data => {
  const paths = data.paths;
  const group = new THREE.Group();

  paths.forEach(path => {
    const material = new THREE.MeshBasicMaterial({color: path.userData.style.fill});

    const shapes = SVGLoader.createShapes(path);
    const geometry = new THREE.ExtrudeGeometry(shapes, {
      depth: 10,
      bevelEnabled: false
    });

    group.add(new THREE.Mesh(geometry, material));
  });

  scene.add(group);
});

如何实现 LOD 优化？可考虑以下方向：