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
