如何基于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机房管线问题(机房升级版)-第九课(一)

相关推荐
烛阴1 天前
Tile Pattern
前端·webgl
平行云2 天前
实时云渲染将UE像素流嵌入业务系统,实现二维管理系统与数字孪生三维可视化程序的无缝交互
unity·webgl·数字孪生·云渲染·虚幻引擎·实时云渲染·像素流送
零一数创4 天前
数字孪生赋能智慧能源电力传输管理新模式
ue5·能源·数字孪生·ue·智慧能源·零一数创
零一数创4 天前
智慧能源驱动数字孪生重介选煤新模式探索
人工智能·ue5·能源·数字孪生·ue·零一数创
烛阴4 天前
Mod
前端·webgl
易知微EasyV数据可视化4 天前
EasyMan 数字人服务全面焕新,交互型AI数字人助推孪生体验全新升级
人工智能·交互·数字孪生·数字人
救救孩子把5 天前
Three.js 从零入门:构建你的第一个 Web 3D 世界
前端·javascript·3d·threejs
烛阴6 天前
Fract - Grid
前端·webgl
cos7 天前
从像素到粒子:p5.js 图像转动态粒子的设计与实现
前端·javascript·webgl
图扑可视化7 天前
基于 HT 的 3D 可视化智慧矿山开发实现
数字孪生·三维可视化·智慧矿山·矿山设备