深入理解 Vue 3 Composition API 与 Three.js 的结合

在构建现代化的 Creative Web 应用时，将 Vue 3 的响应式系统与 Three.js 的渲染循环完美结合，是实现沉浸式体验的关键。

为什么选择 Composition API？

传统的 Options API 在处理复杂的逻辑复用时显得力不从心，尤其是在管理 WebGL 上下文、Resize 监听以及 RAF (Request Animation Frame) 循环时。

Composition API 允许我们将逻辑封装在独立的 Composable 函数中，例如 useThreeScene。

// composables/useThreeScene.ts
import * as THREE from 'three'

export const useThreeScene = (canvasRef: Ref<HTMLCanvasElement | null>) => {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000)
  
  // ... 初始化逻辑
  
  return { scene, camera }
}

响应式驱动的 Uniforms

利用 Vue 的 watchEffect 或 watch，我们可以轻松地将 UI 状态映射到 Shader 的 Uniforms 上。

<script setup>
import { ref, watch } from 'vue'
import gsap from 'gsap'

const hoverState = ref(0)

// 当 hoverState 变化时，驱动 Shader
watch(hoverState, (newVal) => {
  gsap.to(material.uniforms.uHover, {
    value: newVal,
    duration: 0.5,
    ease: 'power2.out'
  })
})
</script>

性能优化 (Performance Optimization)

在 Nuxt 3 中使用 Three.js 时，必须注意 Hydration 问题。始终使用 <ClientOnly> 组件包裹 Canvas，以避免服务端渲染时的上下文错误。

Pro Tip: 使用 shallowRef 代替 ref 来存储 Three.js 的实例对象（如 Scene, Camera, Renderer），因为这些对象非常复杂，不需要 Vue 的深度响应式代理，这样可以显著提升性能。

结语

通过合理架构，我们可以创造出既有 SEO 优势，又具备原生级 3D 体验的 Web 应用。