什么是WebGL？
WebGL（Web图形库）是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式的3D或者2D图形，并且不用使用任何的插件。WebGL通过引入一个与OpenGL ES2.0紧密相符合的API，可以在HTML5元素中使用。简而言之，WebGL可以提供一系列的图形接口，通过js去使用GPU来进行浏览器图形渲染的工具。
什么是Three.js？
Three.js是一款WebGL框架，由于其易用性被广泛应用。而Three.js在WebGL的API接口基础上又进行了一层封装。Three.js以简单、直观的方式封装了3D图形编程中常用的对象。Three.js在开发中使用了很多图形引擎的高级技巧，极大的提高了性能，而由于其内置了很多常用对象和极易上手的工具，Three.js的功能也很强大，关键在于Three.js是完全开源的。
WebGL和Three.js的关系
WebGL原生的API是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，入门比较困难，Three.js将入门的门槛降低了整整一大截，对WebGL进行封装，简化了我们创建三维动画场景的过程。只需要有一定的JavaScript基础，有一定的前端经验即可。用一句话概括二者的关系：WebGL与Three.js的关系相当于JavaScript与jQuery之间的关系。
Three.js的功能概述
由于Three.js的易用性和扩展性，使其能够满足大部分的开发需求，Three.js的具体功能如下：
- Three.js掩盖了3D渲染的细节。Three.js将WebGL原生的API的细节抽象化，将3D场景拆解为网格、材质和光源（即Three.js内置了图形编程常用的一些对象种类）。
- 面向对象。开发者可以使用上层的JavaScript对象，而不仅仅调用JavaScript函数。
- 功能丰富。Three.js除了封装了WebGL原始的API之外，Three.js还包含了许多实用的内置对象，可以方便的应用于游戏开发、动画制作、幻灯片制作、高分辨率模型和一些特殊的视觉效果制作。
- 速度快。Three.js采用了3D图形最佳实践来保证在不失可用性的前提下保持极高的性能。
- 支持交互。WebGL本身不提供拾取功能（即是否知道鼠标正处于某个物体上），而Three.js则固化了拾取支持，这就便于为应用添加交互功能。
- 包含数学库。Three.js拥有一个强大易用的数学库，可以在其中进行矩阵、投影和矢量计算。
- 内置文件格式支持。可以使用当前的3D建模软件导出文本格式的文件，然后使用Three.js加载，也可以使用Three.js自带的json格式或者二进制格式。
- 扩展性强。为Three.js添加新的特性或进行自定义优化是很容易的事。如果需要某个特殊的数据结构，那么只需要封装到Three.js即可。
- 支持HTML5 canvas。Three.js不仅支持WebGL，而且还支持使用canvas2D、CSS3D和SVG进行渲染。在未兼容的WebGL环境中可以回退到其他的解决方案。
Three.js的缺点
虽然Three.js的优势很大，但是其也有不足的地方：
- 官网文档非常粗糙，对于入门的新手极度不好。
- 国内相关资源的匮乏。
- Three.js多有的资料都是以英文格式存在，对于英文不好的开发者来说又提高了门槛。
- Three.js不是游戏引擎，一些游戏相关的功能并没有封装在里面，如果需要相关的功能则需要进行二次开发。
Three.js的引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>three.js-01</title>
<link rel="stylesheet" type="text/css" href="css/threejs01.css"/>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
</head>
<body onload="init()">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.js"></script>
<script>
//书写需要的JS代码
</script>
</body>
</html>如果需要更新代码，可以去网址http://www.bootcdn.cn/three.js/查找最新版本地址引入即可。
3217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
