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

以下是用Vue3 setup语法糖封装一个初始化three.js的组件的示例代码：

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

<script>
import { ref, onMounted } from 'vue';
import * as THREE from 'three';

export default {
  setup() {
    const container = ref(null);
    let scene, camera, renderer;

    onMounted(() => {
      // 初始化场景
      scene = new THREE.Scene();
      // 初始化相机
      camera = new THREE.PerspectiveCamera(75, container.value.clientWidth / container.value.clientHeight, 0.1, 1000);
      camera.position.z = 5;
      // 初始化渲染器
      renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(container.value.clientWidth, container.value.clientHeight);
      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>

该组件包含一个引用为“container”的div元素，用于在其中渲染three.js场景。在setup函数中，我们使用Vue3提供的ref和onMounted方法初始化了场景、相机、渲染器，并将渲染器的domElement添加到了container中。我们还添加了一个立方体到场景中，并使用requestAnimationFrame方法不断更新立方体的旋转角度并渲染场景。最后，我们将container引用返回，以便在模板中使用。