• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
老顽童760 显示全部楼层 发表于 2021-10-25 18:55:50 |阅读模式 打印 上一主题 下一主题
前面我们看到了利用原生的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

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作