three.js第一篇【基本了解】

今天开始学习three.js,之前也听说过这个引擎。我们应该怎么称呼它呢?


Three.js在Github上是这么说的: JavaScript 3D library


The aim of the project is to create an easy to use, lightweight, 3D library. The library provides , , CSS3D and WebGL renderers.

我斗胆翻译一下:


用jacascript脚本来编写的、运行在浏览器中的3D库!

目的是创建一个易于使用的、轻量级的3D库,它能提供、 CSS3D 和 WebGL渲染器。

于新手来说,这里面又有几个新名词了,什么鬼?、CSS3D、WebGL。熟悉js的朋友应该对前面3个很熟悉了。

是HTML5新增的一个标签元素!就是承载绘制图像的!!比如通过JS画个圆圈,画个三角形等等。本身不能绘制,只能用于显示!


是什么呢?和相似,绘图的。自己可以绘制!他们有区别没?有!我BAIDU了一个比较,做参考:


canvas和svg的共同点:
1. 都是新的html支持点,很可能都会加入w3c正式标准
2. 都可以和html良好结合,无需插件
3. 都可以用css和JS进行操作
4. 浏览器对他们的支持都还不完备,各有各的私有属性
5. ie系列对canvas和svg都基本抓瞎
canvas和svg的区别:
1. canvas画的图形都是一体的没法独立操作,而svg的每个图形都可以独立操作
2. canvas画10000条线,页面上还是只有一个canvas元素;svg画10000条线,那页面中就可能会加入10000个标签
3. canvas操作单独图形的方法是清除掉再重绘,svg则直接操作那个图形所在的标签即可。
4. canvas画出的图形可以称之为位图,而svg画出的是矢量图
5. 重要:canvas的图形对搜索引擎是一片黑,而svg的图形由于可以夹带文本,seo毫无压力


下面说重点了,WebGL是什么鬼???


做过图形图像开发,玩过OpenGL的肯定知道了,其中的GL就是(Graphics Library)图形库的意思。他们都有GL这2个关键字,说明都是是底层图形库,干嘛的?绘制图形的,什么点线面,三角形,圆柱体等等。可以创建3D场景!!
WebGL很明显就是可以在浏览器上面绘制图形的。是浏览器上一中3D标准。


此时,有朋友可能会问,以前在网页也可以看3D场景啊,不是很早就有了吗?还玩过3D网页游戏呢!难道以前的不是WebGL吗?


是的,以前有过,Flash3D,Unity3D,Virtools等工具制作3D场景,都可以发布网页,然后在网页上运行大型3D游戏。但是,我说的是但是,都有一个通病,就是必须要安装浏览器插件,每个开发工具都有自己的插件。还有版本问题。用户下载安装各种烦躁啊!!!!没有一个统一的标准!!!


WebGL就是为了统一这个标准而诞生的,有了它,浏览器不需要安装任何插件,你通过本文的主角three.js编写的3D场景就可以在浏览器上纵横捭阖,一路向西。畅通无阻的运行了。这个真是一个大好事!!!


重点是:苹果公司的Safari浏览器带头支持,然后其他如:谷歌浏览器、火狐浏览器、Opera浏览器都支持。IE(刚开始不敢,后来扛不住,IE11版本也支持了!)浏览器支持、当然国内的浏览器如果选择(兼容模式即谷歌浏览器内核肯定支持了,如果选择IE模式,那就需要选择IE11以上咯)。


如果想在你的网页里面开发自己的3D场景,那就开始吧。不再犹豫!

[原创,如果转载请注明出处!谢谢!]

你可能感兴趣的:(three.js篇章学习)