一、前言

在这个日新月异的科技时代，技术的价值不仅在于推动社会的进步，更在于如何更好地服务于人民。医院三维导航系统项目，正是技术服务于人民理念的生动体现，真正从患者出发，解决患者在复杂的医院园区找科室难，迷路等问题。通过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

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

如何使用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机房微模块详细介绍(升级版二)