<template>
  <div class="viewer-container">
    <vue3dLoader
      :filePath="filePath"
      height="600"
      width="1440"
      :controlsOptions="{
        enablePan: false,
        enableZoom: false,
        enableRotate: true,
      }"
      :backgroundColor="'#000000'"
      :backgroundAlpha="0.0"
      :rotation="rot"
      :lights="lights"
    />
  </div>
</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: 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>
<style lang="scss" scoped>
.viewer-container{
  width: 100% !important;
  height: 100% !important;
 display: flex;
 justify-content: center;
}
 :deep(.viewer-canvas){
  width: 100% !important;
  height: 100% !important;
}
</style>
