<template>
<vue3dLoader 
  :filePath="filePath" 
  height="400" 
  width="550"
  :controlsOptions="{
    enablePan:false,
    enableZoom:false,
    enableRotate:true
  }"
  :backgroundColor="'#000000'"
  :backgroundAlpha="0.0"
  :rotation="rot"
  :lights="lights"
  />
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRafFn } from '@vueuse/core'

const props = defineProps(['filePath'])
const rot = ref({ x:0, y:Math.PI / 2, z:0 });

const router = useRafFn(()=>{
  rot.value = { x:0, y:rot.value.y-0.01, z:0 }
  console.log('hh s')
});

const lights = ref([
  {
    type: "AmbientLight",
    color: "white",
  },
  {
    type: "DirectionalLight",
    position: { x: 100, y: 10, z: 100 },
    color: "white",
    intensity: 0.8,
  },
  {
    type: "PointLight",
    color: "#000000",
    position: { x: 200, y: -200, z: 100 },
    intensity: 1,
  },
  {
    type: "HemisphereLight",
    skyColor: "#FFFFFF",
    groundColor: "#000000",
    position: { x: 200, y: -200, z: 100 },
  },
]);
</script>