<template>
  <div class="page">
    <!-- <model-collada
      :backgroundAlpha="0"
      :rotation="{
        x: -Math.PI / 2,
        y: 0,
        z: 0,
      }"
      src="http://localhost/3dmodel/elf.dae"
    /> -->
    <!-- src="http://localhost/3dmodel/tree.obj" -->
    <!-- <model-obj src="https://www.jichuanglanhai.com/demo/3dmodel/2.obj" /> -->
    <model-obj
      :width="375"
      :height="667"
      ref="model"
      src="http://localhost/3dmodel/2.obj"
      :rotation="rotation"
      :position="position"
      :scale="scale"
      :lights="lights"
      @on-load="onLoad"
      :controls-options="{}"
    />
    <!--getCenter src="http://localhost/3dmodel/dancing.fbx" -->
    <!-- <model-fbx src="http://localhost/3dmodel/1.fbx" /> -->
  </div>
</template>
<script>
import { reactive } from "vue";
import { ModelObj } from "../utils/vue3dmodel";

export default {
  components: {
    ModelObj,
  },
  data() {
    return {
      rotation: {
        x: 0,
        y: 0,
        z: 0,
      },
      position: {
        x: 0,
        y: 0,
        z: 0,
      },
      scale: {
        x: 0.5,
        y: 0.5,
        z: 0.5,
      },
      lights: [
        {
          type: "HemisphereLight",
          position: { x: 0, y: 1, z: 0 },
          skyColor: 0xffd700,
          groundColor: 0xffd700,
          intensity: 0.2,
        },
        {
          type: "DirectionalLight",
          position: { x: 1, y: 1, z: 1 },
          color: 0xffffff,
          intensity: 0.8,
        },
      ],
      val: 0,
    };
  },
  created() {
    // let _this = this.rotate();
  },
  methods: {
    onLoad(e) {
      this.rotate(e);
      // console.log(this.$refs.model.$el.childNodes[0]);
      // let el = this.$refs.model.$el.childNodes[0];
      // el.style["transform"] = "rotateY(45deg)";
    },
    rotate(e) {
      // this.rotation.x = e.x;
      // this.rotation.y -= 0.002;
      // this.rotation.z = e.z;
      this.val += 1;
      let el = this.$refs.model.$el.childNodes[0];
      el.style["transform"] = `rotateY(${this.val}deg)`;
      requestAnimationFrame(this.rotate);
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
