THREE.JS 绘制飞线 攻击线 迁移线 拓扑图动画线条等_three.js 拓扑图-程序员宅基地

技术标签： 飞线  可视化  THREE  

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-Infinity
    callback: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
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29814417/article/details/102682800

智能推荐

Vue 3D轮播插件vue-carousel-3d-程序员宅基地

文章浏览阅读9.5k次，点赞12次，收藏40次。效果图：安装npm install -S vue-carousel-3d引入在main.js全局引入：import Carousel3d from 'vue-carousel-3d';Vue.use(Carousel3d);使用<template> <div> <div class="box"> <carousel-3d> <slide v-for="(item, i) in sli._vue-carousel-3d

16行代码实现微信聊天机器人，自动智能回复(1)_vip1024c-程序员宅基地

文章浏览阅读919次，点赞16次，收藏7次。不知道你们用的什么环境，我一般都是用的Python3.6环境和pycharm解释器，没有软件，或者没有资料，没人解答问题，都可以免费领取（包括今天的代码），过几天我还会做个视频教程出来，有需要也可以领取~给大家准备的学习资料包括但不限于：Python 环境、pycharm编辑器/永久激活/翻译插件python 零基础视频教程Python 界面开发实战教程Python 爬虫实战教程Python 数据分析实战教程python 游戏开发实战教程Python 电子书100本。_vip1024c

【Oracle】Net Manager配置服务名_oracle net manager 配置数据库所在计算机的tcp/ip主机名在哪找-程序员宅基地

文章浏览阅读518次。一、第一步找到Net Manager，如图所示：二、第二步打开后找到中间的Oracle Net配置下有一个服务命名，鼠标点击“服务命名”后，点击左侧的绿色加号，如图所示 ：三、第三步输入“网络服务名”，网络服务名是自己命名的，没有硬性限制，如图所示，然后点击下一步。四、第四步点击TCP/IP协议，如图所示，点击下一步。五、第五步输入主机名和端口号，主机名是指你需要连接的数据库所在的电脑的..._oracle net manager 配置数据库所在计算机的tcp/ip主机名在哪找

PAT1065 单身狗 (25分)(C语言)_pta单身狗c语言-程序员宅基地

文章浏览阅读615次，点赞2次，收藏2次。Sample Input311111 2222233333 4444455555 66666755555 44444 10000 88888 22222 11111 23333Sample Output510000 23333 44444 55555 88888思路：我打开这道题的时候是条单身狗，现在已经有一个可爱的、美丽的女朋友啦，希望每个快乐的程序员都有自己所爱..._pta单身狗c语言

数据挖掘作业5（个数据库有5个事务，如下表所示。设min_sup=60%,min_conf=80%）_数据库有5个事务,设minsup60% minconf80-程序员宅基地

文章浏览阅读4w次，点赞57次，收藏238次。5.7一个数据库有5个事务，如下表所示。设min_sup=60%,min_conf=80%。（1）分别用Apriori算法和FP-growth算法找出所有频繁项集，比较两种挖掘方法的效率。（2）比较穷举法和Apriori算法生成的候选项集的数量。（3）利用（1）所找出的频繁项集，生成所有的强关联规则和对应的支持度和置信度。![在这_数据库有5个事务,设minsup60% minconf80

安装软件包的三种方法；rpm包介绍、rpm工具的用法；yum工具用法、源码包安装_rpm安装rpm包-程序员宅基地

文章浏览阅读774次。安装软件包的三种方法 （安装与卸载） rpm工具 yum工具 （支持自动安装依赖的包） 源码包 安装源码包，需要我们把源代码编译成可执行的二进制文件 rpm包介绍挂载一下光驱看一下rpm包mount /dev/cdrom /mnt 挂在到/mnt下ls /Packages 查看一下里面的rpm包画圈的依次为：rpm包格式包名、版本号、发布版本号、平台 ..._rpm安装rpm包

随便推点

Java中的匿名内部类_java 匿名内部类-程序员宅基地

文章浏览阅读699次。定义：巴拉巴拉巴拉，就不写了。_java 匿名内部类

STM32系列ARM单片机介绍_单片机型号stm与df-程序员宅基地

文章浏览阅读330次。它们以高性能、低功耗和丰富的外设集成而闻名，为开发者提供了强大的功能和灵活性。在STM32系列单片机中，常见的型号包括STM32F0、STM32F1、STM32F2、STM32F3、STM32F4、STM32F7、STM32H7等。STM32F4系列：这是一款高性能的单片机系列，具有更高的时钟频率和更多的外设集成。STM32H7系列：这是一款高性能、高集成度的单片机系列，具有更高的时钟频率和更大的内存容量。该系列提供了较低的功耗和丰富的外设选项，可满足对成本和功耗敏感的应用需求。_单片机型号stm与df

Json常用注解_jsonignore注解-程序员宅基地

文章浏览阅读8.8k次，点赞3次，收藏23次。1、@JsonIgnoreProperties类别：类注解作用：json序列化时将bean中的一些属性忽略掉，序列化和反序列化都受影响内部可以写多个属性@JsonIgnoreProperties({"name"},{"age"})2、@JsonIgnore类别：属性或方法上的注解（最好是属性上）作用：用来完全忽略被注解的字段和方法对应的属性，序列化和反序列化都受影响@JsonIgnoreprivate int age;标记注释，指示基于内省的序列化和反序列化功能将忽略带注解的方法或字_jsonignore注解

海外抖音Tiktok这么火，到底值不值得做？_tik tok海外抖音怎么样-程序员宅基地

文章浏览阅读2k次。大家好 我是项柚。作为一个工作多年的95后社畜，可以负责任的告诉你tiktok这个平台非常值得做，只要想做什么时候开始都不晚，最怕的就是口嗨，然后身体躺平哦！早九晚五的小公司上班的我，因为口罩原因，反复我们一次次居家隔离，让本来微薄的工资又削减了很多，给别人打工不如咱们自己做老板！于是我决定要离职创业从今年12月份开始，从零开始做tiktok到现在月入千单，也逐渐尝到流量平台的红利甜头。收益仅代表个人我没有算过这段时间具体赚了多少钱，但是现在银行卡上确确实实攒下有20多万了，在巨大流量._tik tok海外抖音怎么样

解决： SQL Error: 0, SQLState: null-程序员宅基地

文章浏览阅读3.3w次。错误信息如下：警告: SQL Error: 0, SQLState: null2010-4-20 13:34:50 org.hibernate.util.JDBCExceptionReporter logExceptions严重: Cannot create PoolableConnectionFactory2010-4-20 13:34:50 org.hibernate.cfg.Settin_sql error: 0, sqlstate: null

.NET Data Access Architecture Guide_(),such as those supplied for oledb and odbc,allow-程序员宅基地

文章浏览阅读1.9k次。.NET Data Access Architecture GuideRelated Linkspatterns & practices IndexApplication Architecture for .NET: Designing Applications and ServicesAlex Mackman, Chris Brooks, Steve Busby,_(),such as those supplied for oledb and odbc,allow you to use data

推荐文章

热门文章

相关标签