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

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

工具地址:ThingJS - 物联网3D可视化PaaS平

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

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

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

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

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

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

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

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

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

第三步,实现巡更视角

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

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

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

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

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

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

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

然后看一下效果:

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

以第一人称视角的巡更效果成功了。

完整代码:

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

结语

通过上面的代码就可以发现,虽然很简单就能够实现巡更的效果,但是弊端太过明显而且有很大缺陷。

第一,重复的代码过多,比较浪费。一直都在使用的是摄像机飞行的方法,那到底能不能通过一种手段将方法封装起来。

第二,代码的复用性不强,也可以说是没有复用性,那么就没有办法重复利用。因为摄像机飞行的位置是需要自己手动设置的,所以,不同的场景就会有不同的位置,都是需要自己手动设置。

第三,修改很难,因为摄像机的飞行时通过上一次调用的,所以当上一次的位置发生改变时,那么紧接着每次都需要做一些变动,否则可能会发生摄像机横移的现象。

那么,该怎样实现可以避免上面的这些弊端或者有其他实现的办法呢?

首先想到的是,可以通过创建轨迹线,让摄像机沿着轨迹线移动,通过轨迹线配合摄像机,也可以达到第一人称的巡更效果,优势在于,不用反复的重复写同样的方法,封装之后,也有一定的复用性。

那么这次就先到这里了,下一次通过不同的方法来实现巡更的效果。

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

05-08 07:59