ThingJS平台制作第一人称视角下的巡更效果

今天想要做一个类似巡更的过程，就像是在学校保安巡更，小区保安巡更一样。巡更需要用到相应的场景，比如说：园区、学校、超市以及工厂等等，然后需要规划好路线也就是巡更的路线，并且视角要跟随路线来变换，从而达到拟人的效果。

第一步，用 CompusBulider 工具创建场景

工具地址：http://www.thingjs.com/guide/?m=campus

然后，将场景导出，并存为 .tjs 格式

第二步，将导出的场景放在ThingJS平台上加载

ThingJS平台地址：http://www.thingjs.com/guide/?m=sample

点击上方的加号按钮，将场景模型文件导入后，进行加载

巡更要规划好路线，然后通过摄像机遵循路线形成第一人称的视角，达到拟人巡更的效果，路线可以通过摄像机飞行的方式实现，从一点到另一个点，然后设置摄像机的照射方向就好了。

第三步，实现巡更视角

通过上面的分析，巡更视角比较好实现了，创建摄像机飞行的方法，并设置位置和方向，大致如下：

app.camera.flyTo({
        time: 2000,
        position: [-4.7, 1.9, 4.4],
        target: [-5.9, 2.1, -4.4],
        complete: function() {
       			...
        }
});

设置好位置和照射的方向，每当飞行结束，立即执行下一次飞行，大致如下：

app.camera.flyTo({
        time: 2000,
        position: [-4.7, 1.9, 4.4],
        target: [-5.9, 2.1, -4.4],
        complete: function() {
            app.camera.flyTo({
                speed: 5,
                position: [-4.7, 1.9, 4.4],
                target: [-18, 2.1, -4.4],
                complete: function() {
          				...
                }
            });
        }
});

反复的调用飞行的方法，从而达到一个完整的效果，那么具体如下：

app.on('load', function(){
    // 加载场景时，进入到场景中
    app.camera.flyTo({
        time: 2000,
        position: [-4.7, 1.9, 4.4],
        target: [-5.9, 2.1, -4.4],
        complete: function() {
            app.camera.flyTo({
                speed: 5,
                position: [-4.7, 1.9, 4.4],
                target: [-18, 2.1, -4.4],
                complete: function() {
                    app.camera.flyTo({
                        speed: 3,
                        position: [-16.4, 1.8, 1.2],
                        target: [-16.8, 1.9, -2.0],
                        complete: function(){
                            app.camera.flyTo({
                                time: 2500,
                                position: [-18.7, 2.0, -14.7],
                                target: [-13.2, 1.6, -23.6],
                                complete: function() {
                                    app.camera.flyTo({
                                        speed: 6,
                                        position: [-9.1, 1.7, -17.1],
                                        target: [-7.3, 0.6, -11.4],
                                        complete: function() {
                                            app.camera.flyTo({
                                                time: 3000,
                                                position: [-8.5, 1.16, -3.19],
                                                target: [-8.3, 0.85, 4.88],
                                                complete: function() {
                                                }
                                            });
                                        }
                                    });
                                }
                            });
                        }
                    });       
                }
            });
        }
    });
});

每一次设置摄像机飞行的位置后，添加执行回调方法，执行下一步要飞行的位置，后面亦是如此，实现起来比较简单。
然后看一下效果：

以第一人称视角的巡更效果成功了。
完整代码：

//加载场景代码
var app = new THING.App({ 
    // 场景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/巡更场景",
    //背景设置
    
});
app.on('load', function(){
    // 加载场景时，进入到场景中
    app.camera.flyTo({
        time: 2000,
        position: [-4.7, 1.9, 4.4],
        target: [-5.9, 2.1, -4.4],
        complete: function() {
            app.camera.flyTo({
                speed: 5,
                position: [-4.7, 1.9, 4.4],
                target: [-18, 2.1, -4.4],
                complete: function() {
                    app.camera.flyTo({
                        speed: 3,
                        position: [-16.4, 1.8, 1.2],
                        target: [-16.8, 1.9, -2.0],
                        complete: function(){
                            app.camera.flyTo({
                                time: 2500,
                                position: [-18.7, 2.0, -14.7],
                                target: [-13.2, 1.6, -23.6],
                                complete: function() {
                                    app.camera.flyTo({
                                        speed: 6,
                                        position: [-9.1, 1.7, -17.1],
                                        target: [-7.3, 0.6, -11.4],
                                        complete: function() {
                                            app.camera.flyTo({
                                                time: 3000,
                                                position: [-8.5, 1.16, -3.19],
                                                target: [-8.3, 0.85, 4.88],
                                                complete: function() {
                                                }
                                            });
                                        }
                                    });
                                }
                            });
                        }
                    });       
                }
            });
        }
    });
});

结语

通过上面的代码就可以发现，虽然很简单就能够实现巡更的效果，但是弊端太过明显而且有很大缺陷。
第一，重复的代码过多，比较浪费。一直都在使用的是摄像机飞行的方法，那到底能不能通过一种手段将方法封装起来。
第二，代码的复用性不强，也可以说是没有复用性，那么就没有办法重复利用。因为摄像机飞行的位置是需要自己手动设置的，所以，不同的场景就会有不同的位置，都是需要自己手动设置。
第三，修改很难，因为摄像机的飞行时通过上一次调用的，所以当上一次的位置发生改变时，那么紧接着每次都需要做一些变动，否则可能会发生摄像机横移的现象。

那么，该怎样实现可以避免上面的这些弊端或者有其他实现的办法呢？
首先想到的是，可以通过创建轨迹线，让摄像机沿着轨迹线移动，通过轨迹线配合摄像机，也可以达到第一人称的巡更效果，优势在于，不用反复的重复写同样的方法，封装之后，也有一定的复用性。
那么这次就先到这里了，下一次通过不同的方法来实现巡更的效果。

---

看完这篇文章的朋友如果对 ThingJS 感兴趣的话，可以点击 http://www.thingjs.com/guide/?m=sample 来尝试一下。