wxcz_admin
/
projectcc-smart-construction-git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
							<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>自定义关键帧</title>
  <style media="screen">
    * {
      margin: 0;
      padding: 0;
     }

    html,
    body {
      height: 100%;
    }

    .main {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: 100%;
      width: 100%;
    }

    .model {
      flex: 1;
    }

    .buttons {
      font-size: 0;
    }

    .button {
      margin: 5px 0 5px 5px;
      width: 100px;
      height: 30px;
      background: #11DAB7;
      color: #FFFFFF;
      border-radius: 3px;
      border: none;
      cursor: pointer;
    }
  </style>
  <!-- 引用BIMFACE的JavaScript显示组件库 -->
  <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8">
  </script>
</head>

<body>
  <div class='main'>
    <div class='buttons'>
      <button type="button" class="button" onclick="playkey(20)">开始巡检</button>
      <button type="button" class="button" onclick="pause()">暂停</button>
    </div>
    <!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 -->
    <div class='model' id="domId"></div>
  </div>
  <script type="text/javascript">
    var viewToken = '9e7c778c517f4dfc841dfd860bdfb032';
    var wt;
    var viewer;
    var color;
    // 初始化显示组件
    var options = new BimfaceSDKLoaderConfig();
    options.viewToken = viewToken;
    BimfaceSDKLoader.load(options, successCallback, failureCallback);

    function successCallback(viewMetaData) {
      if (viewMetaData.viewType == "3DView") {
        color = new Glodon.Web.Graphics.Color("#32D3A6", 0.8);
        // ======== 判断是否为3D模型 ========		
        // 获取DOM元素
        var dom4Show = document.getElementById('domId');
        var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
        webAppConfig.domElement = dom4Show;
        // 创建WebApplication
        var app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
        // 添加待显示的模型
        app.addView(viewToken);
        // 从WebApplication获取viewer对象
        viewer = app.getViewer();
        //标签类的设置
        var drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
        drawableConfig.viewer = viewer;
        //容器
        drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
        var config = new Glodon.Bimface.Plugins.Walkthrough.WalkthroughConfig();
        config.viewer = viewer;
        wt = new Glodon.Bimface.Plugins.Walkthrough.Walkthrough(config);
        // 监听添加view完成的事件
        viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function() {
          //自适应屏幕大小
          window.onresize = function() {
            viewer3D.resize(document.documentElement.clientWidth, document.documentElement
              .clientHeight - 40);
          }

          //add key frames 
          var keyFrames = [];
          keyFrames.push({
            id: "21124876-8436-4a7e-8f3f-50f30876baeb",
            position:{
              "x":54338.30618321142,
              "y": 24823.562037428845,
              "z": 19009.247486006847
            },
            target:{
              "x": 138966.22492577098,
              "y": -343576.4725266925,
              "z": 47971.612488661136
            },
            "coordinateSystem":"world",
          });
          keyFrames.push({
            id: "86f4dd8e-8a43-4d4d-8aa5-cf5e3cdf16a1",
            position: {
              "x": 55392.23266330976,
              "y": 19177.558474637684,
              "z": 17950.4500522592
            },
            target:{
              "x": 237925.633560422,
              "y": -311824.03024018207,
              "z": 60086.961114641
            },
            "coordinateSystem":"world",
          });
          keyFrames.push({
            id: "d1d3d7bb-684a-4ce6-8b02-e41657ee83d5",
            position:{
              "x": 60458.92777828335,
              "y": 12369.261934180973,
              "z": 19647.874306033493
            },
            target:{
              "x": 206252.83091484627,
              "y": -336377.9684782245,
              "z": 59147.34131520492
            },
            "coordinateSystem":"world",
          });
          keyFrames.push({
            id: "69e3cae8-3b20-481d-9a42-2fe176ca56ea",
            position:{
              "x": 65011.509756267376,
              "y": -7770.007557460343,
              "z": 19279.4542151404
            },
            target:{
              "x": 378613.74215948314,
              "y": -218801.00165745476,
              "z": 50839.57258962678
            },
            "coordinateSystem":"world",
          });
          keyFrames.push({
            id: "5475b7eb-2589-483b-85f8-83d24543d6d8",
            position:{
              "x": 94393.5467001607,
              "y": -10041.437121392693,
              "z": 19279.445871713728
            },
            target:{
              "x": 428914.31778981985,
              "y": -186042.26938381407,
              "z": 56045.09022472101
            },
            "coordinateSystem":"world",
          });
          wt.setKeyFrames(keyFrames);
        });
      }
    }

    function failureCallback(error) {
      console.log(error);
    };

    //播放
    function playkey(time) {
      //wt.play(time);
      //播放到关键帧的时候促发回调事件
      wt.setKeyFrameCallback(keyFrameCallback);
      wt.setWalkthroughTime(time);
      wt.play();
    }

    //回调事件
    function keyFrameCallback(idx) {
      console.log("Current key frame index is " + idx);
      switch (idx) {
        case 0:
          action_0();
          break;
        case 1:
          action_1();
          break;
        case 2:
          action_2();
          break;
        case 3:
          action_3();
          break;
        case 4:
          action_4();
          break;
        default:
          break;
      }
    }
    //关键帧0的回调事件
    function action_0() {
      console.log("Action 1");
      var position1 = new Object();
      position1 = {
        "x": 59026.898499509276,
        "y": 16027.630284457171,
        "z": 18568.508610052737
      };
      addcustomitem(position1)
      viewer.enableBlinkComponents(true);
      viewer.setBlinkColor(color);
      var objectIds = ["1477311584420352.3805100"];
      viewer.setBlinkComponentsById(objectIds);
    }
    //关键帧1的回调事件
    function action_1() {
      console.log("Action 2");
      var position2 = new Object();
      position2 = {
        "x": 61277.39289979506,
        "y": 8167.548450051833,
        "z": 19070.83564545811
      };
      addcustomitem(position2);
      var objectIds = ["1477311584420352.3855400"];
      viewer.enableBlinkComponents(true);
      viewer.overrideComponentsColorById(objectIds, color);
      viewer.enableBlinkComponents(false);
    }
    //关键帧2的回调事件
    function action_2() {
      console.log("Action 3");
      var position2 = new Object();
      position2 = {
        "x": 70852.81623884341,
        "y": -4461.765783049294,
        "z": 17585.47922510225
      };
      addcustomitem(position2);
      var objectIds = ["1477311240716800.2366702"];
      viewer.enableBlinkComponents(true);
      viewer.overrideComponentsColorById(objectIds, color);
      viewer.enableBlinkComponents(false);
    }
    //关键帧3的回调事件
    function action_3() {
      console.log("Action 4");
      var position3 = new Object();
      position3 = {
        "x": 73670.83334490952,
        "y": -9370.809278067574,
        "z": 20825.000144211066
      };
      addcustomitem(position3);
      var objectIds = ["1477311584420352.3686915", "1477311584420352.4245712", "1477311584420352.3686916"];
      viewer.enableBlinkComponents(true);
      viewer.overrideComponentsColorById(objectIds, color);
      viewer.enableBlinkComponents(false);
    }
    //关键帧4的回调事件
    function action_4() {
      console.log("Action 5");
      var position4 = new Object();
      position4 = {
        "x": 102627.00303460653,
        "y": -15454.954320614783,
        "z": 18565.96119331755
      };
      addcustomitem(position4);
      var objectIds = ["1477311584420352.3821577"];
      viewer.enableBlinkComponents(true);
      viewer.overrideComponentsColorById(objectIds, color);
      viewer.enableBlinkComponents(false);
    }
    //自定义二维标签
    function addcustomitem(position) {
      var config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
      var circle = document.createElement('div');
      //自定义样式，支持Html的任意dom元素
      circle.style.width = '220px';
      circle.style.height = '32px';
      circle.style.borderRadius = '20%';
      circle.style.background = '#fff';
      var problemname = '例行安全巡检，未发现隐患';
      circle.innerHTML = '<p style="padding:6px 12px">' + problemname +'</p>';
      config.content = circle;
      config.viewer = viewer;
      config.worldPosition = position;
      //生成customItem实例
      var customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);
      // 添加自定义标签
      drawableContainer.addItem(customItem);
      //设置Tip的样式
      customItem.setTooltipStyle({
        border: '1px'
      });
    }

    function pause() {
      wt.pause();
    }
  </script>
</body>

</html>