Three.js + Vue 处理glb文件过大问题（DRACOLoader加载压缩glb）

<template>
  <div id="container"></div>
</template>
 
<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 
export default {
  name: 'ModelViewer',
  props: {
    modelPath: String,
  },
  mounted() {
    const container = document.getElementById('container');
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(renderer.domElement);
 
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
    camera.position.z = 5;
 
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
 
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath('path/to/draco/gltf/decoder/');
    dracoLoader.setDecoderConfig({ type: 'js' });
    dracoLoader.preload();
 
    const gltfLoader = new GLTFLoader();
    gltfLoader.setDRACOLoader(dracoLoader);
 
    gltfLoader.load(this.modelPath, (gltf) => {
      scene.add(gltf.scene);
      gltf.scene.position.set(0, -2, 0);
 
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        controls.update();
      }
 
      animate();
    }, undefined, (error) => {
      console.error(error);
    });
  }
}
</script>
 
<style>
#container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

在这个代码实例中，我们首先导入了必要的Three.js组件，并在mounted生命周期钩子中初始化了场景、摄像机、渲染器和控件。然后，我们创建了一个DRACOLoader实例，并通过其setDecoderPath方法设置了Decoder的路径。通过gltfLoader.load方法加载glTF模型，并在加载成功后将其添加到场景中。如果加载过程中出现错误，会通过回调函数打印错误信息。最后，我们启动了渲染循环，并在组件销毁时处理相关清理工作。这个例子展示了如何在Vue中处理和加载glb文件，并处理由于文件过大导致的加载问题。