欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5之WebGL 3D概述(下)—借助类库开拓及框架先容

发布时间:2016-11-29  编辑:杨雨个人博客网站   点击:   

前面我们看到了行使原生的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

本文地址:http://itbyc.com/web/html5/13880.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1