Threejs 实现3D 地图(05)3d 地图进场动画和地图边缘动画

3d 地图进场特效以及地图边缘动画

代码仓库:

King/threejs-3d-map

地图边缘动画核心代码:

const initBorderPoint = () => {// 获取地图边界的左边(通过https://datav.aliyun.com/portal/school/atlas/area_generator#2.51/104.299012/33.447963 获取)let borderPoints3Array = borderMap.features[0].geometry.coordinateslet borderPoints = []borderPoints3Array.forEach((coordinate) => {coordinate.forEach((rows) => {rows.forEach(v => {// 将坐标转化为 d3的坐标const [x_XYZ, y_XYZ] = d3.geoMercator().center([109, 34.5]).scale(1000).translate([0, 0])(v)borderPoints.push({x: x_XYZ, y: -y_XYZ})// 将转换后的坐标放入到一个数组存储起来(重点!!!)linePoints.push([x_XYZ, -y_XYZ, 32])})});});opacityGeometry = new THREE.BufferGeometry();// 将数组转化为一维数组positions = new Float32Array(linePoints.flat(1));// 然后3个一组opacityGeometry.setAttribute("position", new BufferAttribute(positions, 3));opacity = new Float32Array(positions.length).map(() => 0);opacityGeometry.setAttribute("aOpacity", new BufferAttribute(opacity, 1));// 控制 颜色和粒子大小const params = {pointSize: 5.0,pointColor: '#37ffff'}// 看不懂写死const vertexShader = `attribute float aOpacity;uniform float uSize;varying float vOpacity;void main(){gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1.0);gl_PointSize = uSize;vOpacity=aOpacity;}`// 看不懂写死const fragmentShader = `varying float vOpacity;uniform vec3 uColor;float invert(float n){return 1.-n;}void main(){if(vOpacity <=0.2){discard;}vec2 uv=vec2(gl_PointCoord.x,invert(gl_PointCoord.y));vec2 cUv=2.*uv-1.;vec4 color=vec4(1./length(cUv));color*=vOpacity;color.rgb*=uColor;gl_FragColor=color;}`// 创建着色器const material = new THREE.ShaderMaterial({vertexShader: vertexShader,fragmentShader: fragmentShader,transparent: true, // 设置透明uniforms: {uSize: {value: params.pointSize},uColor: {value: new THREE.Color(params.pointColor)}}})//  创建一个点opacityPoints = new THREE.Points(opacityGeometry, material)// 将这个点放入到场景中showScene.add(opacityPoints);
}
const render = () => {if (activeProvince === '四川省') {renderer.render(ScScene, camera)let info = document.querySelector('#info')info.style.display = 'none'showScene = ScScene} else {renderer.render(showScene, camera)}if (!activeProvince) {showScene = scenerenderer.render(showScene, camera)}// 如果有地图边界所有坐标if (linePoints && opacity) {// 5234怎么来的:linePoints打印出来我这边有7134个  但是我这边有900个边界点我这边不想显示(也就是我视频下面那一坨很杂碎的地方)所以我截取了5234个//currentPos 也就是数组下标 只去前面5234个点if (currentPos > 5234) {// 移除边缘动画线// showScene.remove(opacityPoints)currentPos = 0;}// 20  就是运动的速度  值越大 移动越快currentPos += 20;// 忘记这是干嘛的for (let i = 0; i < 10; i++) {opacity[(currentPos - i) % linePoints.length] = 0;}// // 忘记这是干嘛的for (let i = 0; i < 100; i++) {opacity[(currentPos + i) % linePoints.length] = i / 50 > 2 ? 2 : i / 50;}// 让点 动起来if (opacityGeometry) {opacityGeometry.attributes.aOpacity.needsUpdate = true;}}// 渲染下一帧的时候会调用render函数requestAnimationFrame(render)tween.update()controls.update()
}

进场动画核心代码:

const tween = new Tween({x: 1000, y: 1000, z: 2000}) // 起始位置.to(camera.position, 2000) // 最终位置.easing(Easing.Quadratic.In) // 过度动画.onUpdate((object) => { // 改变摄像机位置camera.position.x = object.xcamera.position.y = object.ycamera.position.z = object.z}).start();

主要代码解析:

1、获取边缘地图的所有坐标  转换为 d3坐标

DataV.GeoAtlas地理小工具系列

 2、绘制着色器材质(ShaderMaterial)

three.js docs

3、将着色器材质按照地图边界的坐标跑动 

4、使用Tween动画库或者 gsap 动画库实现摄像机进场动画

下一篇:

Threejs 实现3D 地图(06)3d 地图飞线动画-CSDN博客

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

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

相关文章

常用 SQL 语句的大全

常用 SQL 语句的大全&#xff0c;涵盖了基本的查询、更新、删除以及数据库管理等操作&#xff0c;适用于不同的数据库系统&#xff08;如 MySQL、PostgreSQL、SQL Server 等&#xff09;。 1. 数据库操作 创建数据库 CREATE DATABASE database_name;删除数据库 DROP DATABAS…

6,000 个网站上的假 WordPress 插件提示用户安装恶意软件

黑客使用窃取的凭证感染 WordPress 网站&#xff0c;并向其发送虚假插件&#xff0c;通过虚假的浏览器更新提示向最终用户发送恶意软件和信息窃取程序。 该恶意活动基于ClickFix假浏览器更新恶意软件的新变种&#xff0c;自 2024 年 6 月以来已使用假 WordPress 插件感染了超过…

放大器和基本运放电路的公式推导

放大器和基本运放电路的公式推导 放大器全家谱运放的渊源和数学分析基本运放电路的公式推导预备知识基本特性跟随器特性比较器特性 基本运放电路反相放大器&#xff08;反比例运算放大器&#xff09;同相放大器&#xff08;正比例运算放大器&#xff09;反相加法器同相加法器减…

Python条形图 | 指标(特征)重要性图的绘制

在数据科学和机器学习的工作流程中&#xff0c;特征选择是一个关键步骤。通过评估每个特征对模型预测能力的影响&#xff0c;我们可以选择最有意义的特征&#xff08;指标&#xff09;&#xff0c;从而提高模型的性能并减少过拟合。本文将介绍如何使用 Python 的 Seaborn 和 Ma…

Android 12.0进程保活白名单功能实现

在Android 12.0系统中&#xff0c;实现进程保活白名单功能是为了确保某些重要的应用程序即使进入后台也能长时间保持运行状态&#xff0c;不被系统自动杀死。这一功能的实现涉及多个核心类和文件&#xff0c;以下是具体的实现步骤和核心功能分析&#xff1a; 一、实现步骤 …

PG数据库之索引详解

PostgreSQL数据库中的索引是一种用于提高查询性能的重要数据结构。通过索引&#xff0c;数据库可以快速定位到表中的特定行&#xff0c;而无需进行全表扫描。PostgreSQL支持多种索引类型&#xff0c;每种类型都有其特定的应用场景和性能特点。下面将详细介绍PostgreSQL中的索引…

go 使用fyne实现桌面程序的计算器例子

使用Fyne工具包构建跨平台应用是非常简单的&#xff0c;在此之前我们需要做一些准备功能做&#xff0c;比如安装一些gcc基础图形依赖库&#xff0c;还有go语言本身的运行开发环境都是必要的。 在此之前我们希望你是go语言的已入门用户&#xff0c;掌握go的协程&#xff0c;管道…

鲁班猫的一些踩坑

有坑的地方 1、安装relasense&#xff1a; 错误&#xff1a;不要采用下面的二进制安装&#xff08;在主机、Jetson可以使用&#xff09;&#xff0c;尽管也能安装并运行realsense-viwer&#xff0c;但是链接不到相机设备&#xff01; sudo apt-key adv --keyserver keyserver…

Linux基础知识 - C(自学使用)

1.C语言基础知识 参考博客&#xff1a; https://blog.csdn.net/qq_45254369/article/details/126023482?ops_request_misc%257B%2522request%255Fid%2522%253A%252277629891-A0F3-4EFC-B1AC-410093596085%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%…

Xcode文件默认存储位置-使用c++file保存文件默认路径以及设置为路径为当前项目路径

Xcode文件默认存储位置-使用cfile保存文件默认路径以及设置为路径为当前项目路径 1.概述 使用Xcode工具开发时候&#xff0c;遇到C调用file创建文件后&#xff0c;在当前项目中找不到文件路径。这是由于xcode会将文件保存到默认设置的路径。下面是查看文件默认存储路径和修改…

DC-9靶场渗透

靶机&#xff1a;DC-9 DC: 9 ~ VulnHub 攻击机&#xff1a;kail linux 2024 1,将两台虚拟机网络连接都改为NAT模式&#xff0c;并查看DC-9的MAC地址 2&#xff0c;进行主机扫描&#xff0c;通过MAC地址发现靶机的IP地址 攻击机IP地址192.168.23.169&#xff0c;靶机IP地址192.1…

MySQL-存储过程/函数/触发器

文章目录 什么是存储过程存储过程的优缺点存储过程的基本使用存储过程的创建存储过程的调用存储过程的删除存储过程的查看delimiter命令 MySQL中的变量系统变量用户变量局部变量参数 if语句case语句while循环repeat循环loop循环游标cursor捕获异常并处理存储函数触发器触发器概…

QT QGestureEvent支持平移,缩放,旋转触摸板手势

一.Gesture释义 平移:点按住触控板,然后拖移,实现平移功能。 缩放:在触控板上,双指张开实现放大,双指合拢实现缩小。 旋转:在触控板上,双指分别反方向移动旋转,实现旋转功能。 二.实现功能 1.重写bool event(QEvent *event) override事件: bool ImageWidget::event…

16. 虚拟化

文章目录 第16章 虚拟化16.1 共享资源16.2 虚拟机16.3 虚拟机镜像16.4 容器16.5 容器和虚拟机16.6 容器的可移植性16.7 Pod&#xff08;容器组&#xff09;16.8 无服务器架构16.9 小结16.10 扩展阅读16.11 问题讨论 第16章 虚拟化 “虚拟”意味着永远不知道你的下一个字节从哪里…

SpringBoot poi-tl通过模板占位符生成word文件

简介&#xff1a; 开发中我们需要通过在word中使用占位符来动态渲染一些数据&#xff0c;本文讲解poi-tl实现动态生成word文档&#xff0c;包括表格循环&#xff0c;对象嵌套。 poi-tl官网文档 Poi-tl Documentation 1. word格式 这是我的test.word 这是导出后的out.docx文件 …

蓝桥杯普及题

[蓝桥杯 2024 省 B] 好数 题目描述 一个整数如果按从低位到高位的顺序,奇数位(个位、百位、万位……)上的数字是奇数,偶数位(十位、千位、十万位……)上的数字是偶数,我们就称之为“好数”。 给定一个正整数 N N N,请计算从 1 1

UE4 材质学习笔记12(水体反射和折射)

一.水体反射和折射 首先就是要断开所有连接到根节点的线&#xff0c;因为水有很多不同的节点成分&#xff0c;当所有其他节点都在用时 要分辨出其中一个是何效果是很难的。 虚幻有五种不同的方法可以创建反射&#xff0c;虚幻中的大多数场景使用多种这些方法 它们会同时运作。…

opencv-platform实现人脸识别

和同事接触了下甲方,对方算是一个资源整合的自由人&#xff0c;手里有项目&#xff0c;然后认识些开发就聊下有什么事情可以做的&#xff0c;对方聊了下做人脸签到&#xff0c;或者说人脸打开。就这方面我做了下简单的了解。做了个java小demo。 我们常用的人脸识别的摄像头屏幕…

shell脚本语言-需要算法?

文章目录 1. 冒泡排序2. 搜索算法3. 文本处理4. 文件操作5. 条件语句6. 循环 Shell脚本语言本身并不包含高级编程语言中的“算法”概念&#xff0c;如排序算法或搜索算法。Shell脚本主要用于自动化命令行任务&#xff0c;如文件操作、文本处理、程序执行等。不过&#xff0c;Sh…

ctfshow-文件上传-151-161

CTFshow文件上传 PHP文件上传&#xff1a;1、代码思路 黑名单是设置不能通过的用户&#xff0c;黑名单以外的用户都能通过。 phtml、pht、php3、php4、php5后缀都会按做php文件执行&#xff0c;且不在黑名单内。 2、绕过 找漏网之鱼:cer、php3、php4、phtml等。 大小写绕…