Three.js / WebGL 数据可视化 - 文章教程

Three.js / WebGL 数据可视化

发布于 2021-10-10 字数 1182 浏览 739 评论 0

数据可视化的表达方式有2D和3D形式两种效果,基于Web实现数据可视化,有多种技术可以满足,比如SVG、Canvas、WebGL,一般来说基于SVG和Cnavas技术可实现数据2D可视化显示,基于WebGL技术可视化可以实现2D方式的可视化效果,也实现三维的可视化效果。

比如中国每个省份的 GDP 数据,可以先绘制一个中国轮廓,然后每个省份放一个高亮立柱,用立柱高度表示GDP大小,基于WebGL技术实现数据可视化相比较SVG和canvas性能更好,所以本文主要讲解基于WebGL技术实现数据可视化,基于WebGL技术实现可视化,为了开发更方便,可以不直接通过原生WebGL实现,可以使用基于 WebGL 封装得到的三维引擎,比如国内最常见的 WebGL引擎 Three.js。

技术选择问题

关于数据可视化的技术SVG、Canvas和WebGL选择问题,要根据项目的情况而定,一般来说如果普通数据可视化项目可以选择SVG和Canvas技术,就学习难度而言,毕竟相比WebGL,这两种方式要简单的多,如果你希望数据可视化的性能更高,如果你希望对三维场景进行数据可视化,这时候可以考虑选择WebGL技术,至于选择WebGL哪种引擎,可以根据个人项目特定或个人熟悉哪一款WebGL引擎来选择,接下的内容主要是谈一谈 Three.js 在数据可视化中的应用。

  • 性能:WebGL > Canvas > SVG
  • 学习时间:WebGL < Canvas < SVG
  • 可视化表达能力:WebGL > Canvas > SVG

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

甜柠檬

这个人比较懒,什么都没有填写!

11 文章
2 评论
18997 人气
更多

推荐作者

魏剑帆

文章 0 评论 0

yanggwq

文章 0 评论 0

qq_c2gI5

文章 0 评论 0

qq_iQVWB

文章 0 评论 0