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 box-shadow阴影(外阴影与外发光)图示讲解
Aug 11 HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 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
Protoss魔法科技
2020/03/14 星际争霸
php查看session内容的函数
2008/08/27 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python实现猜数字小游戏
2020/03/24 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
flask框架视图函数用法示例
2018/07/19 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
python GUI计算器的实现
2020/10/09 Python
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
医学毕业生自荐信
2013/10/11 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
求职信的正确写法
2014/07/10 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers