vue中threejs加载gltf模型

在Vue中加载GLTF模型需要使用Three.js库。下面是一个简单的例子：

1. 首先，安装Three.js库：

npm install three

2. 在Vue组件中导入所需的Three.js模块和GLTFLoader：

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

3. 在Vue组件的methods中创建一个函数来加载GLTF模型：

methods: {
  loadModel() {
    const loader = new GLTFLoader();
    const scene = new THREE.Scene();

    loader.load('path/to/model.gltf', (gltf) => {
      const model = gltf.scene;
      scene.add(model);

      // 可以在这里对模型进行一些操作，例如设置位置、旋转等

      // 渲染场景
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
      renderer.render(scene, camera);
    });
  }
}

4. 在Vue组件的mounted钩子中调用loadModel()函数来加载模型：

mounted() {
  this.loadModel();
}

请注意，上述代码仅为加载GLTF模型的基本示例。你还可以根据需要进行更多的操作，例如添加光照、材质等。