[JavaScript知识库]Bimface 1.获取相机视角并设置 2.获取鼠标点击坐标并设置

<!--  -->
<template>
  <div class="main">
    <div class="buttons">
      <button class="button" @click="handleRecord">alert相机视角</button>
      <button class="button" ref="showInfoRef" @click="showInfo">
        显示矿体信息并切换视角
      </button>
    </div>
    <div class="model" id="domId" ref="bfContainer"></div>
  </div>
</template>

<script>
import axios from "axios";
import api from "@/url/api.js";
let viewer3D;
export default {
  name: "",
  data() {
    return {
      drawableContainer: null,
      WebAppConfig: null,
      viewToken: null,
      showInfoActivated: false,
      cameraFrontState: {//1. handleRecord方法alert后 得到的相机视角
        name: "persp",
        position: {
          x: 326.86902101422066,
          y: -1022.6370460520134,
          z: 3.6813410133307913,
        },
        target: {
          x: 326.86902101422066,
          y: 221.3851867020458,
          z: 3.6859105621446613,
        },
        up: {
          x: 0,
          y: -0.0000036732051366298137,
          z: 0.9999999999932537,
        },
        near: 928.6353359087178,
        far: 1559.40912961853,
        zoom: 0,
        version: 1,
        fov: 45,
        aspect: 2.217965653896962,
        coordinateSystem: "world",
      }
    };
  },
  created() {},
  methods: {
    // 获取viewtoken
    get_view_token() {
      const url = api.get_bimface_view_token.url;
      var fileIds = {
        fileId: **,
      };
      axios.post(url, fileIds).then((resp) => {
        if (resp.data.status == "success") {
          this.viewToken = resp.data.info;
          //console.log(this.viewToken);
        } else {
          this.$message({
            type: "error",
            message: resp.data.msg,
          });
        }
      });
    },
    get_bimface() {
      var _that = this;
      var app;
      var modelViewer = {
        toolbar: undefined, // 工具条
        annotationmanager: undefined, // annotation的绘制管理器
        annotationToolbar: undefined,
        annotationControl: undefined, // 重写annotation的保存、取消
      };
      var options = new BimfaceSDKLoaderConfig();
      options.viewToken = this.viewToken;
      if (this.$i18n.locale == "en") {
        options.language = BimfaceLanguageOption.en_GB;
      } else {
        options.language = BimfaceLanguageOption.zh_CN;
      }
      BimfaceSDKLoader.load(
        options,
        (viewMetaData) => {
          if (viewMetaData.viewType == "3DView") {
            // ======== 判断是否为3D模型 ========
            // 获取DOM元素
            var dom4Show = document.getElementById("domId");
            this.WebAppConfig =
              new Glodon.Bimface.Application.WebApplication3DConfig();
            this.WebAppConfig.domElement = dom4Show;
            this.resetTool();
            // 创建WebApplication
            app = new Glodon.Bimface.Application.WebApplication3D(
              this.WebAppConfig
            );
            // 添加待显示的模型
            app.addView(_that.viewToken);
            // 从WebApplication获取viewer3D对象
            viewer3D = app.getViewer();
            // 监听添加view完成的事件
            viewer3D.addEventListener(
              Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded,
              () => {
                //设置相机最大范围
                viewer3D.setMaximalRangeofCamera(0.8);
                viewer3D.enableMouseHoverHighlight();
                // //自适应屏幕大小
                window.onresize = () => {
                  viewer3D.resize(
                    document.documentElement.clientWidth,
                    document.documentElement.clientHeight - 40
                  );
                };
                // 渲染3D模型
                viewer3D.render();
              }
            );
            // 2.点击获取坐标
            viewer3D.addEventListener(
              Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked,
              (objectData) => {
                console.log("获得坐标的地方");
                console.log(objectData.worldPosition);
              }
            );
          }
        },
        (error) => {
          console.log(error);
        }
      );
    },
    //1. alert现在的相机视角
    handleRecord() {
      let homeview = viewer3D.getCameraStatus();
      viewer3D.recordCustomHomeview(homeview);
      window.alert(JSON.stringify(homeview));
    },
    //三维标签
    addMarker() {
      if (!this.showInfoActivated) {
        console.log(viewer3D);
        //引线标签的顶点
        let position1 = new Object();
        //2. 设置鼠标点击事件监听到的坐标
        position1 = {
          x: 679.206512931952,
          y: 41.97231387180773,
          z: 147.72259100605982,
        };
        // 创建自定义元素，可以是一个dom element，也可以是个字符串
        this.config1 = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
        let content1 = document.createElement("div");
        content1.innerHTML =
          '<div class="leadTips" style="position:absolute;">\
        <div style="width:98px;height:70px;">\
        <img  src="https://static.bimface.com/attach/24ce9654e88a4218908f46279e5c4b04_line.png" height="70" width="98"/>\
        </div>\
        <div style="width:210px;left:90px;bottom:105px;position:relative;background: #4a90e2;color: #fff;padding: 10px">\
                                      <h3>东矿段-240以上</h3>\
                                      <p>控制以上：3450万t，品位30.2%</p>\
                                      <p>推断：1080万t，品位29.4%</p>\
                                      </div>\
                                      </div>';
        this.config1.content = content1;
        this.config1.viewer = viewer3D;
        this.config1.worldPosition = position1;
        //生成customItem实例
        this.customItem1 = new Glodon.Bimface.Plugins.Drawable.CustomItem(
          this.config1
        );
        // 初始化DrawableContainer
        this.drawableConfig =
          new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
        this.drawableConfig.viewer = viewer3D;
        this.drawableContainer =
          new Glodon.Bimface.Plugins.Drawable.DrawableContainer(
            this.drawableConfig
          );
        // 添加自定义标签
        this.drawableContainer.addItem(this.customItem1);
      } else {
        //隐藏标签
        this.drawableContainer.clear();
      }
    },
    //按钮 显示或隐藏矿体信息 三维标签
    showInfo() {
      if (!this.showInfoActivated) {
        //1. 将alert的视角进行设置
        viewer3D.setCameraStatus(this.cameraFrontState);
        //三维标签
        this.addMarker();
        this.setButtonText(this.$refs.showInfoRef, "隐藏矿体信息");
      } else {
        this.addMarker();
        // 切换至主视角
        viewer3D.setView(Glodon.Bimface.Viewer.ViewOption.Home);
        this.setButtonText(this.$refs.showInfoRef, "显示矿体信息");
      }
      this.showInfoActivated = !this.showInfoActivated;
    },
    //切换按钮内容
    setButtonText(button, text) {
      if (button != null && button.nodeName == "BUTTON") {
        button.innerText = text;
      }
    },
  }
  mounted() {
    this.get_view_token();
  },
  watch: {
    viewToken(newval) {
      this.get_bimface();
    },
  },
};
</script>