如何用H5的WebGL实现3D虚拟机房的遨游动画--百分百源码网

如何用H5的WebGL实现3D虚拟机房的遨游动画-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来如何用H5的WebGL实现3D虚拟机房的遨游动画，用H5的WebGL实现3D虚拟机房的遨游动画的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来如何用H5的WebGL实现3D虚拟机房的遨游动画，用H5的WebGL实现3D虚拟机房的遨游动画的注意事项是什么，下面就是实战案例，一起来看一下。

首先人称在 3D 中的用途要参照首先人称在射击游戏中的运用，首先人称射击游戏（FPS）是以首先人称视角为核心环绕枪和其他兵器为根基的视频游戏类型;也就是说，玩家通过主角的眼睛来体验行动。自从流派开端以来，先进的3D和伪 3D图形已经对硬件开展提出了挑衅，而多人游戏已经不成或缺。

此刻博物馆或者企业也时常运用到 3D 动画做宣扬片等等，3D动画演绎最大的优势，即是在于内容与情势上给人的真实感想。它比平面作品更直不雅，比 2D 动画更真实，所以更能给鉴赏者以置身于广告环境傍边的感想,大大加强广告的说服力。3D 技术的开展甚至挑衅挨众的辨论能力，使挨众的推断游离于与虚拟和实际之间。
并且 3D特效的利用为创意供给了更加广大的思维空间,并成为创意施行的牢靠保障,并丰硕了创意的情势和格调伎俩。依据广告主题的体现诉求,可以营建出梦幻般的奇异气氛来刺激打动挨众,从而起到与挨众沟通的目的。
3D动画宣扬片将 3D动画、特效镜头、公司视频、相片、将来远景等内容通过后期合成、配音、讲解构成一部直不雅、生动、喜闻乐道的高品位的公司广告宣扬片，让社会不一样层面的人士对公司发生正面的、踊跃的、良好的印象，从而创立对公司的好感与信任，并相信该公司的产品或办事。

此刻 3D 开展地如此快速也要谢谢人类关于“实际”的寻求，所以学好用好 3D 是将来成功必不成少的一局部。

本文例子的思绪是进入一个机房参不雅，打开门的行动是再生动不外了，再加上恰当地转弯，根本上完全模拟了人在机房中参不雅的结果。还有一个益处就是，要是要演示给向导看而又不消操纵，这种炫酷的结果向导一定会很中意！

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

整个场景由 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 函数。至此，全部代码解释结束，很短的代码量，却做出了这么大的工程！

信赖看了这些案例你已经把握了办法，更多出色请关注百分百源码网其它相干文章！

相干浏览：

手机端如何用rem+scss做适配

canvas怎样实现github404动态

以上就是如何用H5的WebGL实现3D虚拟机房的遨游动画的细致内容，更多请关注百分百源码网其它相干文章！

打赏