欢迎大家来到IT世界,在知识的湖畔探索吧!
Web GL是在浏览器中实现三维效果的一套规范,而最初使用Web GL原生的API来写3D程序是一件非常痛苦的事情。
在辛苦的付出下WebGL开源框架出现了,其中three.js就是非常优秀的一个,它掩盖了很多麻烦的细节,那么,就让我们一起来看看。
什么是three.js
three.js可以将它理解成three + js,three表示3D的意思,js表示java script的意思。合起来,three.js就是使用java script来写3D程序的意思。
Three.js是一个伟大的开源Web GL库,WebGL允许Java Script操作GPU,在浏览器端实现真正意义的3D。
Java Script一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。也是世界上最流行的编程语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
Java script是运行在网页端的脚本语言,那么毫无疑问Three.js也是运行在浏览器上的。
如果我们需要使用Three.js来绘图,只需要创建一个最小绘图环境即可。Three.js在底层其实还是调用html5中的canvas api来实现绘图的。
但和我们一般绘制2D图像不同,Three.js在底层使用的是canvas的web gl context来实现3D绘图。
Web GL context本身更多是直接对GPU的操作,用起来相当不直观,为此Three.js在顶层对3D绘图所需的各种元素(例如场景、摄影机、灯光、几何图像、材质等)进行了封装。
three.js三大组件
这三大组件分别是相机(Camera)、渲染器(Renderer)和场景(Scene),这三个组件是创建3D图形的必备组件。其中:
场景用来容纳图形元素,包含所有需要显示的3D物体以及其他相关元素的容器。场景相当于宇宙,而图形元素就是星星,图形元素只有添加到场景中,其坐标、大小等才有意义。
摄影机的作用是决定3D场景如何投影到2D画布之上,定义可视域,确定哪些图形元素是可见的。
渲染器则负责用如何渲染出图像,是使用Weg GL还是Canvas,用于最后绘制的画笔。
欢迎留言评论交流,或搜索码大哥。
下方
技术/运营:lafenla-wk
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/35908.html