无意中找到不久前，一位外友人给我分享的一个案例，重力模拟阅读Three.js案例。他是Web前端开发工程师，这份案例说起来比较值得回忆，因为就是这份案例才促使他现在所有的成就。因为他是通过这个网页案例而自己成功通过拿到工作的，所以我在这里分享给大家，希望能够帮助进一步理解Three.js。
当然，在这篇文章分享之前我还是要推荐下我自己的前端群：618522268，不管你是小白还是大牛，小编我都挺欢迎，不定期分享干货以及各种经典案例（包括此案例），包括我自己整理的一份2018最新的前端资料和零基础入门教程，同时，还会定期和大家共同讨论目前企业需求以及各类面试问题，欢迎初学和进阶中的小伙伴。
右键停止或者开始
静态图
源码：
JS
CSS
Html
threejs是什么？
threejs是一个让用户通过Javascript入手搭建webgl项目的类库。众所周知学习webgl需要图形学知识，而语言需要通过js和glsl两种语言。如果我们不通过threejs使用webgl势必逃不过以上这些东西，你必须全面了解着色器语法和自己编写顶点着色和片元着色；但你使用了threejs显然可以 便捷的逃过这些对于传统js从业人员挑战的shader编写。
上手threejs需要什么基础？
对于3D美术知识的认知，不管你有没有3D美术从业经历，但你必须要懂什么是mesh，什么是贴图，什么是材质，摄像机如何摆放才能构建出良好的视觉体验。还要明白viewport渲染出来的东西关系和camra重点参数如何配置。
对于Javascript的能力以及OOP程序开发能力，游戏开发能力，明白如何使用JS进行面向对象编程，尤其使用threejs 构建比较复杂的网页游戏时候，你必须坐到更清晰的模块化，利用设计米哦是和数据结构进行数据的显示和绑定。
当然，还有一种方法就是来前端群：618522268，开个小玩笑，大家不要建议。
掌握以上三点才是threejs的核心能力！