vue2 中如何加载glb模型 并自动调整模型位置及缩放大小

在 Vue2 中加载 GLB 模型并自动调整其位置和缩放大小通常需要结合 Three.js 和 Vue 的组件化思想。Three.js 提供了丰富的三维图形渲染库，可以处理各种模型格式，包括 GLB。

以下是步骤概述：

1. **安装依赖**：
首先，你需要在项目中安装 `@vue/threejs` 和 `three.GLTFLoader`，这将允许你在 Vue 组件中加载 GLB 文件。你可以使用 npm 或 yarn 安装：

   npm install three @vue/threejs --save

2. **创建组件**：
创建一个新的 Vue 组件，比如叫 `ModelViewer.vue`，然后引入必要的库，并在模板中添加 Three.js 实例：

<template>
  <div ref="container" style="width: 100%; height: 100vh;"></div>
</template>

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

export default {
  name: 'ModelViewer',
  mounted() {
    this.createScene();
  },
  methods: {
    createScene() {
      //...
    },
  },
};
</script>

3. **加载模型**：
在 `createScene` 方法中，使用 `GLTFLoader` 加载 GLB 文件，并设置加载完成后的回调函数来处理模型的位置、缩放等：

methods: {
  async createScene() {
    const container = this.$refs.container;
    
    const loader = new GLTFLoader();
    const gltf = await loader.load('path_to_your_model.glb');

    // 获取模型数据
    const scene = gltf.scene;

    // 设置初始位置和缩放
    scene.position.set(0, 0, -5); // 调整 Z 坐标以保持适当距离
    scene.scale.set(1, 1, 1); // 默认缩放比例

    // 添加到场景
    this.$refs.container.appendChild(scene);
  },
},

4. **调整大小和位置**：
如果你想让模型自适应容器大小，可以在组件内部监听窗口大小变化事件，更新模型的大小。例如：

mounted() {
  window.addEventListener('resize', this.onWindowResize);
}

beforeDestroy() {
  window.removeEventListener('resize', this.onWindowResize);
},

onWindowResize() {
  // 更新模型尺寸
  this.updateModelSize();
},

updateModelSize() {
  const containerWidth = this.$refs.container.clientWidth;
  const containerHeight = this.$refs.container.clientHeight;
  // 根据容器尺寸动态调整模型大小
  scene.scale.set(containerWidth / 100, containerHeight / 100, 1);
}

注意，这只是一个基本示例，实际应用中可能还需要考虑其他因素如动画、材质等。