玩three.js的一点心得

契机：

3-4月份，有机会再次学了一遍高数，然后再一次从二，三重积分的坑里爬来爬去，其中有个直观的问题一直困扰着我就是一个函数在空间坐标系上的图像，所以当时就打算学完这些之后，自己在5月份的时候用three.js自己做一个展示函数图像的小app，这是大体的出发点。

心得：

three.js 是个js框架，封装了webgl的底层操作，webgl是什么呢？ 是一种3d绘图协议，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。（百度百科）

  当然我们前端要弄这个webgl首先还是要用canvas获取绘图上下文，然后调用各种api，不过webgl还是太底层了，所以才有了three.js，就像原生js操作dom太麻烦，后来便有了jq，一个道理。

three.js四大件，分别是camera，scene，light，render。

camera就是你的眼睛，通过控制camera的position和lookAt，决定视线

scene就是舞台，所有需要展示的mesh都将add在scene上

light就是光，有了光便有了世界

至于render便是将以上三者综合的结果渲染在了浏览器上

就这样，通过以上几步操作一个二维平面的显示器就可以模拟一个三维世界的显示了。我一直觉得在一个二维平面上显示三维的东西是一个很‘伟大的’事情，前段时间看过一篇3d游戏的发展史后更觉如此，仔细想想几十年以前的显示器完全就是马赛克风格，后来随着像素点的密集，显示的图形才越来越精美。

有了以上的操作后，借助于bom的一些api就能实现动画了，如果是简单的旋转，放大操作可以用THREE.OrbitControls实现，如果只是展示一个3d模型有以上知识就差不多ok了。然而很重要的一点是一个好的3d作品，贴图，材质和模型是尤为重要的，另外尤其得考虑光照因素。而且在现在外界设施的各种限制下，性能优化肯定也是three.js的一个大课题。

最后放点我的成果，球：

马鞍面：

github地址：

https://github.com/daxiazilong/threeDFunctions