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

2016-02-19 11:19 45 1 收藏

图老师小编精心整理的HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

前面我们看到了使用原生的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
titlethreeJSDemo /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. 启用动画。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

这是每个框架都提供的功能,使用不同的框架除了函数的名称可能不同以外,这些步骤基本都是一样的。下面的参考中列出了很多的框架学习文档,大家可以选几种学习一下。

针对模型数据,我还想说一点,因为JSON短小精悍,所以比较适合网络传输。未来它可能成为最适合WebGL的模型数据格式,所以很多的框架都开始支持JSON格式的模型数据。

实用参考:
开发中心:https://developer.mozilla.org/en/WebGL

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

精品在线开发工具: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

来源:http://www.tulaoshi.com/n/20160219/1597067.html

延伸阅读
标签: Web开发
SVG支持的蒙板 SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧。 SVG支持的蒙板类型:   1. 裁剪路径(cliping path) 裁剪路径是由path, text或者基本图形组成的图形。所有在裁剪路径内的图形都可见,所有在裁剪路径外的...
标签: Web开发
Javascript执行机制 在HTML5之前,浏览器中JavaScript的运行都是以单线程的方式工作的,虽然有多种方式实现了对多线程的模拟(例如:Javascript 中的 setinterval 方法,setTimeout 方法等),但是在本质上程序的运行仍然是由 JavaScript 引擎以单线程调度的方式进行的。在 HTML5 中引入的工作线程使得浏览器端的 Javascript 引擎可以并发地...
标签: Web开发
SVG和canvas中是一样的,都是使用标准的HTML/CSS中的颜色表示方法,这些颜色都可以用于fill和stroke属性。 基本有下面这些定义颜色的方式 : 1. 颜色名字: 直接使用颜色名字red, blue, black... 2. rgba/rgb值: 这个也很好理解,例如#ff0000,rgba(255,100,100,0.5)。 3. 十六进制值: 用十六进制定义的颜色,例如#ffffff。 4. 渐变值:这个...
标签: Web开发
位图与矢量图 以前,浏览器中显示的图形,例如jpeg、gif等,都是位图,这些图像格式是基于光栅的。在光栅图像中,图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强,但是在某些情形下会显得不足。例如,当浏览器以不同大小显示一副图像时,通常会产生锯齿边缘,这时,浏览器不得不为那...
标签: Web开发
拖拽(Drag/Drop)是个非常普遍的功能。你可以抓住一个对象,并且拖动到你想放置的区域。很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件。在HTML5中,拖拽(draganddrop)成为了标准操作,任何元素都支持。正因为这个功能太普遍了,所有的主流浏览器都支持这个操作。 启用拖拽-draggable属性 非常简单,只需要将一个元...

经验教程

210

收藏

80
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部