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

今天想要做一个类似巡更的过程,就像是在学校保安巡更,小区保安巡更一样。巡更需要用到相应的场景,比如说:园区、学校、超市以及工厂等等,然后需要规划好路线也就是巡更的路线,并且视角要跟随路线来变换,从而达到拟人的效果。
第一步,用 CompusBulider 工具创建场景
工具地址:ThingJS - 物联网3D可视化PaaS平台
在这里插入图片描述
然后,将场景导出,并存为 .tjs 格式
在这里插入图片描述
第二步,将导出的场景放在ThingJS平台上加载
ThingJS平台地址:http://www.thingjs.com/guide/?m=sample
在这里插入图片描述
点击上方的加号按钮,将场景模型文件导入后,进行加载
在这里插入图片描述
巡更要规划好路线,然后通过摄像机遵循路线形成第一人称的视角,达到拟人巡更的效果,路线可以通过摄像机飞行的方式实现,从一点到另一个点,然后设置摄像机的照射方向就好了。
第三步,实现巡更视角
通过上面的分析,巡更视角比较好实现了,创建摄像机飞行的方法,并设置位置和方向,大致如下:
在这里插入图片描述
设置好位置和照射的方向,每当飞行结束,立即执行下一次飞行,大致如下:
在这里插入图片描述
反复的调用飞行的方法,从而达到一个完整的效果,那么具体如下:
在这里插入图片描述
在这里插入图片描述
每一次设置摄像机飞行的位置后,添加执行回调方法,执行下一步要飞行的位置,后面亦是如此,实现起来比较简单。
然后看一下效果:
在这里插入图片描述
以第一人称视角的巡更效果成功了。
完整代码:
在这里插入图片描述
在这里插入图片描述
结语
通过上面的代码就可以发现,虽然很简单就能够实现巡更的效果,但是弊端太过明显而且有很大缺陷。
第一,重复的代码过多,比较浪费。一直都在使用的是摄像机飞行的方法,那到底能不能通过一种手段将方法封装起来。
第二,代码的复用性不强,也可以说是没有复用性,那么就没有办法重复利用。因为摄像机飞行的位置是需要自己手动设置的,所以,不同的场景就会有不同的位置,都是需要自己手动设置。
第三,修改很难,因为摄像机的飞行时通过上一次调用的,所以当上一次的位置发生改变时,那么紧接着每次都需要做一些变动,否则可能会发生摄像机横移的现象。
那么,该怎样实现可以避免上面的这些弊端或者有其他实现的办法呢?
首先想到的是,可以通过创建轨迹线,让摄像机沿着轨迹线移动,通过轨迹线配合摄像机,也可以达到第一人称的巡更效果,优势在于,不用反复的重复写同样的方法,封装之后,也有一定的复用性。
那么这次就先到这里了,下一次通过不同的方法来实现巡更的效果。
看完这篇文章的朋友如果对ThingJS感兴趣的话,可以点击http://www.thingjs.com/guide/?m=sample来尝试一下。

作者:沐林呀。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值