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

// <script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as THREE from 'three/webgpu'
import { color, time, sin, positionLocal } from 'three/tsl'

const el = ref(null)

let renderer, scene, camera, mesh

const handleResize = () => {
  if (!renderer || !camera) return
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
}

onMounted(async () => {
  // 1) 场景 / 相机 / 渲染器
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
  camera.position.z = 2.5

  renderer = new THREE.WebGPURenderer({ antialias: true })
  renderer.setSize(window.innerWidth, window.innerHeight)
  el.value.appendChild(renderer.domElement)

  // 2) 平面网格 + Node 材质（TSL）
  const geometry = new THREE.PlaneGeometry(2, 2)
  const material = new THREE.MeshBasicNodeMaterial()

  // TSL color node equivalent to the R3F example: RGB varying over time
  const R = sin(positionLocal.x.add(time)).add(1).mul(0.5)
  const G = sin(positionLocal.y.add(time)).add(1).mul(0.5)
  const B = sin(positionLocal.x.add(time)).add(1).mul(0.5)
  material.colorNode = color(R, G, B)

  mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)

  // 3) 监听尺寸
  window.addEventListener('resize', handleResize)

  // 4) 初始化并渲染（不同 three 版本：init 可能是函数或 Promise 属性）
  if (typeof renderer.init === 'function') await renderer.init()
  else if (renderer.init) await renderer.init

  renderer.setAnimationLoop(() => {
    renderer.render(scene, camera)
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize)
  renderer?.setAnimationLoop(null)
  mesh?.geometry?.dispose?.()
  mesh?.material?.dispose?.()
  renderer?.dispose?.()
})
// </script>