跟月影学可视化
月影
前奇虎360奇舞团团长,可视化UI框架SpriteJS核心开发者,《JavaScript王者归来》作者
新⼈⾸单¥19.9
4617 人已学习
课程目录
已完结 53 讲
0/4登录后,你可以任选4讲全文学习。
课前必学 (2讲)
开篇词 | 不写网页的前端工程师,还能干什么?
免费
预习 | Web前端与可视化到底有什么区别?
图形基础篇 (4讲)
01 | 浏览器中实现可视化的四种方式
02 | 指令式绘图系统:如何用Canvas绘制层次关系图?
03 | 声明式图形系统:如何用SVG图形元素绘制可视化图表?
04 | GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
数学篇 (5讲)
05 | 如何用向量和坐标系描述点和线段?
06 | 可视化中你必须要掌握的向量乘法知识
07 | 如何用向量和参数方程描述曲线?
08 | 如何利用三角剖分和向量操作描述并处理多边形?
09 | 如何用仿射变换对几何图形进行坐标变换?
视觉基础篇 (8讲)
10 | 图形系统如何表示颜色?
11|图案生成:如何生成重复图案、分形图案以及随机效果?
12 | 如何使用滤镜函数实现美颜效果?
13 | 如何给简单的图案添加纹理和复杂滤镜?
14 | 如何使用片元着色器进行几何造型?
15 | 如何用极坐标系绘制有趣图案?
16 | 如何使用噪声生成复杂的纹理?
17 | 如何使用后期处理通道增强图像效果?
视觉高级篇 (10讲)
18 | 如何生成简单动画让图形动起来?
19 | 如何用着色器实现像素动画?
20 | 如何用WebGL绘制3D物体?
21 | 如何添加相机,用透视原理对物体进行投影?
22 | 如何用仿射变换来移动和旋转3D物体?
23 | 如何模拟光照让3D场景更逼真?(上)
24 | 如何模拟光照让3D场景更逼真?(下)
25 | 如何用法线贴图模拟真实物体表面
26 | 如何绘制带宽度的曲线?
27 | 案例:如何实现简单的3D可视化图表?
性能篇 (3讲)
28 | Canvas、SVG与WebGL在性能上的优势与劣势
29 | 怎么给Canvas绘制加速?
30|怎么给WebGL绘制加速?
数据篇 (12讲)
31 | 针对海量数据,如何优化性能?
32 | 数据之美:如何选择合适的方法对数据进行可视化处理?
33 | 数据处理(一):可视化数据处理的一般方法是什么?
34 | 数据处理(二):如何处理多元变量?
35| 设计(一):如何让可视化设计更加清晰?
36 | 设计(二):如何理解可视化设计原则?
37 | 实战(一):如何使用图表库绘制常用数据图表?
38 | 实战(二):如何使用数据驱动框架绘制常用数据图表?
39 | 实战(三):如何实现地理信息的可视化?
40| 实战(四):如何实现3D地球可视化(上)?
41 | 实战(五):如何实现3D地球可视化(下)?
42 | 如何整理出我们自己的可视化工具集?
国庆策划 (2讲)
国庆策划 | 假期别闲着,一起来挑战“手势密码”
国庆策划 | 快来看看怎么用原生JavaScript实现手势解锁组件
特别放送 (6讲)
加餐1 | 作为一名程序员,数学到底要多好?
加餐2 | SpriteJS:我是如何设计一个可视化图形渲染引擎的?
用户故事 | 非前端开发,我为什么要学可视化?
加餐3 | 轻松一刻:我想和你聊聊前端的未来
加餐4 | 一篇文章,带你快速理解函数式编程
加餐5|周爱民:我想和你分享些学习的道理
结束语 (1讲)
结束语 | 可视化工程师的未来之路
免费
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

41 | 实战(五):如何实现3D地球可视化(下)?

月影 2020-10-12
你好,我是月影。
上节课,我们实现了一个有着星空背景的 3D 地球效果。但这个效果还比较简单,在某些可视化大屏项目中,我们不仅要呈现视觉效果,还要允许用户与可视化大屏中呈现的内容进行交互。所以这节课,我们会先给这个 3D 地球添加各种交互细节,比如让地球上的国家随着我们鼠标的移动而高亮,接着,我们再在地球上放置各种记号,比如光柱、地标等等。

如何选中地球上的地理位置?

我们先来解决上节课留下的一个问题,为什么我们在绘制 3D 地球的时候,要大费周章地使用 topoJSON 数据,而不是直接用一个现成的等角方位投影的世界地图图片作为球体的纹理。这是因为,我们想让地球能够和我们的鼠标进行交互,比如当点击到地图上的中国区域的时候,我们想让中国显示高亮,这是纹理图片无法实现的。接下来,我们就来看看怎么实现这样交互的效果。

实现坐标转换

实现交互效果的难点在于坐标转换。因为鼠标指向地球上的某个区域的时候,我们通过 SpriteJS 拿到的是当前鼠标在点击的地球区域的一个三维坐标,而这个坐标是不能直接判断点中的区域属于哪个国家的,我们需要将它转换成二维的地图经纬度坐标,才能通过地图数据来获取到当前经纬度下的国家或地区信息。
那如何实现这个坐标转换呢?首先,我们的鼠标在地球上移动的时候,通过 SpriteJS,我们拿到三维的球面坐标,代码如下:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《跟月影学可视化》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥19.9
立即订阅
登录 后留言

精选留言

由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论
返回
顶部