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

1次阅读

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

将 CAD 地图数据直接用于 Web3D 场景主要面临三大挑战：

坐标系差异 ：CAD 通常采用局部坐标系（单位可能是毫米或英寸），而 WebGL 使用右手坐标系且单位无明确物理意义。例如某建筑图纸中(12000, 5000) 可能表示 12 米×5 米的区域，直接渲染会导致比例失真。
数据冗余：CAD 文件包含大量施工标注、图层信息等 Web3D 不需要的元数据。测试发现某 10MB 的 DXF 文件经清洗后 SVG 仅剩 800KB。
曲线描述差异：CAD 使用 NURBS 等高阶曲线，而 WebGL 仅支持多边形网格。强制转换时常见锯齿现象，特别是弧型道路的转换失真率可达 15%。

中间格式的选取直接影响后续处理效率：

格式	解析难度	几何保持度	文件体积	Web 兼容性
DXF	高	★★★★☆	大	差
SVG	中	★★★★☆	中	优
GeoJSON	低	★★☆☆☆	小	优

最终选择 SVG 的原因：
– 保留完整的矢量路径信息（如<path d="M10 10 L90 10...">）
– CSS 样式可直接映射到材质属性
– 内置的 <g> 标签天然对应 Three.js 的 Group 对象

采用仿射变换矩阵处理坐标系差异：

\begin{bmatrix}
x'\\ y' \\ 1
\end{bmatrix}
= 
\begin{bmatrix}
s & 0 & t_x \\
0 & s & t_y \\
0 & 0 & 1
\end{bmatrix}
\begin{bmatrix}
x \\ y \\ 1
\end{bmatrix}

其中 s 为缩放因子（建议取 1/ 绘图单位），t_x/t_y 为平移量。实际代码示例：

// 将 CAD 坐标转为 SVG 视口坐标
function cadToSvgPoint(x, y, cadExtent, svgWidth) {const scale = svgWidth / (cadExtent.xMax - cadExtent.xMin);
  return {x: (x - cadExtent.xMin) * scale,
    y: (cadExtent.yMax - y) * scale // Y 轴翻转
  };
}

关键步骤：
1. 使用 DOMParser 解析 SVG 字符串
2. 提取 <path> 元素的 d 属性值
3. 通过 svg-path-properties 库获取离散化点集

import {getPropertiesAtLength} from 'svg-path-properties';

function pathToPoints(svgPath, segmentLength = 5) {const props = getPropertiesAtLength(svgPath);
  const points = [];
  for(let len=0; len<=props.totalLength; len+=segmentLength) {points.push(props.getPointAtLength(len));
  }
  return points;
}

// 创建 BufferGeometry
const shape = new THREE.Shape(points.map(p => new THREE.Vector2(p.x, p.y)));
const geometry = new THREE.ExtrudeBufferGeometry(shape, {
  depth: 10,  // 挤压高度
  bevelEnabled: false
});

针对不同地图要素采用差异化处理：
– 建筑物 ：根据楼层数动态设置depth 参数
– 道路：先提取中心线再挤压（需处理交叉路口拓扑）
– 水域：使用THREE.ShapeGeometry 生成平面

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

  let maxDist = 0;
  let index = 0;
  const [first, last] = [points[0], points[points.length-1]];

  for(let i=1; i<points.length-1; i++) {const dist = perpendicularDistance(points[i], first, last);
    if(dist > maxDist) {
      maxDist = dist;
      index = i;
    }
  }

  if(maxDist > tolerance) {const left = simplifyPoints(points.slice(0, index+1), tolerance);
    const right = simplifyPoints(points.slice(index), tolerance);
    return left.slice(0, -1).concat(right);
  }
  return [first, last];
}

实例化渲染：对重复元素（如行道树）使用THREE.InstancedMesh
合并几何体：同材质建筑物合并为单一BufferGeometry
视锥裁剪 ：配合THREE.Frustum 实现动态加载

Chrome DevTools 的内存快照对比方法：
1. 操作前拍摄堆快照（Snapshot 1）
2. 执行 10 次完整转换流程
3. 操作后拍摄堆快照（Snapshot 2）
4. 对比 Delta 列，重点关注 Detached SVGElement 和Three.js geometries

当纹理出现拉伸时，需重新计算 UV 坐标：

geometry.faceVertexUvs[0] = faces.map(face => {const [a, b, c] = face.vertices;
  return [new THREE.Vector2(a.x / width, a.y / height),
    new THREE.Vector2(b.x / width, b.y / height),
    new THREE.Vector2(c.x / width, c.y / height)
  ];
});
geometry.uvsNeedUpdate = true;

/**
 * 将 DXF 转换为优化后的 SVG
 * @param {string} dxfPath - 输入 DXF 文件路径
 * @param {Object} options - 转换配置
 */
async function convertDXFToSVG(dxfPath, options) {const dxf = await parseDXF(fs.readFileSync(dxfPath));
  const svgBuilder = new SVGBuilder({precision: options.precision || 2});

  dxf.entities.forEach(entity => {if(entity.type === 'LINE') {svgBuilder.addLine(entity.start, entity.end);
    }
    // 其他实体类型处理...
  });

  return svgBuilder.toSVGString();}

import {SVGLoader} from 'three/examples/jsm/loaders/SVGLoader';

const loader = new SVGLoader();
loader.load('map.svg', data => {const group = new THREE.Group();
  data.paths.forEach(path => {const shapes = SVGLoader.createShapes(path);
    shapes.forEach(shape => {
      const geometry = new THREE.ExtrudeBufferGeometry(shape, {depth: path.userData?.depth || 5});
      const mesh = new THREE.Mesh(geometry, material);
      group.add(mesh);
    });
  });
  scene.add(group);
});

当前方案在 LOD（细节层次）方面仍有提升空间：
1. 如何根据相机距离动态切换 SVG 的离散化精度？
2. 建筑物在远距离时可否用立方体替代复杂挤压模型？
3. 道路网络可否实现基于屏幕空间的简化？

建议后续探索 Three.js 的 LOD 类和 MSAA 抗锯齿技术的结合应用。

正文完