vue编译gltf文件

在Vue中编译gltf文件需要使用three.js库。首先，在Vue项目中安装three.js库：

npm install three

然后，可以在Vue组件中使用以下代码加载gltf模型：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default {
  name: 'MyComponent',
  mounted() {
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.canvas.appendChild(renderer.domElement);

    // 加载gltf模型
    const loader = new GLTFLoader();
    loader.load('/path/to/my-model.gltf', (gltf) => {
      scene.add(gltf.scene);
      renderer.render(scene, camera);
    });
  },
};

注意，上面的代码中的`this.$refs.canvas`指的是Vue组件模板中的canvas元素，需要在模板中添加：

<template>
  <div ref="canvas"></div>
</template>

然后，在Vue组件的样式中设置canvas元素的宽度和高度：

canvas {
  width: 100%;
  height: 100%;
}

最后，通过`npm run build`编译Vue项目，生成的dist目录中会包含编译好的gltf模型文件。