如何基于three.js(webgl)引擎架构，实现3D医院、3D园区导航，3D科室路径导航

一、前言
　　在这个日新月异的科技时代，技术的价值不仅在于推动社会的进步，更在于如何更好地服务于人民。医院三维导航系统项目，正是技术服务于人民理念的生动体现，真正从患者出发，解决患者在复杂的医院园区找科室难，迷路等问题。通过three.js(webgl)引擎架构，我们实现了3D医院、3D园区导航以及3D科室路径导航，为患者切实解决一些问题。

　　很喜欢这样的项目，让技术有了温度，有了真正的价值

二、技术的温暖

• ‌直观导航，简化就医流程‌：利用three.js构建的三维医院场景，真实还原了医院内部布局。患者只需轻点屏幕，即可直观看到医院各个科室、设施的位置，大大简化了就医流程，减少了因迷路或找不到科室而带来的困扰。

• ‌智能路径规划，提升就医效率‌：系统内置智能路径规划算法，能够根据患者的起点和终点，自动计算出最优路径。无论是初次就诊的患者，还是对医院布局不熟悉的家属，都能轻松找到目的地，大大提升了就医效率。

• ‌人性化设计，彰显人文关怀‌：在设计过程中，我们充分考虑了患者的需求和体验。系统不仅提供了导航功能，还整合了医院科室信息、医生介绍等附加内容，为患者提供了全方位的医疗服务。此外，系统还支持无障碍通道自动推荐等功能，体现了对特殊群体的关怀和尊重

• ‌技术服务于管理‌：医院三维导航系统不仅提升了患者的就医体验，也优化了医院的管理效率。通过数据分析，医院可以更加精准地掌握患者流动情况，从而优化资源配置，提升整体服务水平。‌

• 推动医疗信息化进程‌：作为医疗信息化进程中的重要一环，医院三维导航系统通过与医院其他信息系统的对接，实现了数据的共享和协同。这不仅提升了医疗服务的整体水平，也为未来的智慧医疗发展奠定了坚实的基础。

闲话少叙，亮个相吧！

技术交流 1203193731@qq.com

三、效果展示与技术实现

3.1、医院整体风貌

这一步主要是建模，以及使用three.js加载，考虑到用户的手机端展示，这里还是才用代码建模的方式，保障在手机上流畅运行

在开发基于three.js的3D应用时，代码建模是一种高效且灵活的方式，特别适用于需要在手机端流畅展示的场景。通过Three.js提供的API，开发者可以直接在JavaScript中定义几何体、材质和场景，无需依赖外部模型文件，从而减少了加载时间和资源消耗。

3.2、科室概览

这里展开楼宇，查看内部科室分布情况，这里涉及到如何将科室名称与科室动态绑定展示。

点击科室，还可以快速设为起点或者终点 开始导航

主要实现代码如下：

ModelBusiness.prototype.addLocationLogo = function (modelname) {
    var positionLogo=msj3DObj.commonFunc.findObject("positionLogo")
    var model = msj3DObj.commonFunc.findObject(modelname +"makeTextPanel");
    if (!model) {
        model = msj3DObj.commonFunc.findObject(modelname);
    }
    var modelPosition = new THREE.Vector3();
    model.getWorldPosition(modelPosition);
    if (positionLogo) {
        positionLogo.position.x = modelPosition.x;
        positionLogo.position.z = modelPosition.z;
        positionLogo.position.y = modelPosition.y + (model.name.indexOf("makeTextPanel")>=0?-0.1:2.5);
    }
}

3.3、导航路径规划实现

实现路径动态最优规划，是这个项目技术上最难的部分

涉及到寻路算法，这里主要采用A*路径搜索算法，

代码如下：

class Node3D {
  constructor(x, y, z) {
    this.x = Math.round(x);
    this.y = Math.round(y);
    this.z = Math.round(z);
    this.g = 0; // 实际代价
    this.h = 0; // 启发式代价
    this.parent = null;
  }

  get f() { return this.g + this.h; }
}

function aStar3D(start, end, obstacles) {
  const openSet = [new Node3D(...start)];
  const closedSet = new Set();
  const obstacleSet = new Set(obstacles.map(o => `${o.x},${o.y},${o.z}`));

  while (openSet.length > 0) {
    openSet.sort((a,b) => a.f - b.f);
    const current = openSet.shift();

    if (current.x === end[0] && current.y === end[1] && current.z === end[2]) {
      return reconstructPath(current);
    }

    closedSet.add(`${current.x},${current.y},${current.z}`);

    // 三维邻居搜索（26方向）
    for (let dx = -1; dx <= 1; dx++) {
      for (let dy = -1; dy <= 1; dy++) {
        for (let dz = -1; dz <= 1; dz++) {
          if (dx === 0 && dy === 0 && dz === 0) continue;

          const neighbor = new Node3D(
            current.x + dx,
            current.y + dy,
            current.z + dz
          );

          const neighborKey = `${neighbor.x},${neighbor.y},${neighbor.z}`;
          if (obstacleSet.has(neighborKey) || closedSet.has(neighborKey)) continue;

          neighbor.g = current.g + Math.sqrt(dx*dx + dy*dy + dz*dz);
          neighbor.h = heuristic(neighbor, end);
          neighbor.parent = current;

          const existing = openSet.find(n =>
            n.x === neighbor.x && n.y === neighbor.y && n.z === neighbor.z
          );

          if (!existing || neighbor.g < existing.g) {
            if (existing) openSet.splice(openSet.indexOf(existing), 1);
            openSet.push(neighbor);
          }
        }
      }
    }
  }
  return null; // 无路径
}

function heuristic(a, b) {
  return Math.sqrt(
    Math.pow(a.x-b[0], 2) +
    Math.pow(a.y-b[1], 2) +
    Math.pow(a.z-b[2], 2)
  );
}

function reconstructPath(node) {
  const path = [];
  while (node) {
    path.unshift([node.x, node.y, node.z]);
    node = node.parent;
  }
  return path;
}

3.4、细分科室，楼宇展示，快捷选择导航

快捷导航，就是方便用户，直接点击科室 直接设置为终点 或者起点。

项目中还用到了本地语音播报以及百度的语音播报接口。

ModelBusiness.prototype.speakWord = function (text, index, length) {

    //语音播报
    //转码
    //这个是调用百度的语音播报
    try {
        //if (modelbusiness.baiduToken) {
        //    modelbusiness.speakWordByBaidu(text, index,length);
        //}
        //if (modelbusiness.utterance) {

        //    modelbusiness.utterance.text = text;
        //    modelbusiness.utterance.lang = 'zh-CN'; // 设置语言为中文
        //    modelbusiness.utterance.rate = 1.2; // 语速，默认为1.0
        //    modelbusiness.utterance.pitch = 2; // 音高，默认为1.0
        //    window.speechSynthesis.speak(modelbusiness.utterance);
        //} else {
            if (modelbusiness.baiduToken) {
                modelbusiness.speakWordByBaidu(text, index,length);
            }
      //  }
    }catch(err){
        console.log(err);
        if (modelbusiness.baiduToken) {
            modelbusiness.speakWordByBaidu(text, index, length);
        }
    }
}

技术交流 1203193731@qq.com

如果你有什么要交流的心得 可邮件我

其它相关文章：

如何基于three.js(webgl)引擎架构，实现3D密集架库房,3D档案室（3d机器人取档、机器人盘点、人工查档、设备巡检）

如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课（一）

如何使用webgl(three.js)实现3D消防、3D建筑消防大楼、消防数字孪生、消防可视化解决方案——第十八课（一）

webgl(three.js)3D光伏,3D太阳能能源,3D智慧光伏、光伏发电、清洁能源三维可视化解决方案——第十六课

如何用webgl(three.js)搭建一个3D库房,3D仓库3D码头,3D集装箱,车辆定位,叉车定位可视化孪生系统——第十五课

webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课（定位升级版）

使用three.js(webgl)搭建智慧楼宇、设备检测、数字孪生——第十三课

如何用three.js(webgl)搭建3D粮仓、3D仓库、3D物联网设备监控-第十二课

如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课

如何用three.js实现数字孪生、3D工厂、3D工业园区、智慧制造、智慧工业、智慧工厂-第十课

使用webgl(three.js)创建3D机房，3D机房微模块详细介绍(升级版二)

如何用webgl(three.js)搭建一个3D库房-第一课

如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课

使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课

如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟

使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课（炫酷版一）

使用webgl(three.js)搭建3D智慧园区、3D大屏，3D楼宇，智慧灯杆三维展示，3D灯杆，web版3D,bim管理系统——第六课

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题（机房升级版）-第九课（一）