基于WebGL架构的3D可视化平台—实现小车行走路线演示

小车行走路线演示New VS Old

刚接触ThingJS的时候，写的一个小车开进小区的演示，今天又看了教程中有movePath这个方法就重新写了一遍，其中也遇到了一些问题，尤其突出的问题就是小车过弯的尴尬表现。

先给大家看看Old版本，Old版演示地址。

再看看New版本，AE86过弯不再笨拙顺畅无比，New版演示地址。

第二张效果图上可以看到由点连起来的路线，我的AE86也是严格按照路线行进的，相比于Old版本过弯的时候舒畅多了。Old版本是用setTimout()，rotateY()，moveTo()方法设置了几个点跑出来的。New版本放弃了这种办法，这种过弯实在让人看着不舒服，也不符合现实世界（排除醉酒驾驶司机）。下面就说一下New版本。

第一步，进入ThingJS在线开发，将场景地址替换成我们今天要用的，也可以自己去搭一个场景，campusBuilder下载地址。

第二步，在模型库里挑选一个你喜欢的车，种类丰富任你选择。

第三步，创建小车的行进路线和演示按钮。

最后一步，让小车动起来创建play()方法。

做到这里小车已经可以动起来了，但是这个视角并不好，下面介绍一下摄像机中的followObject(params)。

API地址

创建一个Car类继承THING.BaseObject，将物体类型转换成Car类型

下图是加了摄像机跟随物体的效果

短短80行代码，其中我也遇到了不少问题划重点的就是app.camera.followObject()中object的类型问题，还有就是模型库里有一些车的模型比较奇怪，比如下图。

以下是完整代码