用vue3setup语法糖typescript封装一个初始化threejs的组件只需要传入模型

import { defineComponent, onMounted, onUnmounted, ref } from 'vue' import * as THREE from 'three'

export default defineComponent({ props: { model: { type: String, required: true } }, setup(props) { const container = ref(null) let camera: THREE.PerspectiveCamera let scene: THREE.Scene let renderer: THREE.WebGLRenderer let mesh: THREE.Mesh

const init = () => {
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.z = 5

  scene = new THREE.Scene()

  const loader = new THREE.GLTFLoader()
  loader.load(
    props.model,
    (gltf) => {
      mesh = gltf.scene.children[0] as THREE.Mesh
      scene.add(mesh)
    },
    undefined,
    (error) => {
      console.error(error)
    }
  )

  renderer = new THREE.WebGLRenderer({ antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)
  container.value?.appendChild(renderer.domElement)
}

const animate = () => {
  requestAnimationFrame(animate)

  mesh.rotation.x += 0.01
  mesh.rotation.y += 0.01

  renderer.render(scene, camera)
}

onMounted(() => {
  init()
  animate()
})

onUnmounted(() => {
  container.value?.removeChild(renderer.domElement)
})

return {
  container
}

} })