用vue3setup语法糖typescript封装一个初始化threejs的组件

以下是使用Vue 3 setup语法糖和TypeScript封装的一个简单的初始化three.js的组件：

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

<script lang="ts">
import * as THREE from 'three'
import { ref, onMounted } from 'vue'

export default {
  name: 'ThreeScene',
  setup() {
    const container = ref<HTMLDivElement>()

    onMounted(() => {
      // 初始化场景
      const scene = new THREE.Scene()

      // 初始化相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
      camera.position.z = 5

      // 初始化渲染器
      const renderer = new THREE.WebGLRenderer({ antialias: true })
      renderer.setSize(window.innerWidth, window.innerHeight)
      container.value?.appendChild(renderer.domElement)

      // 初始化立方体
      const geometry = new THREE.BoxGeometry()
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
      const cube = new THREE.Mesh(geometry, material)
      scene.add(cube)

      // 渲染场景
      const animate = () => {
        requestAnimationFrame(animate)
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01
        renderer.render(scene, camera)
      }

      animate()
    })

    return {
      container
    }
  }
}
</script>

在这个组件中，我们使用了ref来引用容器元素，使用onMounted钩子在组件初始化时执行我们的three.js初始化代码。

在初始化代码中，我们创建了场景、相机、渲染器和一个简单的立方体模型，然后使用renderer.render方法在动画循环中渲染场景。

最后，我们将容器元素传递给模板，以便它可以在其中渲染three.js场景。