既然我们已经搭建好环境，转成了 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，这样就能营造一个我们是第一人的效果：
