three webgl flyLine;绘制飞线 攻击线 迁

绘制飞线 曲线 实线 光点 贴图 使用飞线

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-Infinity }) 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++; }) 联系qq 674656681

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。