基于HTML5的WebGL经典3D虚拟机房漫游动画
时间:2023-04-06 00:24:20
HTML5
3D中第一人称的使用应该是指射击游戏中第一人称的使用。第一人称射击游戏(FPS)基于枪支的第一人称视角,其他武器则基于视频游戏的类型;也就是说,玩家通过主角的眼睛来体验动作。自该类型诞生以来,高级3D和伪3D图形一直在挑战硬件发展,多人游戏一直是不可或缺的一部分。该类型的突破性游戏之一《毁灭战士》的截图展示了第一人称射击游戏的典型视角。现在博物馆或公司经常使用3D动画制作宣传片等,3D动画最大的优势在于内容和形式。对人的真实感受。它比平面作品更直观,比二维动画更逼真,因此能给观众以身临其境的感觉,大大增强了广告的说服力。3D技术的发展甚至挑战观众的辨别能力,使观众的判断游离于虚拟与现实之间。而且,3D特效的应用为创意提供了更广阔的思维空间,成为创意执行的可靠保障,丰富了创意的形式和风格。根据广告主题的表现诉求,营造梦幻、神奇的氛围,刺激和打动观众,从而达到与观众沟通的目的。3D动画宣传片将3D动画、特效镜头、企业宣传片、照片、未来展望等内容,通过后期合成、配音、解说,形成一部直观、生动、大众化的高档次企业广告宣传片,使社会不同阶层的人们对企业产生正面、正面、良好的印象,从而建立对企业的良好印象和信任,对企业的产品或服务产生依赖。3D的快速发展也得益于人类对“真实”的追求,所以学会用好3D是未来成功不可或缺的一环。本文例子的思路是进入一个机房进行访问。开门的动作再传神不过了。再加上适当的转弯,基本上完全模拟了人在机房参观的效果。还有一个好处就是,如果不操作就想给领导演示,这种炫酷的效果领导会很满意的!http://www.hightopo.com/demo/...界面上的“reset”和“start”按钮是直接添加到body中的按钮,为这两个按钮添加了点击事件:
整个场景由HT封装的3D组件构建,构建这么大的场景是需要一定的代码量的,为了简化,我把场景分离,使用HT封装的ht.JSONSerializer类将场景序列化为json。代码中只引入了生成的json文件。为了让大家更清楚,这里举个例子,假设已经构建了3D场景:dm=newht.DataModel();g3d=newht.graph3d.Graph3dView(dm);//.......构建场景dm.serialize();//number参数可以填写为空格缩进值。既然已经搭建好环境,转成json文件,代码就不好管了。在这种情况下,我们将反序列化DataModel数据模型。该函数的作用是将json格式转化为对象,将反序列化后的对象传入DataModel数据模型。详见HTforWeb序列化手册:varg3d=window.g3d=newht.graph3d.Graph3dView(),dataModel=g3d.dm(),view=g3d.getView(),path=null;g3d.setMovableFunc(function(data){returnfalse;});g3d.setVisibleFunc(function(数据){如果(data.getName()==="路径"){返回假;}returntrue;});g3d.setEye([523,5600,8165]);g3d.setFar(60000);dataModel.deserialize(json);我们目前需要操作场景中的“门”和我们要走的路线的“路径”,遍历DataModel数据模型,得到这两个数据:for(vari=0;i
forwardIndex){//points.length=5g3d.setCenter([point2.x,1600,point2.y]);//把终点变成起点g3d.rotate(Math.PI/2,0,{frames:30,interval:30,easing:function(t){returnt;},finishFunc:function(){forward();}});}else{varlastPoint=points[points.length-1];//json中的路径最后一点点g3d.setCenter([lastPoint.x,1400,lastPoint.y]);g3d.rotate(-Math.PI/2,0,{frames:30,interval:30,finishFunc:function(){window.isAnimationRunning=false;}});}}});不管“路径”中有多少个点,这个判断语句仍然可以起作用,只是最后一个点是动画结束后跳出finishFunc的函数,窗口.isAnimationRunning值设置为false以停止startAnim函数。如果不是最后一个点,用户“旋转”后,forward函数被回调。至此所有的代码都解释完了,用极少的代码量做出了这么大的项目!