HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍


Posted in HTML / CSS onJanuary 31, 2013

前面我们看到了使用原生的WebGL API开发是多么的累,正因为如此,大量的WebGL框架被开发出来。使用这些框架,你可以快速创建需要的3D场景。这些框架不同程度的封装了创建3D场景的各种要素,例如场景,相机、模型、光照、材质等等;使用这些封装起来的对象,就可以很简单的创建需要的3D场景,这样你就只需要把更多精力放在逻辑方面就可以了。

目前并没有哪一个具有能压倒其他框架的优势,选择什么样的框,还是看个人喜好吧,不过选择框架的时候,个人觉得还是多看看框架最后的更新时间,选择稳定更新的框架能让你始终能使用上最新的特性,使你的程序稳定性更好。

下面的例子就使用了Three.js框架进行开发。
Three.js是一个比较全面的开源框架,它良好的封装的3D场景的各种要素。你可以用它来很容易的去创建摄像机,模型,光照,材质等等。你还可以选择不同的渲染器,Three.js提供了多种渲染方式,你可以选择使用canvas来渲染,也可以使用WebGL或者SVG来进行渲染。

 此外,Three.js可以加载很多格式的3D文件,你的模型文件可以来自Blender,Maya,Chinema4D,3DMax等等。而且内置了比较基础的东西:(球体)Spheres, (飞机)Planes, (立方体) Cubes, (圆柱体)Cylinders。Three.js创建这些物体会非常的容易。

好了,不废话了,直接看代码:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<title>threeJSDemo </title>
<meta charset="utf-8">
<style>
body
{
margin:0px;
background-color:#B0B0B0;
overload:hidden;
}
</style>
</head>
<body>
<script src="Three.js"></script>
<script>
var camera,scene,renderer;
var mesh;
init();
animate();

function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70,window.innerWidth / window.innerHeight,1,1000);
camera.position.z = 400;
scene.add(camera);
geometry = new THREE.CubeGeometry(200,200,200);
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.05;
mesh.rotation.y += 0.05;
renderer.render( scene, camera );
}
</script>
</body>
</html>


这个是全部的代码,相对于前面使用WebGL的API的代码,这个简直就是太简单了。
代码很直观,就那么几步:
1. 创建场景scene。
2. 创建摄像机camera。
3. 创建/加载模型geometry。
4. 加载材质material。
5. 渲染模型对象mesh(是由geometry和material组成)。
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/?cat=57
CubicVR3D官网: http://www.cubicvr.org/
Three.js图形库: https://github.com/mrdoob/three.js
各种框架的收集贴:http://www.appcrews.com/2011/07/129.html

HTML / CSS 相关文章推荐
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 HTML / CSS
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
Nov 05 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 27 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
Sep 14 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 #HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 #HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 #HTML / CSS
You might like
2.PHP入门
2006/10/09 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
使用JavaScript破解web
2018/09/28 Javascript
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
python实现从pdf文件中提取文本,并自动翻译的方法
2018/11/28 Python
python中的print()输出
2019/04/12 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python内置函数locals和globals对比
2020/04/28 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
招聘专员岗位职责
2014/03/07 职场文书
购房协议书
2014/04/11 职场文书
机械专业求职信
2014/05/25 职场文书
未婚证明书模板
2014/10/08 职场文书
社区综治工作汇报
2014/10/27 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书