浅谈WebGL和ThreeJS相关

整理一些WebGL相关

  • WebGL:是JavaScript的一个API 允许在浏览器端生成3D图像或者图像。
  • Three.js:是一个WebGL的框架,让在浏览器端生成3D图形更加的容易,它使用 canvas + WebGL 一起共同展示3D场景。
  • CSS 3D:仅仅只有一些CSS3的一些3D变型,让我们能更容易的实现出3D效果,但是采用的是常规的DOM节点。
  • D3.js:D3是一个数据可视化的库,它很容易的生成基于数据的图形,但是生成的都是2D的图形。

使用场景

  • 如果你仅仅是在你的网站上想要一些3D的效果用CSS3变形的话,可以看一下这个不错的介绍:Intro to CSS 3D transforms

  • 如果你是想要做3D模型、纹理、场景,更像真实效果的话,用Three.js。它是在WebGL上面做了很简单又优雅的一层,并且文档完善而丰富,可以从下面这个文档开始学习:Three.js / documentation,或者去这个讲解的教程看看:Getting Start with ThreeJS

  • 如果想做数据驱动的2D图形,就用D3这个库,这个库有很大能力去构建客户想要的图表,并且能让图片更加有交互性,官网:D3官网

结语

网上也有一些非常cool的demo,是把D3,CSS3D,Three.js这三个库结合在一起的,可以移步这里delimited | CrunchBase Top Investors,讲解的文章D3.js, Three.js and CSS 3D Transforms
希望上面这些会帮助到你,如果你想了解更多的信息请直接去查看他们各自的官方文档,并且也可以去看他们的🌰,会有很多有用的实践,并且让你更容易的去理解他们。

完…