<script setup lang="ts">
import { Ref, ref } from 'vue'
import { useLoop } from '/@/core'
import { TresInstance } from '../types'
import { useTexture } from '/@/core/'

const sphereRef: Ref<TresInstance | null> = ref(null)

useLoop((_delta, elapsedTime) => {
  if (sphereRef.value) {
    sphereRef.value.position.y = Math.sin(elapsedTime * 0.2) * 2.0
  }
})

/* const texture = await useTexture(['/textures/stylized-leaves-material/Stylized_Leaves_002_basecolor.jpg']) */
const pbrTexture = await useTexture({
  map: '/textures/stylized-leaves-material/Stylized_Leaves_002_basecolor.jpg',
  /* displacementMap: '/textures/stylized-leaves-material/Stylized_Leaves_002_height.png', */
  roughnessMap: '/textures/stylized-leaves-material/Stylized_Leaves_002_roughness.jpg',
  normalMap: '/textures/stylized-leaves-material/Stylized_Leaves_002_normal.jpg',
  ambientOcclusion: '/textures/stylized-leaves-material/Stylized_Leaves_002_ambientOcclusion.jpg',
})
</script>
<template>
  <Mesh ref="sphereRef" :position="[-2, 2, 2]" :scale="1" cast-shadow>
    <SphereGeometry :args="[1, 500, 500]" />
    <MeshStandardMaterial v-bind="pbrTexture" />
  </Mesh>
</template>
