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

时间：2017-12-05

这边的“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虚拟机房漫游动画，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

共2页:

2/2下一篇

上一篇：手机端用rem+scss做适配的详解 下一篇：Adobe Html5 Extension开发初体验图文教程

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

相关文章

最新文章