cyzh-park/src/views/wel/index.vue

<template>
  <div class="full animate__animated animate__faster"  :class="menuIndex == 0 ? 'animate__bounceInLeft' : 'animate__bounceOutLeft'" style="overflow: hidden;" >
    <!--  背景--3D场景   -->
    <scene3-d ref="scene" style="z-index: 9;" :camera-option="cameraOptions" :controls-option="controlsOption"
      @loadingFinish="initScene">
    </scene3-d>
    <!-- 数据面板  -->
    <main-scene @openDialog="openDialog" @playVideo="playVideo" @showInfoBox="showInfoBox" ref="data-panel"
      style="z-index: 9;"> </main-scene>

    <!--  工具栏   -->
    <tools-bar :option="toolsOption"></tools-bar>

    <!-- 园区事件 -->
    <mp-dialog ref="mpDialog" title="园区事件">
      <div slot="detail" style="color: #FFFFFF;padding: 1.25rem;">
        {{dialogDetail.detail}}
      </div>
    </mp-dialog>
    <!-- 视频播放 -->
    <devicePlayer ref="devicePlayer"></devicePlayer>
  </div>
</template>

<script>
  import {
    mapGetters
  } from "vuex";
  import devicePlayer from "@/components/scene/wvp/devicePlayer.vue";
  import mpDialog from "../../components/mp-dialog.vue"
  import TopBar from "../../components/3DScene/top-bar/top-bar";
  import Scene3D from "../../components/3DScene/3DScene";
  import MainScene from "../../components/scene/mainScene";
  import ToolsBar from "../../components/3DScene/tools-bar/tools-bar";
  import * as Three from "three";
  import {
    getBox1,
    getCameraBox
  } from "../../components/3DScene/infoBox";
  import {
    CSS2DObject
  } from "three/examples/jsm/renderers/CSS2DRenderer";
  import {
    fullscreenToggel
  } from "../../util/util";
  export default {
    name: "index",
    components: {
      devicePlayer,
      mpDialog,
      MainScene,
      Scene3D,
      TopBar,
      ToolsBar,
    },
    computed: {
      ...mapGetters(["menuIndex"])
    },
    data() {
      return {
        dialogDetail: {},

        mesh: {},
        searchText: "",
        searchCameraType: "",
        searchType: "building",
        searchIndex: 0,
        isReady: false,
        handlePanelShow: false,
        toolsPanelType: "building",
        toolsOption: [{
            icon: '/img/tools/361.png',
            name: '旋转',
            event: this.round
          },
          {
            icon: '/img/tools/reset.png',
            name: '复位',
            event: this.reset
          },
          {
            icon: '/img/tools/loudong.png',
            name: '建筑信息',
            event: () => {
              this.showBox(this.buildingObj, "building")
            }
          },
          {
            icon: '/img/tools/video.png',
            name: '摄像头',
            event: () => {
              this.showBox(this.cameraObj, "camera")
            }
          },
          {
            icon: '/img/tools/full.png',
            name: '信息框',
            event: () => {
              this.$refs['data-panel'].infoBoxShow()
            }
          },
        ],
        finishNum: 0,
        loadingSchedule: 0,
        buildingsRes: [],
        cameraRes: [],
        objs: [],
        gltf: [
          '/gltf/7_8/20H.gltf',
          '/gltf/5H/5H.gltf',
          '/gltf/3H/3H.gltf',
          '/gltf/7H/7H.gltf',
          '/gltf/13H/13H.gltf',
          '/gltf/14H/14H.gltf',
          '/gltf/17H/17H.gltf',
          '/gltf/1H/1H.gltf',
          '/gltf/DX2/DX2.gltf',
          '/gltf/TiKuai/TiKuai.gltf',
          '/gltf/SKY/Sky.gltf',
          '/gltf/Tree_Car/Tree_Car.gltf',
        ],
        controlsOption: {
          minDistance: 100,
          maxDistance: 500,
          autoRotate: false,
          autoRotateSpeed: 1,
          keyPanSpeed: 3,
          target: new Three.Vector3(0, 0, 0),
          enableDamping: true,
        },
        cameraOptions: {
          position: [5000, 5000, 1000],
          near: 0.01,
          far: 50000,
          lookAt: [1300, 0, 1300],
        },
        obj: [{
            mtlUrl: '/obj/CAR.mtl',
            objUrl: '/obj/CAR.obj'
          },
          {
            mtlUrl: '/obj/DX.mtl',
            objUrl: '/obj/DX.obj'
          },
          {
            mtlUrl: '/test/Tree.mtl',
            objUrl: '/test/Tree.obj'
          },
          {
            mtlUrl: '/obj/TiKuai.mtl',
            objUrl: '/obj/TiKuai.obj'
          },
          {
            mtlUrl: '/obj/XiaoPin.mtl',
            objUrl: '/obj/XiaoPin.obj'
          },
          {
            mtlUrl: '/test/Building_A.mtl',
            objUrl: '/test/Building_A.obj'
          },
          {
            mtlUrl: '/test/BuildingB.mtl',
            objUrl: '/test/BuildingB.obj'
          },
          {
            mtlUrl: '/test/BuildingC.mtl',
            objUrl: '/test/BuildingC.obj'
          },
          {
            mtlUrl: '/obj/building/3H.mtl',
            objUrl: '/obj/building/3H.obj'
          },
          {
            mtlUrl: '/obj/building/5H.mtl',
            objUrl: '/obj/building/5H.obj'
          },
          {
            mtlUrl: '/obj/building/13H.mtl',
            objUrl: '/obj/building/13H.obj'
          },
          {
            mtlUrl: '/obj/building/14H.mtl',
            objUrl: '/obj/building/14.obj'
          },
          {
            mtlUrl: '/obj/building/17.mtl',
            objUrl: '/obj/building/17.obj'
          },
          {
            mtlUrl: '/obj/building/20.mtl',
            objUrl: '/obj/building/20.obj'
          },
        ],
        buildings: [{
            text: '软件园主楼',
            position: [100, 115, 100]
          },
          {
            text: '软件园副楼',
            position: [170, 50, 50]
          },
          {
            text: '软件园A栋',
            position: [0, 105, 110]
          },
          {
            text: '软件园B栋',
            position: [-70, 105, 110]
          },
          {
            text: '软件园C栋',
            position: [-120, 105, 55]
          },
          {
            text: '软件园D栋',
            position: [-120, 105, -20]
          },
        ],
        cameraList: [{
            number: 'HK-nm51658186',
            position: [50, 0, 70],
            src: '/video/video2.mp4',
            name: "设备2",
            type: "枪机"
          },
          {
            number: 'HK-nm51658186',
            position: [-100, 0, 100],
            src: '/video/video3.mp4',
            name: "设备3",
            type: "枪机"
          },
          {
            number: 'HK-nm51658186',
            position: [100, 0, 20],
            src: '/video/video4.mp4',
            name: "设备4",
            type: "枪机"
          },
          {
            number: 'HK-nm51658186',
            position: [200, 0, 50],
            src: '/video/video4.mp4',
            name: "设备4",
            type: "球机"
          },
          {
            number: 'HK-nm51658186',
            position: [75, 0, 10],
            src: '/video/video4.mp4',
            name: "设备4",
            type: "球机"
          },
        ],
        cameraObj: {},
        buildingObj: {},
      }
    },
    provide() {
      return {
        "index": this
      }
    },
    mounted() {
      this.buildingsRes = this.buildings;
      this.cameraRes = this.cameraList;
    },
    watch: {
      searchCameraType() {
        this.cameraRes = this.searchCameraType == "全部" ? this.cameraList : this.cameraList.filter(item => item.type ==
          this.searchCameraType)
      }
    },
    methods: {
      showInfoBox() {
        this.toolsOption.forEach(item => {
          if (item.name == '信息框') {
            if (item.icon == '/img/tools/full.png') {
              item.icon = '/img/tools/full-out.png'
            } else {
              item.icon = '/img/tools/full.png'
            }
            console.log(item, "123");
            this.$forceUpdate()
          }
        })
      },
      openDialog(item) {
        this.dialogDetail = item
        this.$refs.mpDialog.open(item.time)
      },
      playVideo(item) {

        const {
          deviceId
        } = item
        const {
          channelId
        } = item
        const {
          info
        } = item
        this.$refs.devicePlayer.openDialog("media", deviceId, channelId, info);
      },
      reset() {
        this.$refs['scene'].camera.position.z = this.cameraOptions.position[0];
        this.$refs['scene'].camera.position.x = this.cameraOptions.position[1];
        this.$refs['scene'].camera.position.y = this.cameraOptions.position[2];
        this.$refs['scene'].camera.lookAt(...this.cameraOptions.lookAt);
        this.$refs['scene'].controls.target.set(0, 0, 0);
        this.$refs['data-panel'].infoBoxShow(true);
      },
      handleNext(num, list) {
        this.searchIndex = (this.searchIndex + num) % list.children.length;
        if (this.searchIndex < 0) {
          this.searchIndex = list.children.length + this.searchIndex;
        }
        list.children.forEach((item, index) => {
          console.log(this.searchIndex, index);
          if (index == this.searchIndex) {
            this.$refs['scene'].flyto(item.position);
            item.visible = true;
          } else {
            item.visible = false;
          }
        })
      },
      async initScene() {
        this.$refs['scene'].scene.fog = new Three.Fog(this.$refs['scene'].scene.background, 1, 5000);
        //添加天空盒
        // this.$refs['scene'].addSkyBox(
        //   [
        //     '/sky/HDR_r.jpg',
        //     '/sky/HDR_l.jpg',
        //     '/sky/HDR_u.jpg',
        //     '/sky/HDR_d.jpg',
        //     '/sky/HDR_f.jpg',
        //     '/sky/HDR_b.jpg',
        //   ]
        // );
        //  添加模型
        // await this.addObj();
        await this.addGltf();
        this.addDirectionalLight();
        this.initBoxInfo();
        this.isReady = true;
        //自旋转
        // this.$refs['scene'].controls.autoRotate = true;

      },
      toBuilding(objIndex, list) {
        list.children.forEach((item, index) => {
          if (objIndex == index) {
            this.searchIndex = index;
            this.$refs['scene'].flyto(item.position);
            item.visible = true;
          } else {
            item.visible = false;
          }
        })
      },
      quitToolPanel() {
        this.handlePanelShow = false;
        this.buildingObj.children.forEach(item => {
          item.visible = false;
        })
        this.cameraObj.children.forEach(item => {
          item.visible = false;
        })
        this.reset();
      },
      async addGltf() {
        this.gltf.forEach(item => {
          this.$refs['scene'].addGltf(item,
            (gltf) => {
              this.$refs['scene'].scene.add(gltf.scene)
              gltf.scene.traverse(function(child) {
                child.castShadow = true;
                child.receiveShadow = true;
                if (child.isMesh) {
                  console.log(child, 546546);
                  child.material.color = new Three.Color("rgb(200,200,200)");
                  child.material.side = Three.DoubleSide;
                  child.material.emissive = child.material.color;
                  child.material.emissiveMap = child.material.map;

                  if (child.material.name == 'JZ_LanGan_GeZi' || child.material.name == 'JZ_14_LanGan' ||
                    child.name.indexOf("Tree") > -1) {
                    console.log(child.name, 456789)
                    child.material.transparent = true;
                  }
                }
              });
              this.finishNum++;
              this.loadingSchedule = ((this.finishNum * 100) / (this.gltf.length * 100)) * 100
            },
            (xhr) => {
              if (xhr.total == xhr.loaded) {
                // this.finishNum++;
              }
            });
        })

      },
      initBoxInfo() {
        this.buildingObj = new Three.Object3D();
        this.buildings.forEach(item => {
          let element = getBox1(item.text, this);
          let label = new CSS2DObject(element);
          label.position.x = item.position[0];
          label.position.y = item.position[1];
          label.position.z = item.position[2];
          label.visible = false;
          this.buildingObj.add(label);
        })
        this.$refs['scene'].scene.add(this.buildingObj);

        this.cameraObj = new Three.Object3D();
        this.cameraList.forEach(item => {
          let element = getCameraBox(item, this);
          let label = new CSS2DObject(element);
          label.position.x = item.position[0];
          label.position.y = item.position[1];
          label.position.z = item.position[2];
          label.visible = false;
          this.cameraObj.add(label);
        })
        this.$refs['scene'].scene.add(this.cameraObj);

      },
      //添加平行光
      addDirectionalLight() {
        //添加光源
        let dirLight = new Three.DirectionalLight("#bebebe", 1)
        dirLight.position.set(1, 1, 1);
        dirLight.shadow.mapSize.width = 512; // default
        dirLight.shadow.mapSize.height = 512; // default
        dirLight.shadow.camera.near = 1; // default
        dirLight.shadow.camera.far = 100;
        dirLight.castShadow = true;
        this.$refs['scene'].scene.add(dirLight);
      },
      showBox(list, type) {
        this.$refs['scene'].controls.autoRotate = false;
        this.toolsPanelType = type;
        this.handlePanelShow = true;
        this.searchIndex = 0;
        if (list.children.length > 0) {
          list.children[0].visible = true;
          this.$refs['data-panel'].infoBoxShow(false)
          this.$refs['scene'].flyto(list.children[0].position)
        }

      },
      showCamera() {
        const list = this.cameraObj;
        list.children.forEach((item, index) => {
          item.visible = !item.visible;
        })
      },
      handleFull() {
        fullscreenToggel();
      },
      round() {
        this.$refs['scene'].controls.autoRotate = !this.$refs['scene'].controls.autoRotate;
      },
      handleSearch() {
        this.buildingsRes = this.buildings.filter(item => item.text.indexOf(this.searchText) > -1)
      },
    }
  }
</script>

<style scoped>
  .handle-panel-1 {
    width: 20%;
    height: 430px;
    /* background: rgba(230, 160, 9, 0.5); */
    position: absolute;
    top: 200px;
    left: 3%;
  }

  .handle-panel-2 {
    width: 20%;
    height: 510px;
    /* background: rgba(230, 160, 9, 0.5); */
    position: absolute;
    top: 200px;
    left: 3%;
  }

  .search-body {
    overflow-y: scroll;
    width: 100%;
    height: 300px;
  }

  .search-footer {
    width: 100%;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    color: whitesmoke;
    font-size: 18px;
  }

  .search-item {
    width: 95%;
    margin: auto;
    height: 45px;
    border-bottom: 1px solid #525252;
  }

  .click:hover {
    cursor: pointer;
    transform: translate(1px, 1px);
  }

  .click:active {
    cursor: pointer;
    transform: translate(2px, 2px);
  }

  .building-click:hover {
    cursor: pointer;
    text-shadow: 2px 2px 2px #ccffb4;
  }
</style>