THREE.JS 绘制飞线攻击线迁移线拓扑图动画线条等

在THREE中如何绘制飞线；使用的是Points+Shader封装的一个飞线方法；可以用于攻击线路，指向效果等；显卡GT730 6000根飞线帧数在30FPS，可以调节线条的长度和间隔，增加流畅度
代码地址觉得不错的可以star下
快速搭建工具-持续开发中

demo

曲线
实线
光点
贴图

使用飞线

let _Fly = new initFly({texture: "./xxx.png"//飞线贴图  如果不需要则不传递
});//初始化方法
//添加飞线
let flyMesh = _Fly.addFly({color: `rgba(255,0,0,1)`,curve: [],//飞线的路径  [{x,y,z},{x,y,z},{x,y,z}]  数组越大 飞线越密width: 9,//飞线的宽度 大小length: 150,//飞线的长度 speed: 1,//速度 越大越快repeat: 1, //重复次数  1-Infinitycallback:function(){/*当前完成后回调*/};
})
scene.add(flyMesh);

删除

*repeat 循环次数完毕自动删除

_Fly.remove(flyMesh); //手动删除

注意

需要在 requestAnimationFrame 中执行 _Fly.animation(delta);

路径

var points = _Fly.tranformPath([new THREE.Vector3(0, 0, 0),new THREE.Vector3(100, 100, 100)],1
);

例子

var time = setInterval(() => {if (index >= 4000) {clearInterval(time)}var x = 0;var z = 0;var x1 = THREE.Math.randFloat(-200, 200);var z1 = THREE.Math.randFloat(-200, 200);var curve = new THREE.QuadraticBezierCurve3(new THREE.Vector3(x, 0, z),new THREE.Vector3((x + x1) / 2, THREE.Math.randInt(200, 420), (z1 + z) / 2),new THREE.Vector3(x1, 0, z1));var points = curve.getPoints(500);var flyMesh = _Fly.addFly({color: `rgba(${THREE.Math.randInt(0, 255)},${THREE.Math.randInt(0, 255)},255},1)`,curve: points,width: 9,length: 150,speed: 1,repeat: Infinity})scene.add(flyMesh);index++;
})

如有疑问可加Q群：1082834010

THREE.JS 绘制飞线攻击线迁移线拓扑图动画线条等相关推荐

canvas绘制飞线效果
在我们做的可视化大屏项目中,经常会遇到飞线的效果. 在我们的大屏编辑器中,可以通过拖拽+配置参数的方式很快就能够实现.下面是我们使用大屏编辑器实现的一个项目效果: 中间地图就有飞线的效果. 抛开编辑器 ...
便利贴--9{Cesium+js绘制多个点和多个线的图层，加标题}
便利贴--9{Cesium+js绘制多个点和多个线的图层,加标题} 代码代码附加转类型从openlayers线数据转到DC的Polyline数据 changeData(data, name, va ...
altium designer 绘制pcb时如何检查漏线
如何使用altium designer 绘制pcb时如何检查漏线详细步骤: 1:打开pcb,单击 Report------Board Information...如下图psb 2:然后出现如下对话框 ...
线下迁移线上，如何使用企业微信打造数字化企业？
导读 | 特殊时期,很多企业都在思考一个问题--如何将线下迁移线上?而微信发布的全新企业微信3.0,提出对内让信息流转高效,对外连接11亿微信用户.那么,如何在企业微信上创建一个连接客户的应用,将小程 ...
在绘制USB2.O设备接口差分线时，应注意以下几点要求：
在绘制USB2.O设备接口差分线时,应注意以下几点要求: ①在元件布局(PCB Layout)时,应将USB2.O芯片放置在离地层最近的信号层,并尽量靠近USB插座,缩短差分线走线距离. ②差分线上不 ...
可视化篇（四）——— python绘制双y轴、箱线图、概率分布三种图形及案例
可视化篇(四)--- python绘制双y轴.箱线图.概率分布三种图形及案例摘要绘制双y轴图形绘制箱线图绘制概率分布图摘要本文演示了如何通过python绘制双y轴.箱线图.概率分布三种图形 ...
成中集团线下IDC迁移上云
阿里云根据成中集团业务场景入手,提供了上云方案和迁移建议,利用这套架构,保障了公司数据的安全性并且满足了公司对于备份机制的建立的基本诉求,并且降低了业务出现中断的风险. 公司介绍成中简介: 我们公司 ...
cad net 绘制带圆弧的多段线
//绘制带弧线的多段线输入每个点和它后面圆弧的角度(180°的圆弧就是 Math.PI),如果没有圆弧则用null public static ObjectId MakePolylineWithAr ...
openlayers根据半径绘制圆形，多圆连线并标记距离
openlayers根据半径绘制圆形,多圆连线并标记距离实现一个什么效果呢,就是在openlayers上面,绘制三个圆形,绘制完成之后,三个圆心连接起来,然后标记出每两个圆心之间的距离. 期望效果: ...

THREE.JS 绘制飞线攻击线迁移线拓扑图动画线条等

THREE.JS 绘制飞线攻击线迁移线拓扑图动画线条等

demo

使用飞线

删除

注意

路径

例子

THREE.JS 绘制飞线攻击线迁移线拓扑图动画线条等相关推荐

最新文章

热门文章

THREE.JS 绘制飞线 攻击线 迁移线 拓扑图动画线条等

THREE.JS 绘制飞线 攻击线 迁移线 拓扑图动画线条等

demo

使用飞线

删除

注意

路径

例子

THREE.JS 绘制飞线 攻击线 迁移线 拓扑图动画线条等相关推荐

最新文章

热门文章

THREE.JS 绘制飞线攻击线迁移线拓扑图动画线条等

THREE.JS 绘制飞线攻击线迁移线拓扑图动画线条等

THREE.JS 绘制飞线攻击线迁移线拓扑图动画线条等相关推荐