React+TypeScript项目使用three-dxf、dxf-parser实现DXF查看器咨询

这两个库可以在React + TypeScript项目中使用，你遇到的问题主要是引入方式错误和TypeScript类型缺失导致的，具体解决方案如下：

1 调整引入写法 #

目前主流React项目都采用ES Module规范，原来的CommonJS require写法不兼容，替换为如下导入方式：

import * as Viewer from 'three-dxf';
import DxfParser from 'dxf-parser';

如果提示找不到default导出，可以用兼容写法如下：

import * as DxfParserLib from 'dxf-parser';
const DxfParser = DxfParserLib.default || DxfParserLib;

2 补充TypeScript类型声明 #

这两个库没有官方内置的TypeScript类型定义，需要在项目中手动添加声明文件避免TS报错：

1. 在项目src目录下新建global.d.ts文件
2. 写入如下声明内容，后续用到更多API可以自行补充类型：

declare module 'three-dxf' {
  export function draw(
    dxf: any,
    scene: any,
    options?: {
      useLayerColors?: boolean;
      defaultColor?: number;
      [key: string]: any;
    }
  ): { bounds: any, layers: any };
}

declare module 'dxf-parser' {
  export default class DxfParser {
    parse(buffer: ArrayBuffer | string): any;
    parseSync(buffer: ArrayBuffer | string): any;
  }
}

3 组件内使用示例 #

可参考如下最小可运行示例调整你的代码：

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
import * as Viewer from 'three-dxf';
import DxfParser from 'dxf-parser';

const DxfViewer: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    // 初始化Three.js基础环境
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    containerRef.current.appendChild(renderer.domElement);

    // 加载渲染DXF文件
    const loadDxf = async () => {
      // 替换为你的DXF文件路径
      const res = await fetch('/test.dxf');
      const dxfText = await res.text();
      const parser = new DxfParser();
      const dxfData = parser.parseSync(dxfText);
      // 调用three-dxf渲染DXF内容到场景
      Viewer.draw(dxfData, scene);
      // 自行调整相机位置适配DXF文件尺寸
      camera.position.z = 100;
    };
    loadDxf();

    // 渲染循环
    const animate = () => {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();

    // 组件卸载销毁资源
    return () => {
      renderer.dispose();
      containerRef.current?.removeChild(renderer.domElement);
    };
  }, []);

  return <div ref={containerRef} style={{ width: '100%', height: '800px' }} />;
};

export default DxfViewer;

其他注意事项 #

• 安装依赖时确认已安装对应的核心包：npm install three-dxf dxf-parser three
• 如果需要更多类型提示，可以根据库的功能补充global.d.ts中的类型定义

内容的提问来源于stack exchange，提问作者tamago