<template>
  <div class="full">
    <div class="full" id="3DScene"></div>
    <map-for-scene ref="map"></map-for-scene>
    <info-layer ref="infoLayer"
                :box3="box3"
    ></info-layer>
  </div>
</template>

<script>
import * as d3 from 'd3';
import * as Three from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import Box1 from "../3DMap/map-components/infobox/box1";
import InfoLayer from "../3DMap/map-components/InfoLayer";
import MapForScene from "./map";
export default {
  name: "Scene3D",
  components: {MapForScene, InfoLayer, Box1},
  provide(){
    return {
      scene: this
    }
  },
  data(){
    return{
      position: [0,0],
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      controls: null,
      container: null,
      box3: [],
    }
  },
  methods: {
    //加载json文件
    async addJson(url){
      return new Promise((resolve, reject) => {
        let loader = new Three.FileLoader();
        loader.load(url,  (data) => {
          resolve( JSON.parse(data));
        });
      } )
    },
    //添加天空盒子===》urls 6张方位图图片路径  //六张图片分别是朝前的（posz）、朝后的（negz）、朝上的（posy）、朝下的（negy）、朝右的（posx）和朝左的（negx）。
    addSkyBox(urls){
      let cubeTextureLoader = new Three.CubeTextureLoader();
      let cubeTexture = cubeTextureLoader.load( urls);
      this.scene.background = cubeTexture;
    },
    //添加平行光
    addDirectionalLight(position,color=0xffffff){
      //添加光源
      let dirLight = new Three.DirectionalLight(color, 1)
      dirLight.position.set(position[0], position[1], position[2]);
      dirLight.castShadow = true //可以产生阴影
      dirLight.shadow.mapSize = new Three.Vector2(1024, 1024)
      this.scene.add(dirLight)
    },
    //添加gltf模型
    addGltf(url){
      let loader = new GLTFLoader();
      loader.load( url,  (gltf) => {
          this.scene.add(gltf.scene)
          gltf.scene.traverse( function ( child ) {
            if ( child.isMesh ) {
              child.material.emissive =  child.material.color;
              child.material.emissiveMap = child.material.map ;
            }
          } );
        }, undefined,
        ( error ) => {
          console.error( error );
        } );
    },
    //初始化场景
    init() {
      //挂载容器
      let container = document.getElementById('3DScene');
      this.container = container;
      //初始化相机
      this.camera = new Three.PerspectiveCamera(50, container.clientWidth/container.clientHeight, 0.001, 10000);
      this.camera.position.z = 1000;
      this.camera.position.x = 0;
      this.camera.position.y = -200;

      //初始化场景
      this.scene = new Three.Scene();

      //渲染器
      this.renderer = new Three.WebGLRenderer({antialias: true,alpha: true});
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      this.setAlpha(1);
      container.appendChild(this.renderer.domElement);


      //坐标轴
      let axes = new Three.AxisHelper(30000);
      // this.scene.add(axes);

      this.addDirectionalLight([1000,1000,1000]);
      // this.addGltf('/demo/8H.gltf');
      //控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;

      //初始化信息框图层
      this.$refs['infoLayer'].onload();
    },
    //每帧渲染函数
    animate() {
      requestAnimationFrame(this.animate);
      this.controls.update();
      this.renderer.render(this.scene, this.camera);
      this.$refs['map'].renderPosition();
      this.$refs['map'].animate();
    },
    //设置背景颜色
    setBackground(color){
      this.renderer.setClearColor(color);
    },
    //设置背景透明度
    setAlpha(num){
      this.renderer.setClearAlpha(num);
    },
  },

  async mounted() {
    const _this = this;
    this.init();
    this.animate();
    this.$refs['map'].onLoad();
    await this.$refs['map'].addMap('/data/ningxia.json');
  }
}
</script>

<style scoped>
  .full{
    width: 100%;
    height: 100%;
  }

  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
