threejs 里面的3d管道的每个节点ID是唯一的,且对应x,y,z坐标。那么当需要从A点到B点的时候,可能出现有多条路径可走,此时便需要求出最短行走路径,因此用到一个寻路径算法。我们将问题简化如下:

后记:事实证明,下面这个算法有点缺陷,哈哈,其实少了一个查找深度,否则路径多的情况下会死掉,chrome dev会报 over max stack ~~ so, 加上一个递归深度就搞定了撒~~

var begId = 191; //起点ID
var endId = 185; //终点ID //所有路径,不区分开始和结束节点的前后顺序
var allPaths = [[185,184],[186,185],[187,186],[188,187],[189,187],[191,189]];
var result = []; var tree_num = 1;
var over_num = 0; /*
pos => 起点坐标id
target => 终点坐标id
key => 返回的字符串,保存上一层递归完成的路径节点
len => 节点的id差(本例中没用到)
pos0 => 原始起点,防止走回头路
*/ function tree(pos, target, key, len, pos0)
{ var _index = 0; var others = []; var tmp = ''; for(x in allPaths)
{
// one point is pos
if (allPaths[x] [0] == pos || allPaths[x] [1] == pos)
{
var other = allPaths[x] [0] == pos ? allPaths[x] [1] : allPaths[x] [0]; if ( (pos > target && (other >= pos || other >= pos0 ) ) || (pos < target && (other <= pos || other <= pos0 ) ) ) continue; others.push(other); if (_index > 0)
tree_num ++; _index ++;
}
} for(y in others)
{
other = others[y] ;
len += other - pos; // other one is end?
if (other == target)
{
result.push(key+target+",|"+len);
over_num ++;
continue;
}
// else if (other > endId) continue ?
tree(other, target, key+other+",", len, pos0);
} // all tree over ?
if (tree_num == over_num)
{
// console.log(result);
}
} function get_short_path(a,b){
tree(a,b,"",0, a);
var ret = result;
result = [];
var min = 100;
var min_path_str = '';
//求出最短的路径
for (x in ret)
{
var path_arr_str = ret[x].split('|')[0];
var path_arr = path_arr_str.split(",");
var rank = path_arr.length;
if (rank < min)
{
min = rank;
min_path_str = path_arr_str;
}
}
return min_path_str.slice(0,-1).split(",");
} // tree(begId, "", 0); var search_arr = [[185,188],[191,184]]; for ( var x in search_arr)
{
var ret = get_short_path(search_arr[x][0], search_arr[x][1]);
console.log(ret);
}

threejs 组成的3d管道,寻最短路径问题的更多相关文章

  1. Threejs 使用的3D格式

    3D格式你可以通过任意软件导出(.3ds,dae等),但是threejs 无法使用, 1,http://www.blender.org/ 下载这款开源的3d软件 2,https://github.co ...

  2. 在threejs中对3D物体旋转的思考

    今天在写threejs时,突然想到一个问题:一个3D物体需要旋转时,一般情况下简单的旋转我都是使用欧拉角,稍微复杂一些的情况我会把欧拉角转换成四元数进行旋转(欧拉角复杂旋转可能会产生的死锁问题),但是 ...

  3. ThreeJS的特效合成器和后期处理通道

    最近要写个 web 交互式发光可交互的框架.没查到啥好资料,自己一个人摸索了很久,有些失望,可是毕竟是探索过的东西,所以做个记录,怀念我过去好多天掉的青丝(捂脸).我在前面那篇博客里面已经介绍了如何让 ...

  4. 基于 HTML5 Canvas 的 3D 渲染引擎构建生产管控系统

    前言 大家好,老郑我又回来了.这一期为大家带来一个非常好玩的 demo,我们制作一套自己的 3D 管道控制系统,运用了( http://www.hightopo.com )HT 的 Graph3dVi ...

  5. 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图

    在Jerry写这篇文章时,通过Google才知道,SAP其实是有自己的3D模型视图显示解决方案的. 故事要从Right Hemisphere说起,这是一家专业的企业级2D/3D模型浏览及转换的软件供应 ...

  6. reactjs中使用threejs从0到1

    搭建本地开发环境 安装nodejs 按照 Create React App 安装指南创建一个新的项目 npx create-react-app react-three-demo 删除掉新项目中 src ...

  7. Three.js 保存camera(视角)设置到数据库,包括场景的缩放、旋转、移动等

    最近在做的项目中遇到需要保存当前的3d管道视角设置的问题,用户希望在对3d场景内的管道进行了缩放.旋转.移动之后可以将场景当前的视角状态保存在数据库中,并在下次加载时读取. 经过不断的尝试和研究,在同 ...

  8. OpenGL编程逐步深入(九)插值处理

    注:文中VS代指顶点着色器,FS代指片段着色器. 准备知识 这个教程和大家展示3d管道中非常重要的部分,即Interpolation(插值).光栅化程序执行的插值变量由VS产生.正如你已经见到过的,为 ...

  9. CSharpGL(56)[译]Vulkan入门

    CSharpGL(56)[译]Vulkan入门 本文是对(http://ogldev.atspace.co.uk/www/tutorial50/tutorial50.html)的翻译,作为学习Vulk ...

随机推荐

  1. CodeForces 242E二维线段树

                                                                                           E. XOR on Seg ...

  2. SQL Server 后悔药 delete drop update

    国庆假期终于有时间做点事情 因为平常工作会做些数据库操作 可能会有所操作失误  参考一下 方法一 ApexSql 2016一个软件 http://www.cnblogs.com/gsyifan/p/A ...

  3. C#设计模式之六原型模式(Prototype)【创建型】

    一.引言 在开始今天的文章之前先说明一点,欢迎大家来指正.很多人说原型设计模式会节省机器内存,他们说是拷贝出来的对象,这些对象其实都是原型的复制,不会使用内存.我认为这是不对的,因为拷贝出来的每一个对 ...

  4. docker命令不需要敲sudo的方法

    由于docker daemon需要绑定到主机的Unix socket而不是普通的TCP端口,而Unix socket的属主为root用户,所以其他用户只有在命令前添加sudo选项才能执行相关操作. 如 ...

  5. ubuntu访问文件服务器

    随便打开一个文件夹,按ctrl+L 输入 smb://172.29.17.1 然后输入用户名和密码即可

  6. zoj 2022

    分析: 组合数学类型的题目. 正常的话可能会去分解1~N数里面有几个5和2,但是这样的复杂度为O(nlogn). 其实有更巧妙的办法,可以把问题分解成子问题. 可以发现N!末尾的0与1~N中有几个5的 ...

  7. javascript正则表达式入门

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  8. css3制作网页中常见的小箭头

    /* css3三角形(向上 ▲) */ div.arrow-up { width:0px; height:0px; border-left:5px solid transparent;  /* 右透明 ...

  9. [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)

    javascript中,如何让一个元素(比如div)运动起来呢? 设置基本的样式,一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 ); <style> div { ...

  10. 学习笔记之08试用div做网页(滨院)-小作业

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...