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

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

主要介绍了基于HTML5的WebGL经典3D虚拟机房漫游动画,需要的朋友可以参考下

第一人称在 3D 中的用法要参考第一人称在射击游戏中的使用，第一人称射击游戏（FPS）是以第一人称视角为中心围绕枪和其他武器为基础的视频游戏类型;也就是说，玩家通过

主角的眼睛来体验动作。自从流派开始以来，先进的3D和伪 3D图形已经对硬件发展提出了挑战，而多人游戏已经不可或缺。

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

现在博物馆或者公司也经常使用到 3D 动画做宣传片等等，3D动画演绎最大的优势，便是在于内容与形式上给人的真实感受。它比平面作品更直观，比 2D 动画更真实，所以更能

给观赏者以置身于广告环境当中的感受,大大增强广告的说服力。3D 技术的发展甚至挑战受众的分辨能力，使受众的判断游离于与虚拟和现实之间。

而且 3D特效的应用为创意提供了更加广阔的思维空间,并成为创意执行的可靠保证,并丰富了创意的形式和风格手段。根据广告主题的表现诉求,可以营造出梦幻般的神奇氛围来刺激

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

界面上的“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(),

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")

}}

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

用“forward”函数向前移动：

function startAnim() {

if (window.isAnimationRunning)