<template>
  <div class="model_map" id="model_map"></div>
</template>

<script>
let scene, camera, renderer;
export default {
  components: {},
  computed: {},
  data() {
    return {
      timer: null,
      angle: 0,
    };
  },
  mounted() {
    document.oncontextmenu = function (event) {
            event.preventDefault();
        };
    scene = new THREE.Scene();
    // scene.background = new THREE.Color("#FFFFFF");
    scene.background = null;
    camera = new THREE.PerspectiveCamera(
      45,
      200 / 300,
      0.25,
      20
    );
    camera.position.set(1,1.5,4);
    camera.lookAt( 0, 0, 0 );
    renderer = new THREE.WebGLRenderer({antialias:true,alpha:true});
    renderer.setClearAlpha(0);
    renderer.setSize(200, 300);
    document.getElementById("model_map").appendChild(renderer.domElement);
    let ambientLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambientLight);
    const loader = new THREE.GLTFLoader();
    let _this = this;
    loader.load(
      "gltf/mobile.gltf",function (gltf) {
        let model = gltf.scene;
        model.position.set(0,-1.5,0)
        _this.timer = setInterval(()=>{
          model.rotation.set(0,_this.angle,0)
          _this.angle = _this.angle+ 0.01
          if(_this.angle == 6.28) _this.angle = 0
          _this.render()
        },20)
        scene.add(model);
        _this.render();
      },
      undefined,
      function (error) {
        console.error(error);
      }
    );
  },
  methods: {
    render() {
      renderer.render(scene, camera);
    },
     clearScene() {
    scene.traverse((child) => {
      if (child.material) {
        child.material.dispose();
      }
      if (child.geometry) {
        child.geometry.dispose();
      }
      child = null;
    });
    renderer.forceContextLoss();
    renderer.dispose();
    scene.clear();
    
  }

  },

  beforeDestroy() {
    
    if (this.timer) {
      clearInterval(this.timer);
    }
    this.clearScene()
  },
};
</script>

<style lang="less" scoped>
.model_map {
  position: absolute;
  right: 730px;
  top: 90px;
  height: 300PX;
  width: 200PX;
  z-index: 99;
  background-color: transparent;
}
</style>
