threejs 组成的3d管道,寻最短路径问题

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

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);
}
时间: 2024-10-03 16:36:22

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

基于Threejs的jQuery 3d图片旋转木马特效插件

这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件.该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置. 浏览器兼容: Firefox - 30.0.0 + Chrome - 35.0.0 + Explorer: 9 + Ipad Safari: 7.0.0 + Iphone Safari: 7.0.0 + IOS Safari: 7.0.0 + Android Chrome: 未测试 IOS Chrome: 未测试 效果演示:http:

angular8 + threejs 实现太阳系3D动画

坑! 当项目决定要做宇宙星空效果的时候,我百度了一波:发现了threejs:然后就从0开始学习了:一路上坑坑洼洼的:网上确实有相关文章,但没有相对于新手的:尤其是我这种现看文档现做的:而且很多代码都是使用原生js或者jquery的: 这次是我把threejs引入angular8做的一个太阳系效果:至于后面怎么交互的:后面再补:首先把效果做出来:先上图~~~静态图,实际效果是可以动的 首先安装: // 安装threejs npm i three -s // npm i [email protect

对于宫格地图寻最短路径的一个广度搜索算法

1 import java.util.ArrayDeque; 2 import java.util.ArrayList; 3 import java.util.HashMap; 4 import java.util.Iterator; 5 import java.util.Map.Entry; 6 import java.util.Queue; 7 8 public class TestPath { 9 10 public static void main(String[] args) { 11

CSharpGL(56)[译]Vulkan入门

本文是对(http://ogldev.atspace.co.uk/www/tutorial50/tutorial50.html)的翻译,作为学习Vulkan的一次尝试. 不翻译的话,每次都在看第一句,那就学不完了. Background 背景 You've probably heard by now quite a bit about Vulkan, the new Graphics API from Khronos (the non profit organization responsibl

转 threejs中3D视野的缩放实现

Threejs基础部分学习知道透视相机new THREE.PerspectiveCamera(fov, aspect , near,far)中. fov视野角(拍摄距离)越大,场景中的物体越小.fov视野角(拍摄距离)越小,场景中的物体越大. 透视相机(近大远小) PerspectiveCamera //透视照相机参数设置 var fov = 45,//拍摄距离 视野角值越大,场景中的物体越小 near = 1,//相机离视体积最近的距离 far = 1000,//相机离视体积最远的距离 asp

使用threejs绘制简单的3D图形

首先,如果想要学习threejs,先去看看 官方基础教程 ,里面阐述了threejs的核心概念和一些重要的对象.这边文章就是具体使用threejs加入3D图形的一个水文,看了自由添加其他物体有个参照. 使用threejs绘制3D图形,一般绘制的结果都是通过canvas元素生成,对于平面.3D效果.视角变化和交互.动画这一块,使用threejs可以快速便捷地帮助我们完成工作,而不必一步一步创建canvas,获取context再逐条绘制.threejs有一些基本概念在使用之前必须要了解. 核心三大块

3d模型一般怎么导入到到Threejs中使用

这是我之前做的一个demo,导入的3d模型文件是obj格式的,需要使用OBJLoader和MTLLoader, mtl文件用于描述多边形可视面貌的材质如果你可以导出obj.mtl文件的话,那么就可以使用下面的代码把3d模型添加到three.js构建的场景里了 function loadBuild() { var loader = new THREE.OBJLoader(); var mtlLoader = new THREE.MTLLoader(); mtlLoader.setPath( "ci

Threejs 开发3D地图实践总结

前段时间连续上了一个月班,加班加点完成了一个3D攻坚项目.也算是由传统web转型到webgl图形学开发中,坑不少,做了一下总结分享. 1.法向量问题 法线是垂直于我们想要照亮的物体表面的向量.法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用.每一个顶点都有一个关联的法向量. 如果一个顶点被多个三角形共享,共享顶点的法向量等于共享顶点在不同的三角形中的法向量的和.N=N1+N2: 所以如果不做任何处理,直接将3维物体的点传递给BufferGeometry,那么由于法向量被合成,经过

Three-js 创建第一个3D场景

1.一个场景至少需要的三种类型组件 相机/决定哪些东西将在屏幕上渲染    光源/他们会对材质如何显示,以及生成阴影时材质如何使用产生影响    物体/他们是在相机透视图里主要的渲染队形:方块.球体等 2.浏览器兼容 Moziller Firefox:4.0版本以后开始支持:    Google Chrome:第9版以后开始支持    Safari:5.1版本开始支持:    Opera:12.00版本以后开始支持.要让Opera支持WebGL,你还需要打开opera:config文件,设置We