Threejs 实现3D 地图(06)3d 地图飞线动画

3d 地图飞线

代码仓库:

King/threejs-3d-map

核心代码:


import flyLine from "./constant/flyLine.json";const initFlyLine = () => {flyLine.forEach(item => {const [from_x, from_y] = d3Function(item.from)const [to_x, to_y] = d3Function(item.to)const start = new THREE.Vector3(from_x, -from_y, 32);  // 起点坐标const v1Point = [item.from[0] + (item.to[0] - item.from[0]) / 4, item.from[1] + (item.to[1] - item.from[1]) / 4]const [v1_x, v1_y] = d3Function(v1Point)const v1 = new THREE.Vector3(v1_x, -v1_y, 100);const v2Point = [item.from[0] + ((item.to[0] - item.from[0]) * 3) / 4, item.from[1] + ((item.to[1] - item.from[1]) * 3) / 4]const [v2_x, v2_y] = d3Function(v2Point)const v2 = new THREE.Vector3(v2_x, -v2_y, 100);const end = new THREE.Vector3(to_x, -to_y, 32);  // 终点坐标// 创建三次贝塞尔曲线const curve = new THREE.CubicBezierCurve3(start, v1, v2, end);// 使用 TubeGeometry 根据贝塞尔曲线绘制管道const tubeGeometry = new THREE.TubeGeometry(curve, 256, 2, 8, false); // 曲线256段, 半径2, 20个横截面// 创建材质,颜色为白色const material = new THREE.MeshBasicMaterial({color: item.color});// 创建管道网格const tubeMesh = new THREE.Mesh(tubeGeometry, material);// 将管道添加到场景中showScene.add(tubeMesh);const points = curve.getPoints(1000)const bufferGeometry = createBufferGeometry(points)const shaderMaterial = createShaderMaterial()const point = new THREE.Points(bufferGeometry, shaderMaterial)showScene.add(point)// 设置着色器的动画gsap.fromTo(shaderMaterial.uniforms.uTime,{ value: 0 },{// 实现飞线钻地效果需要让 动画节段数 = 飞线长度 + 飞线点数量value: 80 + 1000,duration: 3,repeat: -1,delay: 0,ease: "none",onUpdate: () => {},});})
}// 创建着色器
function createShaderMaterial() {// 起点颜色let color1 = "#0c57e3";return new THREE.ShaderMaterial({depthTest: false,uniforms: {// 线条颜色uColor: {value: new THREE.Color(color1),},// 时间1-1000uTime: {value: 0,},// 水滴宽度uWidth: {value: 200,},// 水滴长度uLength: {value: 80,},vSize: {value: 10.0},},vertexShader: /*glsl*/ `attribute float aIndex; // 内部属性 浮点 当前序号uniform float uTime; // 全局变量 浮点 当前时间uniform float uWidth; // 全局变量 浮点 线段宽度uniform vec3 uColor; // 全局变量 颜色 设置的颜色varying float vSize; // 片元变量(需要传递到片面着色器) 浮点 尺寸uniform float uLength; // 全局变量 浮点 线段长度void main(){vec4 viewPosition = viewMatrix * modelMatrix * vec4(position,1);gl_Position = projectionMatrix * viewPosition; // 顶点矩阵变换 设置各个点的位置// 当前顶点的位置处于线段长度内 则设置水滴大小if(aIndex >= uTime - uLength && aIndex < uTime){// 水滴大小根据当前位置慢慢变小// p1 uWidth越大水滴越粗// vSize = uWidth * ((aIndex - uTime + uLength) / uLength);// p2 uWidth越大水滴越细vSize = (aIndex + uLength - uTime) / uWidth;}gl_PointSize = vSize;}`,fragmentShader: /*glsl*/ `varying float vSize;uniform vec3 uColor;void main(){// 透明度根据当前大小确定是否展示if(vSize<=0.0){gl_FragColor = vec4(1,0,0,0);}else{gl_FragColor = vec4(uColor,1);}}`,transparent: true,vertexColors: false,});
}// 创建bufferGeometry
function createBufferGeometry(points) {const indexList = points.map((_, index) => index);const bufferGeometry = new BufferGeometry().setFromPoints(points);// 给几何体添加自定义的索引标识 用来后续根据索引设置点的透明度bufferGeometry.setAttribute("aIndex",new THREE.Float32BufferAttribute(indexList, 1));return bufferGeometry;
}
[{"from": [104.065735,30.659462],"to": [116.405285,39.904989],"color": "#00fbff"},{"from": [104.065735,30.659462],"to": [121.472644,31.231706],"color": "#ff0004"},{"from": [104.065735,30.659462],"to": [87.617733,43.792818],"color": "#d8ff94"},{"from": [104.065735,30.659462],"to": [121.509062,25.044332],"color": "#08c9ff"},{"from": [104.065735,30.659462],"to": [112.982279,28.19409],"color": "#ff00ee"}
]

下一篇:

Threejs 实现3D 地图(07)3d 地图 完结-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/57214.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序 - 动画(Animation)执行过程 / 实现过程 / 实现方式

前言 因官方文档描述不清晰,本文主要介绍微信小程序动画 实现过程 / 实现方式。 实现过程 推荐你对照 官方文档 来看本文章,这样更有利于理解。 简单来说,整个动画实现过程就三步: 创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法…

2D拓扑图

2D拓扑图主要指的是在二维平面上表示物体形状和关系的一种图形表示方法。 一、基本概念 2D网格拓扑结构&#xff1a;在二维平面上&#xff0c;由一系列的节点&#xff08;node&#xff09;和边&#xff08;edge&#xff09;组成。每个节点代表一个具体的位置或坐标点&#xf…

Kafka认证时Successfully logged in真的认证成功了?

背景 某个应用需要配置 Kafka 集群信息&#xff0c;且需要在验证集群是否可达。基本实现思路是创建一个生产者对象&#xff0c;然后发送一条测试数据&#xff0c;调用 Producer 的 send 方法发送消息后&#xff0c;再调用 get() 方法&#xff0c;即同步发送消息&#xff0c;测…

基于spootboot学生选课系统设计与实现

资料下载 https://download.csdn.net/download/qq_63753925/89888794 https://download.csdn.net/download/qq_63753925/89888793 https://download.csdn.net/download/qq_63753925/89885091 https://download.csdn.net/download/qq_63753925/89882320 摘 要 近年来&#xf…

机器人转人工时,开启实时质检(mod_cti基于FreeSWITCH)

文章目录 前言联系我们实现步骤1. 修改拨号方案2. 启用拨号方案 前言 在客户与机器人对话中&#xff0c;是不能开启质检功能的。因为机器人识别会与质检识别产生冲突。如果用户想通过机器人转接到人工时&#xff0c;开启质检功能&#xff0c;记录客户与人工之间的对话。应该如…

MySQL史上最全总结

MySQL学习笔记 安装与配置myini文件内容&#xff1a;初始化MySQL: MySQL语法&#xff1a;SQL-DDL数据库1.创建数据库2.查看数据库3.修改4.删除 数据库中的表管理1.创建表2.查找3.修改4.删除5.截断表 SQL-DML1.添加数据1.1插入多条数据1.2表内容复制 2.修改数据3.删除 TRUNCATE和…

Android中的epoll机制

深入理解Android中的epoll机制 在Android系统中&#xff0c;epoll广泛用于高效管理网络和文件的I/O操作。它通过减少CPU资源消耗和避免频繁的内核态-用户态切换&#xff0c;实现了在多连接、多任务环境中的高性能。epoll的特性使其非常适合Android系统中网络服务器、Socket通信…

php伪协议和move_uploaded_file、rename、copy等文件操作

move_uploaded_file、rename、copy 三个函数的区别&#xff1a; move_uploaded_file 函数是专门用于将通过 HTTP 上传的临时文件移动到指定位置的。如果你想要将一个已经存在的文件移动到另一个位置&#xff0c;而不是上传的文件&#xff0c;那么你应该使用 rename 函数或 co…

Java SPI 机制详解

面向对象设计鼓励模块间基于接口而非具体实现编程&#xff0c;以降低模块间的耦合&#xff0c;遵循依赖倒置原则&#xff0c;并支持开闭原则&#xff08;对扩展开放&#xff0c;对修改封闭&#xff09;。然而&#xff0c;直接依赖具体实现会导致在替换实现时需要修改代码&#…

自动驾驶性能分析时,非常有用的两个信息

自动驾驶的关键路径如下&#xff0c;传感器的数据发送给感知模块&#xff1b;感知模块根据传感器数据来确定车辆所处的环境&#xff0c;比如前方有没有障碍物&#xff0c;是不是和车道线保持着适当的距离等&#xff1b;感知处理之后的数据传递给规控模块&#xff0c;规控根据车…

【Spring】Cookie与Session

&#x1f490;个人主页&#xff1a;初晴~ &#x1f4da;相关专栏&#xff1a;计算机网络那些事 一、Cookie是什么&#xff1f; Cookie的存在主要是为了解决HTTP协议的无状态性问题&#xff0c;即协议本身无法记住用户之前的操作。 "⽆状态" 的含义指的是: 默认情况…

代码随想录 | Day35 | 动态规划 :最小花费爬楼梯不同路径不同路径II

代码随想录 | Day35 | 动态规划 &#xff1a;最小花费爬楼梯&&不同路径&&不同路径II 动态规划应该如何学习&#xff1f;-CSDN博客 动态规划学习&#xff1a; 1.思考回溯法&#xff08;深度优先遍历&#xff09;怎么写 注意要画树形结构图 2.转成记忆化搜索…

【大模型系列】Mini-InternVL(2024.10)

Paper&#xff1a;https://arxiv.org/pdf/2410.16261Github&#xff1a;https://github.com/OpenGVLab/InternVL/tree/main/internvl_chat/shell/mini_internvlAuthor&#xff1a;Zhangwei Gao et al. 上海人工智能实验室 文章目录 0 总结(省流版)1 模型结构1.1 InternViT-300M…

使用Virtual Audio Cable捕获系统音频输出并使用Python处理

一、下载安装Virtual Audio Cable&#xff0c;软件下载地址和安装过程略过。 二、Virtual Audio Cable使用方法Virtual Audio Cable使用笔记一&#xff1a;使用Virtual Audio Cable将播放器的音频流传输到真实声卡驱动中_virtual audio cable control panel-CSDN博客 三、打开…

MySQL 数据库备份与恢复全攻略

MySQL 数据库备份与恢复全攻略 引言 在现代应用中&#xff0c;数据库是核心组件之一。无论是个人项目还是企业级应用&#xff0c;数据的安全性和完整性都至关重要。为了防止数据丢失、损坏或意外删除&#xff0c;定期备份数据库是必不可少的。本文将详细介绍 MySQL 数据库的备…

C++17 折叠表达式

折叠表达式 C17之前处理参数包 C17折叠表达式的出现让我们不必再用递归实例化模板的方式来处理参数包。 在 C17之前&#xff0c;实现必须分成两个部分&#xff1a; 终止条件递归条件 这样的实现不仅写起来麻烦&#xff0c;对 C编译器来说也很难处理。C17折叠表达式能显著的…

大语言模型数据流程源码解读(基于llama3模型)

文章目录 前言一、数据进入LlamaForCausalLM(LlamaPreTrainedModel)类二、数据进入LlamaModel(LlamaPreTrainedModel)类1、input_ids的embedding编码2、position_ids位置获取3、causal_mask因果mask构建1、causal_mask调用2、因果mask代码解读(_update_causal_mask)4、hidden_s…

Docker镜像的创建、修改与导出

Docker镜像的创建、修改与导出 前言一、创建Docker镜像1. 基于已有镜像创建方法一:修改现有镜像方法二:使用Dockerfile通过源码编译安装nginx二、修改Docker镜像1. 基于已有镜像创建新镜像方法一:修改现有镜像2. 使用`docker commit`命令创建新镜像方法一:提交正在运行的容…

Depcheck——专门用于检测 JavaScript 和 Node.js 项目中未使用依赖项的工具

文章目录 Depcheck 是什麽核心功能&#x1f4da;检测未使用的依赖&#x1f41b;检测缺失的依赖✨支持多种文件类型&#x1f30d;可扩展性 安装与使用1. 安装 Depcheck2. 使用 Depcheck Depcheck 的应用总结项目源码&#xff1a; Depcheck 是什麽 来看一个常见错误场景&#x1…

Sqoop的安装配置及使用

Sqoop安装前需要检查之前是否安装了Tez,否则会产生版本或依赖冲突&#xff0c;我们需要移除tez-site.xml&#xff0c;并将hadoop中的mapred-site.xml配置文件中的mapreduce驱动改回成yarn&#xff0c;然后分发到其他节点&#xff0c;hive里面配置的tez也要移除&#xff0c;然后…