vue three.js加载本地glb

在Vue.js项目中使用Three.js加载本地GLB文件，首先你需要安装所需的依赖库，如`@vue/three-loader` 和 `three-glTF-loader`。以下是基本步骤：

1. 安装依赖：

npm install @vue/three-loader three gltfjsx-loader

2. 配置Webpack：在`.vue`组件的`script`标签或全局配置中添加对`@vue/three`和`THREE.GLTFLoader`的导入，并告诉Webpack如何处理`.gltf`或`.glb`文件。

// main.js 或者需要使用的地方
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

Vue.config.productionTip = false // 如果是生产环境，移除这行

// 或者在单个组件中
export default {
  setup() {
    const gltfLoader = new GLTFLoader()
    return { gltfLoader }
  }
}

3. 使用loader加载本地GLB文件：

<!-- .vue 文件 -->
<template>
  <div id="app">
    <button @click="loadModel">Load Model</button>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  methods: {
    async loadModel() {
      const canvas = this.$refs.canvas
      const gltfLoader = this.gltfLoader
      const model = await gltfLoader.load('path/to/your/model.glb')
      // 创建场景、相机、渲染器等
      const scene = new THREE.Scene()
      model.scene.position.set(0, 0, -5) // 设置模型位置
      scene.add(model.scene)
      // 然后将渲染器绑定到canvas上并渲染
      const renderer = new THREE.WebGLRenderer({ canvas })
      renderer.render(scene, camera)
    },
  }
}
</script>