webgl 2d库,webgl 3d引擎
前面我们看到了用原生WebGL API开发有多累。正因为如此，大量的WebGL框架被开发出来。使用这些框架，您可以快速创建所需的3D场景。这些框架在不同程度上封装了创建3D场景的各种元素，如场景、相机、模型、灯光、材质等。使用这些封装的对象，您可以轻松地创建所需的3D场景，因此您只需要更多地关注逻辑。
目前还没有人比其他框架更有优势。选择什么样的框架，看个人喜好。不过在选择框架的时候，我觉得还是看框架的最后更新时间比较好。选择一个稳定更新的框架，总能让你用上最新的特性，让你的程序更稳定。
以下示例是使用Three.js框架开发的。
Three.js是一个全面的开源框架，很好的封装了3D场景的各种元素。你可以用它轻松的创建相机，模型，灯光，材质等等。也可以选择不同的渲染器。Three.js提供了多种渲染方式。可以选择使用canvas进行渲染，也可以使用WebGL或者SVG进行渲染。
另外Three.js可以加载多种格式的3D文件，你的模型文件可以来自Blender，Maya，Chinema4D，3DMax等等。以及内置的基本东西：(球体)、(平面)、(立方体)、(圆柱体)。Three.js将非常容易地创建这些对象。
好了，废话少说，只看代码：复制代码。代码如下：
！声明文档类型
超文本标记语言
头
titlethrejsdemo/title
meta charset=utf-8
风格
身体
{
边距：0px
背景色：# B0B0B0
过载：隐藏；
}
/风格
/头
身体
script src=Three.js/script
脚本
var相机、场景、渲染器；
var网格；
init()；
animate()；
函数init(){
场景=新三。场景()；
相机=新三。PerspectiveCamera(70，window . inner width/window . inner height，11000)；
camera . position . z=400；
scene.add(相机)；
几何=新三。立方体几何(200，200，200)；
材质=新三。MeshBasicMaterial({ color:0x ff 0000，wire frame:true })；
mesh=新三。网格(几何、材质)；
scene . add(mesh)；
渲染器=新三。WebGLRenderer()；
renderer . setsize(window . inner width，window . inner height)；
document . body . appendchild(renderer . DOM element)；
}
函数animate() {
requestAnimationFrame(animate)；
mesh . rotation . x=0.05；
mesh . rotation . y=0.05；
renderer.render(场景、相机)；
}
/脚本
/body
/html
这是全部代码。与之前使用WebGL API的代码相比，这简直太简单了。
代码很直观，只需几个步骤：
1.创建一个场景场景。
2.创建一个相机摄像机。
3.创建/加载模型几何图形。
4.加载材料材料。
5.渲染模型对象网格(由几何体和材质组成)。
6.启用动画。
这是每个框架都提供的功能。在使用不同的框架时，这些步骤基本上是相同的，只是函数的名称可能不同。以下参考资料中列出了许多框架学习文档。可以选几个来学。
对于模型数据，我还想说，JSON比较适合网络传输，因为它短小精悍。它可能会成为未来最适合WebGL的模型数据格式，所以很多框架开始支持JSON格式的模型数据。
实用参考：
开发中心：https://developer.mozilla.org/en/WebGL
在线开发工具：http://webglplayground.net/
各种框架的基础课程：http://www.html5china.com/HTML5features/WebGL/
WebGL中文课程：http://www.hiwebgl.com/? p=42
Oak3D中文课程：http://www.hiwebgl.com/?猫=57
CubicVR3D官网：http://www.cubicvr.org/
Three.js图形库：https://github.com/mrdoob/three.js
各种相框的收藏贴：http://www.appcrews.com/2011/07/129.html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。