基于HTML5的WebGL经典3D虚拟机房漫游动画


Posted in HTML / CSS onNovember 15, 2017

第一人称在 3D 中的用法要参考第一人称在射击游戏中的使用,第一人称射击游戏(FPS)是以第一人称视角为中心围绕枪和其他武器为基础的视频游戏类型;也就是说,玩家通过主角的眼睛来体验动作。自从流派开始以来,先进的3D和伪 3D图形已经对硬件发展提出了挑战,而多人游戏已经不可或缺。

基于HTML5的WebGL经典3D虚拟机房漫游动画

Doom的截图,这个流派的突破游戏之一,展示了第一人称射击游戏的典型视角

现在博物馆或者公司也经常使用到 3D 动画做宣传片等等,3D动画演绎最大的优势,便是在于内容与形式上给人的真实感受。它比平面作品更直观,比 2D 动画更真实,所以更能给观赏者以置身于广告环境当中的感受,大大增强广告的说服力。3D 技术的发展甚至挑战受众的分辨能力,使受众的判断游离于与虚拟和现实之间。
而且 3D特效的应用为创意提供了更加广阔的思维空间,并成为创意执行的可靠保证,并丰富了创意的形式和风格手段。根据广告主题的表现诉求,可以营造出梦幻般的神奇氛围来刺激打动受众,从而起到与受众沟通的目的。
3D动画宣传片将 3D动画、特效镜头、企业视频、照片、未来前景等内容通过后期合成、配音、解说形成一部直观、生动、喜闻乐见的高品位的企业广告宣传片,让社会不同层面的人士对企业产生正面的、积极的、良好的印象,从而建立对企业的好感与信任,并信赖该企业的产品或服务。

现在 3D 发展地如此迅速也要感谢人类对于“现实”的追求,所以学好用好 3D 是未来成功必不可少的一部分。

本文例子的思路是进入一个机房参观,打开门的动作是再生动不过了, 再加上适当地转弯,基本上完全模拟了人在机房中参观的效果。还有一个好处就是,如果要演示给领导看而又不用操作,这种炫酷的效果领导一定会很满意!

http://www.hightopo.com/demo/room-walkthrough/index.html

基于HTML5的WebGL经典3D虚拟机房漫游动画

界面上的“reset”和“start”两个按钮是直接加在 body 体中的 button,并在这两个按钮上添加点击事件:

<div></div><div></div>

整个场景由 HT 封装的 3D 组件搭建形成的,构造这么大的场景是需要一定量的代码的,为了简化,我把场景单独拿出来,并用 HT 封装的 ht.JSONSerializer 类将场景序列化为 json,代码中只引入了生成后的 json 文件,为了让大家更明确,我这边做个示例,假设已经搭建好 3D 场景了:

dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//.......构建好场景dm.serialize();//可以填入number参数,作为空格缩进值

既然我们已经搭建好环境,转成了 json 文件,代码中不好控制,这种情况下我们会将 DataModel 数据模型再反序列化,这个函数的功能就是将 json 格式转成对象,并将反序列化的对象传入到 DataModel 数据模型中,详情请参考HT for Web 序列化手册:

var g3d = window.g3d = new ht.graph3d.Graph3dView(),    
dataModel = g3d.dm(),    
view = g3d.getView(),    
path = null;g3d.setMovableFunc(function(data) {    return false;});
g3d.setVisibleFunc(function(data) {    
if (data.getName() === "path") {       
 return false;    
}    
return true;});
g3d.setEye([523, 5600, 8165]);g3d.setFar(60000);dataModel.deserialize(json);

我们目前需要操作场景中的“门”、以及我们将要走的路线“path”,遍历 DataModel 数据模型,获取这两个数据:

for (var i = 0; i < dataModel.size(); i++) {    
var data = dataModel.getDatas().get(i);   
 if (data.getName() === "门") 
{//json中设置的名称       
window.door = data;    
}    
if (data.getName() === "path") 
{        
path = data;    
}    
if (window.door && path) 
{//获取到door 和 path 的data之后就跳出循环        
break;   
 }}

这个例子中简单来说就只有四个动作,“重置”回到原点、“开始动作”、“向前移动”,“停止”。点击“开始”按钮,在“开始动作”中我们只做了一个动作,“开门”动作,动作结束之后调用“forward”函数向前移动:

function startAnim() {
   
if (window.isAnimationRunning) 
{        
return;   
 }    
reset();    
window.isAnimationRunning = true;//动画是否正在进行    ht.Default.startAnim({       
 frames: 30, // 动画帧数,默认采用`ht.Default.animFrames`。        
interval: 20, // 动画帧间隔,默认采用`ht.Default.animInterval`。           
finishFunc: function() {// 动画结束后调用的函数。            
forward();        
},         
action: function(t){ // action函数必须提供,实现动画过程中的属性变化。            
door.setRotationY(-120 * Math.PI / 180 * t);        
}    
});
}

这边的“reset”函数就是“重置”回到原点的功能,我们通过这个函数将所有变化过的都恢复初始的位置,包括“门”的位置:

function reset() 
{    
if (window.isAnimationRunning) 
{        
return;    
}    
g3d.setCenter([0,0,0]);    
g3d.setEye([523, 5600, 8165]);    window.forwardIndex = 0;   
 door.setRotationY(0);}

要“移动”,肯定需要走路的“路径”,也就是我们刚刚获取到的“path”,通过window.points = path.getPoints()._as; 获取“path”中的所有元素,初始化window.forwardIndex = 0; 通过控制“path”中前后两点来设置 3D 场景中的 Eye 和 Center,这样就能营造一个我们是第一人的效果:

var point1 = points[forwardIndex],    
 point2 = points[forwardIndex + 1];var distanceX = (point2.x - point1.x),     
distanceY = (point2.y - point1.y),     
distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY)-200;//两点之间的距离通过三角形勾股定理计算 怕碰墙所以-200g3d.setEye([point1.x, 1600, point1.y]);//眼睛g3d.setCenter([point2.x, 1600, point2.y]);//我

HT 中 3D 组件有一个 walk(step, anim, firstPersonMode)方法,该函数同时改变eye和center的位置,也就是eye和center在两点建立的矢量方向上同时移动相同的偏移量。step为偏移的矢量长度值。firstPersonMode参数为空时则默认采用Graph3dView#isFirstPersonMode()当前值, 如果为第一人称模式调用walk操作,该函数会考虑Graph3dView#getBoundaries()边界限制。

g3d.walk(distance, {    
frames: 50,    
interval: 30,    
easing: function(t) {return t; },    
finishFunc: function() {        
forwardIndex += 1;        
if (points.length - 2 > forwardIndex) {//points.length = 5            g3d.setCenter([point2.x, 1600, point2.y]);//把结束点变成起始点            
g3d.rotate(Math.PI / 2, 0, {               
 frames: 30,              
  interval: 30,               
 easing: function(t) {return t;},                finishFunc:function() { forward();}           
 });      
  } 
else 
{            
var lastPoint = points[points.length  - 1];//json 中path的points 的最后一个点           
 g3d.setCenter([lastPoint.x, 1400, lastPoint.y]);            
g3d.rotate(-Math.PI / 2, 0, 
{               
 frames: 30,               
 interval: 30,               
 finishFunc: function() 
{                    
window.isAnimationRunning = false;               
 }           
 });       
 }    
}});

不管“path”的点有多少个,这个判断语句还是能运作,只在最后一个点是跳出 finishFunc 动画结束后调用的函数,并将 window.isAnimationRunning 值设为 false 停止 startAnim 函数。如果不是最后一个点,用户“旋转”之后,回调 forward 函数。至此,全部代码解释完毕,很短的代码量,却做出了这么大的工程!

总结

以上所述是小编给大家介绍的基于HTML5的WebGL经典3D虚拟机房漫游动画,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3 border-radius属性详解
Jul 05 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
Jan 27 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 #HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 #HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 #HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 #HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 #HTML / CSS
HTML5添加禁止缩放功能
Nov 03 #HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 #HTML / CSS
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
laravel 数据迁移与 Eloquent ORM的实现方法
2019/04/12 PHP
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
python分析apache访问日志脚本分享
2015/02/26 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Pycharm 设置默认头的图文教程
2019/01/17 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Python流程控制 while循环实现解析
2019/09/02 Python
pandas的相关系数与协方差实例
2019/12/27 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
销售经理工作职责范文
2013/12/03 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
考试作弊检讨
2015/01/27 职场文书
检讨书格式范文
2015/05/07 职场文书
论文致谢词范文
2015/05/14 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP