vue3中使用three.js加载fbx模型

在Vue3中使用three.js加载fbx模型，需要先安装three.js和fbx-loader。

1. 安装three.js和fbx-loader

npm install three fbx-loader --save

2. 在Vue组件中引入three.js和fbx-loader

import * as THREE from 'three'
import { FBXLoader } from 'fbx-loader'

3. 定义变量和方法

data() {
  return {
    scene: null,
    camera: null,
    renderer: null,
    fbxModel: null
  }
},
methods: {
  init() {
    // 创建场景
    this.scene = new THREE.Scene()

    // 创建相机
    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    this.camera.position.set(0, 50, 200)

    // 创建渲染器
    this.renderer = new THREE.WebGLRenderer()
    this.renderer.setSize(window.innerWidth, window.innerHeight)

    // 将渲染器添加到DOM中
    this.$refs.container.appendChild(this.renderer.domElement)

    // 加载fbx模型
    const loader = new FBXLoader()
    loader.load('/path/to/model.fbx', (fbx) => {
      this.fbxModel = fbx
      this.scene.add(this.fbxModel)
    })
  },
  animate() {
    // 循环渲染场景
    requestAnimationFrame(this.animate)
    this.renderer.render(this.scene, this.camera)
  }
}

4. 在mounted钩子函数中初始化场景和渲染器，启动动画循环

mounted() {
  this.init()
  this.animate()
}

这样就可以在Vue3中使用three.js加载fbx模型了。