<template>
  <div id="sence" ref="threeDomElement" tabindex="1"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import * as THREE from 'three'
import { GUI } from 'dat.gui'
import _ from 'lodash'

const threeDomElement = ref(null)

onMounted(() => {

  // 测试 lodash
  const arr = [1, 2, 3]
  console.log(_.reverse(arr))

  // 测试 Three.js
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

  const renderer = new THREE.WebGLRenderer()
  threeDomElement.value.appendChild(renderer.domElement)
  renderer.setSize(window.innerWidth, window.innerHeight)

  const geometry = new THREE.BoxGeometry()
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)

  camera.position.z = 5

  function animate() {
    requestAnimationFrame(animate)
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    renderer.render(scene, camera)
  }

  animate()

  // 测试 Dat.GUI
  const gui = new GUI()
  const cubeFolder = gui.addFolder('Cube')
  cubeFolder.add(cube.rotation, 'x', 0, Math.PI * 2)
  cubeFolder.add(cube.rotation, 'y', 0, Math.PI * 2)
  cubeFolder.open()
})

</script>