基于ThreeJS在BIM如何实现室内展厅导航？

示例描述与操作指南

室内导航示例，以医院场景为例，基于建筑模型的空间路网所实现。主要包括智能挂号与医院导航两个功能。

智能挂号，用户可以选择科室进行挂号，生成挂号单，并显示挂号信息。点击前往所选科室，当前示例会在挂号处与所选科室之间生成最短路径。用户可以通过全局视角及沉浸式视角两种方式进行路径预览。

医院导航，是指用户可以任意选择两个科室作为起终点，选择开始导航，会生成两个科室之间的最短路径。用户可以通过全局视角及沉浸式视角两种方式进行路径预览。

示例效果展示

应用场景

此示例可以用在医院挂号与科室导航、商场、博物馆、办公楼及政务中心等其它大型室内空间的空间导航；与此同时，还可在“室内寻人”方面进行应用，帮助您在偌大的空间中快速寻找到自己的小伙伴：此外，在室内应急救援、应急疏散等方面也有很大的应用空间，救援人员快速制定出可行的最短救援或疏散路径，以便迅速展开相应的工作。

实现步骤

第一步 提取路网
在开放平台上传解析模型，并且在“我的文件-数据中心-路网数据”模块点击提取路网。
第二步 获取构件id
获取你想要展示的空间位置对应的构件类型为ifcSpace的构件ID，并组织好数据结构。
第三步 创建导航面板
创建导航面板元素。

const showxsjTool2 = () => {
  buildTabs();
  buildRightButtonContainer();
  layui.use('form', function(){
    var form = layui.form;
    form.on('select(register)', function(data){
    state.nextDestination = data.value;
    return false;
    });
    form.on('select(registerStart)', function(data){
    state.currentRoom = data.value;
    return false;
    });
    form.on('select(registerEnd)', function(data){
    state.nextDestination = data.value;
    return false;
    });
  });
  }

第四步 实现导航功能
实现点击按钮的导航功能。

// 点击前往相应科室
  const handleOk = (currentRoom, nextDestination) => {
    simulatedStaff.visible = false;
    const prot = vizbim.promptingMessage("info", "正在获取路线数据，请稍等...", false);
    const startPosition = FormData[currentRoom]["position"];
    const endPosition = FormData[nextDestination]["position"];
    fetchRoadData(startPosition, endPosition)
    .then(result => {
      if (result.code === 2000) {
      $("#rightContainer").css('display','flex');
      roadLine.visible = true;// 路网和人员位置标记都隐藏
      roadLine.children = [];// 清空路径
      const data = result.data.points;
      state.roadData = data;
      // 画粗路径
      drawThickPath(data);
      transparentModel();
      // 路网数据获取成功，移除通知
      prot.remove();
      } else {
      $("#rightContainer").css('display','none');
      prot.remove();
      vizbim.promptingMessage("warning", result.message, false);
      }
    });
  };

下载完整代码

相关示例

在三维模型如何实现空间区域导览？