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实现信纸/同学录效果的示例代码
Dec 11 HTML / CSS
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
Oct 08 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 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
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
vue实现动态按钮功能
2019/05/13 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
jQuery实现日历效果
2020/09/11 jQuery
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python画微信表情符的实例代码
2019/10/09 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
给酒店员工的表扬信
2014/01/11 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
前处理组长岗位职责
2014/03/01 职场文书
白莲教口号
2014/06/18 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
民事辩护词范文
2015/05/21 职场文书
教师节感想
2015/08/11 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python
Python IO文件管理的具体使用
2022/03/20 Python