vue 展示igltf 格式模型

在Vue应用中展示`.gltf`（GL Transmission Format）格式的3D模型，通常涉及WebGL技术和一些用于加载和渲染3D模型的库，如Three.js或@loaders.gl/glTF。以下是基本的步骤：

1. **安装依赖**：首先，在项目中安装必要的库，比如`three.js`和`@loaders.gl/gltf-loader`。你可以使用npm或yarn命令行工具进行安装：

npm install three @loaders.gl/gltf-loader
# 或者
yarn add three @loaders.gl/gltf-loader

2. **引入并配置**：在Vue组件中导入所需的模块，并设置它们：

import * as THREE from 'three';
import GLTFLoader from '@loaders.gl/gltf-loader';

// 在组件的data或methods中初始化
const loader = new GLTFLoader();
loader.load('path/to/your/model.gltf', (gltf) => {
  // 在这里处理加载完成后的gltf数据
});

3. **创建场景和相机**：创建一个Three.js的基本场景（包含摄像头、灯泡等）、渲染器以及一个空的组来放置模型：

export default {
  setup() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();

    // 其他设置...
  },
  mounted() {
    // 渲染器挂载到DOM上
    this.$refs.canvas.appendChild(renderer.domElement);

    // 加载完成后将模型添加到场景
    loader.load(...).then((gltf) => {
      scene.add(gltf.scene); // 将gltf加载的内容添加到场景
      animate(); // 开始动画更新
    });
  }
};

function animate() {
  requestAnimationFrame(animate);
  // 更新视图和渲染
}

4. **渲染和交互**：确保在组件的生命周期钩子中处理渲染以及用户交互（如鼠标移动或缩放）。

注意：`.gltf`文件可能会比较大，影响性能，所以考虑优化模型（如压缩、切片纹理等），并且在实际项目中可能还需要处理模型加载失败的情况。