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

在Vue3中使用three.js加载fbx模型，可以按照以下步骤进行操作：

1. 首先，在Vue3项目中安装three.js和fbx-loader：

npm install three fbx-loader --save

2. 在Vue3中创建一个Three.js组件，可以参考如下代码：

<template>
  <div ref="container"></div>
</template>

<script>
import * as THREE from 'three'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'

export default {
  name: 'ThreeScene',
  mounted() {
    // 创建场景
    this.scene = new THREE.Scene()

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

    // 创建渲染器
    this.renderer = new THREE.WebGLRenderer({ antialias: true })
    this.renderer.setSize(window.innerWidth, window.innerHeight)
    this.renderer.setPixelRatio(window.devicePixelRatio)

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

    this.animate()

    // 加载fbx模型
    const loader = new FBXLoader()
    loader.load('/path/to/model.fbx', (fbx) => {
      this.scene.add(fbx)
    })
  },
  methods: {
    animate() {
      requestAnimationFrame(this.animate)
      this.renderer.render(this.scene, this.camera)
    }
  }
}
</script>

在mounted函数中，我们创建了场景、相机和渲染器，并将渲染器添加到Vue组件的DOM元素中。然后，使用FBXLoader加载fbx模型，并将模型添加到场景中。最后，使用requestAnimationFrame函数来循环渲染场景。

3. 在Vue3中使用ThreeScene组件

在Vue3项目中，我们可以使用ThreeScene组件来加载fbx模型。例如：

<template>
  <div>
    <ThreeScene />
  </div>
</template>

<script>
import ThreeScene from './ThreeScene.vue'

export default {
  components: {
    ThreeScene
  }
}
</script>

这样就可以在Vue3中加载fbx模型了。