Vue 3 setup 语法糖与 TypeScript 封装 Three.js 组件

<template>
  <div ref='canvasContainer'></div>
</template>
<script lang='ts'>
import { ref, onMounted, onUnmounted } from 'vue'
import * as THREE from 'three'

export default {
  setup() {
    const canvasContainer = ref(null)
    let renderer: THREE.WebGLRenderer | null = null
    let scene: THREE.Scene | null = null
    let camera: THREE.PerspectiveCamera | null = null
    let cube: THREE.Mesh | null = null

    const init = () => {
      // 创建渲染器
      renderer = new THREE.WebGLRenderer()
      renderer.setSize(window.innerWidth, window.innerHeight)
      canvasContainer.value.appendChild(renderer.domElement)

      // 创建场景
      scene = new THREE.Scene()

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

      // 创建立方体
      const geometry = new THREE.BoxGeometry(1, 1, 1)
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
      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!)
    }

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

    onUnmounted(() => {
      renderer?.domElement.remove()
    })

    return {
      canvasContainer,
    }
  },
}
</script>
<p>在这个例子中，我们使用了 Vue 3 的 'ref' 函数来创建一个对 DOM 元素的引用，并在组件的生命周期钩子函数 'onMounted' 和 'onUnmounted' 中分别执行初始化和清理工作。我们还使用了 TypeScript 来声明变量类型和函数参数类型，以提高代码的可读性和可维护性。</p>
<p>在 'init' 函数中，我们创建了渲染器、场景、相机和立方体，并将立方体添加到场景中。在 'animate' 函数中，我们使用 'requestAnimationFrame' 函数来递归地更新立方体的旋转角度，并调用渲染器的 'render' 方法来渲染场景。</p>
<p>最后，在组件的模板中，我们使用 'ref' 函数创建了一个对 DOM 元素的引用，并将其传递给 'canvasContainer' 变量。这个引用将用于在 'init' 函数中添加渲染器的 DOM 元素。</p>