Vue 3 Setup 语法糖 TypeScript 封装 Three.js 组件 - 简化模型加载

Vue 3 Setup 语法糖 TypeScript 封装 Three.js 组件 - 简化模型加载

本文将介绍如何使用 Vue 3 的 Setup 语法糖和 TypeScript 封装一个 Three.js 组件，使你可以轻松地加载和渲染 3D 模型，只需要传入模型的路径即可。组件还包含一个简单的旋转动画，使模型能够动态地旋转。

代码示例：

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
    }
  }
})

组件使用示例：

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

<script setup>
import ThreeModel from './ThreeModel.vue'

const modelPath = 'path/to/your/model.gltf'
</script>

<template>
  <ThreeModel :model="modelPath" />
</template>

组件功能说明：

• 使用 defineComponent 函数定义组件
• 使用 props 属性接收模型路径
• 使用 setup 函数进行组件逻辑处理
• 使用 ref 创建一个 container 变量，用于存放 Three.js 的渲染结果
• 使用 onMounted 生命周期钩子初始化 Three.js 场景和渲染器
• 使用 onUnmounted 生命周期钩子清除 Three.js 渲染结果
• 使用 requestAnimationFrame 实现动画效果
• 使用 GLTFLoader 加载模型文件
• 使用 WebGLRenderer 渲染 Three.js 场景

总结：

本组件封装了 Three.js 的基本渲染流程，并使用 Vue 3 的 Setup 语法糖和 TypeScript 进行了优化，使其更加易于使用和维护。你可以根据需要修改代码，添加更多的功能，例如添加材质、灯光、相机控制等。