html5 3d游戏框架,HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
前面我们看到了使用原生的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创建这些物体会非常的容易。
好了,不废话了,直接看代码:
复制代码代码如下:
threeJSDemo
body
{
margin:0px;
background-color:#B0B0B0;
overload:hidden;
}
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 );
}
这个是全部的代码,相对于前面使用WebGL的API的代码,这个简直就是太简单了。
代码很直观,就那么几步:
1. 创建场景scene。
2. 创建摄像机camera。
3. 创建/加载模型geometry。
4. 加载材质material。
5. 渲染模型对象mesh(是由geometry和material组成)。
6. 启用动画。
这是每个框架都提供的功能,使用不同的框架除了函数的名称可能不同以外,这些步骤基本都是一样的。下面的参考中列出了很多的框架学习文档,大家可以选几种学习一下。
针对模型数据,我还想说一点,因为JSON短小精悍,所以比较适合网络传输。未来它可能成为最适合WebGL的模型数据格式,所以很多的框架都开始支持JSON格式的模型数据。
html5 3d游戏框架,HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍相关推荐
- html5 小游戏编写,HTML5编写的小游戏
HTML5编写的小游戏 HTML5 是什么东西?而 HTML5 的优势又在哪里?大家可以回顾之前一篇相关文章了解下 HTML5 知识:<深入分析:Flash VS HTML5到底谁统江山> ...
- 3D游戏角色模型建模| ZBrush制作3D兽人
一个游戏角色模型是如何创建的?想学习游戏建模的朋友可以看看,可以大概了解如何基于概念艺术创建风格化角色.从雕刻 (ZBrush) 到纹理(sp),毛发(Xgen),照明/材质/渲染(Maya+ arn ...
- 3D游戏模型教程系列:3D max基础命令(零基础教学)
3DMax是Autodesk公司开发的三维动画渲染和制作软件. 3D Max 操作简单,是很多小白的入手软件.而且3DMax应用范围比较广,它可以帮助游戏.电影和运动图形设计人员在更短的时间内创建更佳 ...
- Silverlight.XNA(C#)跨平台3D游戏研发手记:(十)3D 场景与控制设计①
模型和骨骼动画仅仅是开启3D游戏的敲门砖,置入基于摄像机的场景设计方能呈现最完美的3D游戏.本节,我们依旧从简单着手,一步步创建基于模型的3D游戏场景. <XNA4.0学习指南(中文)>是 ...
- Silverlight.XNA(C#)跨平台3D游戏研发手记:(十一)3D SLG(策略战棋游戏)设计案例
某天,当你一不小心发现已经够随心所欲的驾驭3D摄像机之时,任何类型的3D游戏都将成为囊中玩物,过往如烟. 回忆逝去的童年让我极度惦记的SLG策略战棋游戏,或许对于大多数玩家来说,它费时费力不被讨好:然 ...
- 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第三节:3D摄像机
<使用Cocos2d-x 开发3D游戏>系列在线课程 第三节:3D摄像机 视频地址:http://edu.csdn.net/course/detail/1330/20803?auto_st ...
- 火云开发课堂 - 《使用Cocos2d-x 开发3D游戏》系列 第一节:3D时代来临!
<使用Cocos2d-x 开发3D游戏>系列在线课程 第一节:3D时代来临!Cocos2d-x程序员的机遇和挑战! 视频地址:http://edu.csdn.net/course/deta ...
- html5 图形组件,数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- html5 网页游戏 开源,HTML5 网页游戏,基于 WebGL 打造
环境 操作系统:Ubuntu Kylin 优麒麟 20.04 LTS.Debian 11 Bullseye.银河麒麟 V10 SP1.红旗 Linux V11 适用架构:AMD64(海光.兆芯).AR ...
最新文章
- 迈向未来的那五种人,自古以来就很重要的人
- Matlab | MATLAB编辑器:无法使用GBK编码保存文件,请改用UTF-8编码保存文件(问题解决)
- java实现愤怒的小鸟游戏
- SQL中where 1 = 1的用处
- FCKEditor在.net的使用 cnblogs
- SQL Server 计算汉字笔画函数
- 小牛各个版本的限速破解方式-适用N1/M1/N1s----附加转向灯提示音修改
- MongoDB 可视化工具 RoboMongo---Win7 64 安装
- 计算机故障处理试题,模块五计算机故障诊断与排除 测试题
- Docker启动MySql容器Exited (1) 7 seconds ago问题解决
- 2p C和3p C的区别
- 21 _ 服务调用失败时有哪些处理手段?
- 国内知名SaaS平台有哪些
- 计算机授课教案模板,公开课优秀教案模板
- 【LeetCode-SQL】1709. 访问日期之间最大的空档期
- 十一回老家买不到票,最后被黄牛套路
- MT6757详细芯片资料分享 MT6757设计原理图须知
- 【定制开发】【M11】Python采集数据源,自动生成Excel报表:避免人力浪费,提高工作效率
- android APK升级
- POJ - 2111 Millenium Leapcow(从最大出发到最小,再反向记录路径)
热门文章
- ISE软件的基本操作
- 二维码,如何设计创意二维码
- 会声会影支持服务器,会声会影各种问题总结以及解决方法-
- ...... 处有未经处理的异常: 0xC0000005: 读取位置 0xcccccccc 时发生访问冲突
- RK3568平台开发系列讲解(音频篇)Android音量控制流程
- 基于php+mysql的房屋销售管理系统
- TS学习(八) :TS中的类
- GnuCash 3.5 发布,跨平台财务管理软件
- CODESYS (V3.5 SP12 Patch)简单应用 第 2篇之单轴简单使用CFC+ST代码(硬件:长沙赛搏机器智能MIC7001总线控制器+松下A6BE总线驱动器)
- 测试听力 html,听力测试,看看你的耳朵听力受损了没