契机:
3-4月份,有机会再次学了一遍高数,然后再一次从二,三重积分的坑里爬来爬去,其中有个直观的问题一直困扰着我就是一个函数在空间坐标系上的图象,所以当时就打算学完这些以后,自己在5月份的时候用three.js自己做一个展现函数图象的小app,这是大体的动身点。文章源自微观生活(93wg.com)微观生活-https://93wg.com/4718.html
心得:文章源自微观生活(93wg.com)微观生活-https://93wg.com/4718.html
three.js 是个js框架,封装了webgl的底层操作,webgl是什么呢? 是一种3d绘图协定,通过增添OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就能够借助系统显卡来在阅读器里更流畅地展现3D场景以及模型了,还能创立繁杂的导航以及数据视觉化。(百度百科)文章源自微观生活(93wg.com)微观生活-https://93wg.com/4718.html
固然咱们前端要搞这个webgl首先还是要用canvas获取绘图上下文,然后调用各种api,无非webgl还是太底层了,所以才有了three.js,就像原生js操作dom太麻烦,后来便有了jq,一个道理。文章源自微观生活(93wg.com)微观生活-https://93wg.com/4718.html
three.js四大件,分别是camera,scene,light,render。文章源自微观生活(93wg.com)微观生活-https://93wg.com/4718.html
camera就是你的眼睛,通过节制camera的position以及lookAt,抉择视野文章源自微观生活(93wg.com)微观生活-https://93wg.com/4718.html
scene就是舞台,所有需要展现的mesh都将add在scene上文章源自微观生活(93wg.com)微观生活-https://93wg.com/4718.html
light就是光,有了光便有了世界文章源自微观生活(93wg.com)微观生活-https://93wg.com/4718.html
至于render便是将以上三者综合的结果渲染在了阅读器上文章源自微观生活(93wg.com)微观生活-https://93wg.com/4718.html
就这样,通过以上几步操作一个二维平面的显示器就能够摹拟一个三维世界的显示了。我一直文章源自微观生活(93wg.com)微观生活-https://93wg.com/4718.html
以上就是微观生活(93wg.com)关于“玩three.js的一点心得”的详细内容,希望对大家有所帮助!
评论