![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Three.js地球开发
weixin_43787178
这个作者很懒,什么都没留下…
展开
-
Three.js地球开发—3D经纬度等比地图,3D飞行航线最终效果
大致原理:一. 3D经纬度等比地图思路:通过读取解析json格式存储的世界地图坐标信息,实现3D球面的地图经纬度等比映射,基于此还可以进行更多的开发。二. D动态航线思路:2.1 先绘制二维XOY平面绘制关于Y轴对称的飞行圆弧轨迹线借助Three.js的ArcCurve创建圆弧曲线,绘制二维XOY平面绘制关于Y轴对称的飞行圆弧轨迹线;2.2 三维空间中绘制任意两点的飞行圆弧轨迹线在三维空间中绘制任意两点的飞行圆弧轨迹线,借助之前在XOY平面的绘制的关于Y轴对称的轨迹线,通过一系列旋转得到任意三原创 2021-05-11 00:03:19 · 2423 阅读 · 3 评论 -
Three.js地球开发—5.国家边界线和国家轮廓Mesh进行组合
先看最终效果图:实现原理:创建一个球体几何对象SphereBufferGeometry,并设置材质material的map属性为之前保存渲染生成国家轮廓Mesh贴图;通过把边界线和SphereBufferGeometry构建的几何体添加进Group达到组合的目的。核心代码如下图所示:...原创 2021-05-10 21:21:08 · 790 阅读 · 0 评论 -
Three.js地球开发—4.Three.js渲染场景保存成贴图
保存Three.js canvas画布上的信息,设置preserveDrawingBuffer为true,创建一个超链接元素,用来下载保存数据的文件,通过超链接herf属性,设置要保存到文件中的数据。以此实现保存渲染生成国家轮廓Mesh的贴图。核心代码如下图所示:此目的是为了把上文的(Three.js地球开发—6.读取坐标数据渲染生成国家轮廓Mesh)渲染结果保存成纹理贴图,方便对后期的三维地球进行贴图操作;...原创 2021-05-10 21:00:37 · 635 阅读 · 0 评论 -
Three.js地球开发—3.读取坐标数据渲染生成国家轮廓Mesh
基于Three.js中的ShapeBufferGeometry构建一个几何体,传入顶点数据,渲染生成国家边界线;其中顶点数据由如下解析而来: 世界地图的坐标信息以.json格式存储,每个国家的轮廓以经纬度坐标存储;循环遍历读取每个国家的数据并转换成二维向量格式;其流程图如下:核心代码如下图所示:最终效果:...原创 2021-05-10 20:56:32 · 674 阅读 · 0 评论 -
Three.js地球开发—2.读取JSON坐标数据渲染生成国家边界线
1.国家坐标数据集介绍JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于大众书写和阅读,直观性强;同时也易于机器生成和解析。[18]全球各个国家的边界信息,以JSON格式文件进行存储。代码格式如图所示:2.读取坐标数据渲染生成国家边界线基于Three.js中的BufferGeometry构建一个几何体,传入顶点数据,渲染生成国家边界线;其中顶点数据由如下解析而来: 世界地图的坐标信息以.json格式存储,每个国家的轮廓以经纬度坐标存储;循环遍历读取每原创 2021-05-10 20:50:04 · 1382 阅读 · 2 评论 -
Three.js地球开发—7.three.js波动光圈特效
先看最终要实现的效果:需求:想实现一种波动光圈的特效—中间颜色深,距离中间越远颜色越浅,呈现动态的,颜色逐渐变浅;纹理素材:思路:颜色渐变的实现:既然说了颜色是逐渐变浅的,那么原始的贴图肯定是透明度逐渐降低,由于之前本身的纹理透明度是逐渐降低的,所以可以在three.js里面通过改变材质的透明度.material.opacity实现渐变的效果。动感的实现:通过不断的改变纹理大小.scale.set实现;为了体现规则的周期性变化,所以缩放大小,和透明度大小到了一定程度要回复初始值,并且放在原创 2021-03-22 13:15:20 · 3679 阅读 · 15 评论 -
Three.js地球开发—3.three.js光柱特效
思路:方案1利用两个光柱进行贴图,两两垂直成九十度。depthWrite: false,注意把深度影响关了,官方解释:Whether rendering this material has any effect on the depth buffer. Default is true..depthWrite : Boolean:When drawing 2D overlays it can be useful to disable the depth writing in order to lay原创 2021-03-21 19:59:50 · 3265 阅读 · 9 评论 -
Three.js地球开发—6.三维球面上某点进行贴图标注
**需求:**在三维地球上某点进行贴图,并且任意角度都可以观察到。发生场景:设想的是直接用贴图在某点贴上去,可发现旋转视角并不能任意方向都观察到,查了下资料才想起来three.js的贴图默认贴在xoy平面,即使开了双面可见,视线总有看不见的(贴图是二维平面,而不是三维的)。解决办法:保证贴图与球面要进行贴图的某点相切,这样各个视角就看得见了。首先要知道相切的概念:一看图就懂,不解释了。然而通常我们都是在二维平面中去了解他们,当涉及到三维开发的时候,通常的思路是:计算两个面的法向量,若两个法向量平原创 2021-03-21 17:05:05 · 1349 阅读 · 0 评论 -
Three.js地球开发—1.经纬度转球面坐标
经纬度转Three.js球面坐标关于经纬度: 横着的为纬度,竖着的为经度;首先要搞清楚定义,大概就是与地心的夹角…,放张照片就懂了。原理: 最好的方法就是从两个剖面去理解,刚好一个为纬度,一个为经度的定义角,更直观一点。地球半径为R,存在一点A,A的经纬度是(lon,lat)(弧度值),在Three.js坐标中A的坐标是(x,y,z)。1.经度转x坐标利用勾股定理,x=R*sin(维度)...原创 2021-03-07 10:00:50 · 3392 阅读 · 0 评论