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 <canvas>, <svg>, CSS3D and WebGL renderers.

我斗胆翻译一下：

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

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

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

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

<svg>是什么呢？和<canvas>相似，绘图的。自己可以绘制！他们有区别没？有！我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场景，那就开始吧。不再犹豫！

[原创，如果转载请注明出处！谢谢！]