Angular13中ThreeJS的DRACOLoader解码器路径配置问题

核心解决步骤 #

1. 复制Draco解码器文件到静态资源目录
   从node_modules/three/examples/jsm/libs/draco/目录下，复制以下文件到你的Angular项目src/assets/draco/文件夹中：

   • draco_decoder.js
   • draco_decoder.wasm
   • draco_encoder.js
   • draco_encoder.wasm
   • draco_loader.js

2. 修正DRACOLoader路径配置
   将代码中DRACOLoader的路径设置改为指向assets下的draco目录：

   const dracoLoader = new DRACOLoader();
   dracoLoader.setDecoderPath('assets/draco/'); // 修改后的正确路径
   dracoLoader.setDecoderConfig( { type: 'js' } );
   

3. 验证Angular静态资源配置
   确保angular.json的assets数组包含src/assets（默认已配置，若修改过需检查）：

   "assets": [
     "src/favicon.ico",
     "src/assets"
   ]
   

修改后的完整代码示例 #

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('assets/draco/');      // 已修正路径
dracoLoader.setDecoderConfig( { type: 'js' } );

// Load your GLB model using GLTFLoader
const loader = new GLTFLoader();

// Load a compressed model using the Draco loader
loader.setDRACOLoader(dracoLoader);
loader.load('assets/pharmaceutical-company.gltf', (gltf) => {
  const model = gltf.scene;
  scene.add(model);
  // Loop through the nodes in the model
  model.traverse((node: any) => {
    console.log(node)
    console.log(node.name)
    // Create the HTML element
    const element = document.createElement('div');
    element.className = 'htmlElement';
    element.textContent = node.name;
    element.style.color = 'red'
    element.style.cursor = 'pointer'
    // Add click functionality
    element.addEventListener('click', () => {
      // Callback function to execute when the element is clicked
      console.log('Element clicked!');
    });

    // Create a CSS2DObject and set its position
    const css2DObject = new CSS2DObject(element);
    css2DObject.position.copy(node.position);

    // Add the CSS2DObject to the CSS3DRenderer
    scene.add(css2DObject);
    if(node.name == 'grab_2'){
      // Create the ECharts chart
      const mainChartContainer = document.createElement('div');
      mainChartContainer.style.padding = '10px';
      mainChartContainer.style.backgroundColor = '#F86F03';
      const chartElement = document.createElement('div');
      chartElement.style.width = '300px';
      chartElement.style.backgroundColor = '#2E4F4F';
      chartElement.style.height = '240px';
      const chart = echarts.init(chartElement);
      chart.setOption({
        title: {
          text: 'Pie Chart'
        },
        series: [
          {
            name: 'Pie Chart',
            type: 'pie',
            data: [
              { value: 335, name: 'Category 1' },
              { value: 310, name: 'Category 2' },
              { value: 234, name: 'Category 3' },
              { value: 135, name: 'Category 4' },
              { value: 1548, name: 'Category 5' }
            ]
          }
        ]
      });
      mainChartContainer.appendChild(chartElement)

      // Create a CSS2DObject and set its position
      const css2DChartObject = new CSS2DObject(mainChartContainer);
      console.log(node.position)
      css2DChartObject.position.copy(node.position);

      // Add the CSS2DObject to the CSS3DRenderer
      scene.add(css2DChartObject);
    }
  });
});

额外说明 #

• 若想使用性能更好的WebAssembly解码器，可将setDecoderConfig的type改为'wasm'，确保draco_decoder.wasm文件已正确放置到assets/draco/目录。
• 编译项目后，检查dist目录下是否存在assets/draco/及对应文件，确认静态资源已正确打包。

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