2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。随着手机成为人们生活中不可或缺的一部分,成为人们身体的延伸,人们迎来了体验为王的时代。移动端的前端技术开发前景宽阔。此外,前端技术还能应用于智能电视、智能手表、物联网可视化甚至人工智能领域。

创新

创新的Digital Twins理念打造创新的智能可视化平台,将科幻未来的管理方式带到您身边

智能

智能的算法从运维大数据中解析和建构数字化世界的智能地图,为您找到未来的运营之路

人性

人性化是可视化的本质,让技术为人服务,让数字化世界成为人可以诗意栖居的新世界

众创

产品设计和交互方式,为用户带来众创化能力,让人人都成为设计师和SRE

ThingJS是面向物联网的3D可视化开发平台,由功能强大的3D园区搭建工具、3D城市搭建工具和3D模型库组成,帮助用户快速构建3D模拟场景,开发可视化应用,为物联网应用做可视化赋能。

在线开发https://www.thingjs.com/guide/?m=sample

moveTo 可实现将物体移动到某个目标位置。

前端可视化之物联网应用开发

示例:

obj.moveTo({position:[10,0,10],orientToPath:true,orientToPathDegree:90,time:12000,complete:function(){console.log("moveto completed");}});

相关参数如下:

position :在世界坐标系下设置目标位置,关于获取坐标点可使用坐标拾取工具

offsetPosition :在自身坐标系下设置目标位置,和 position 任选其一设置

orientToPath :物体是否朝向移动的方向

orientToPathDegree :沿向路径方向偏移一定角度

time :移动总时间

speed :速度,和time任选其一设置

lerpType :插值类型,参见本页 下方 ,默认是THING.LerpType.Linear.None(线性插值),如果填 null 则不插值

loopType :循环类型,参见本页 下方 ,默认是 null,等同于 'no',或者是THING.LoopType.No

complete :完成时的回调, repeat 和 pingpong 模式下没有回调

可以使用 stopMoving 接口来终止移动。

查看示例

rotateTo

rotateTo 可将物体旋转至某角度。

前端可视化之物联网应用开发

示例:

obj.rotateTo({'angles':[0,90,0],'time':12000,'complete':function(){console.log('rotateto completed');}});

相关参数如下:

angles:设置旋转角度

其它参数详见 API

可以使用 stopRotating 接口来停止旋转。

scaleTo

scaleTo 可以将物体缩放至某比例大小。

前端可视化之物联网应用开发

示例:

obj1.scaleTo({scale:[1,Math.randomFloat(2.0,5.0),1],time:5000,});

相关参数如下:

scale :在自身坐标系下三个轴向目标缩放值

其它参数详见 API

我们使用 stopScaling 接口来终止缩放

查看示例

movePath

还有一个神奇的方法 movePath,可以设置一条路径,让物体沿路径移动。

前端可视化之物联网应用开发

示例:

// 路径坐标点数组varpath=[[0,0,0],[20,0,0],[20,0,10],[0,0,10],[0,0,0]];car.movePath({orientToPath:true,// 物体移动时沿向路径方向path:path,// 路径坐标点数组time:5*1000,// 路径总时间 毫秒lerpType:null,// 插值类型(默认为线性插值)此处设置为不插值// 仅当无循环时 有回调函数complete:function(ev){console.log(ev.object.name+"移动结束")}});

相关参数如下:

path :由世界坐标系下的坐标点组成的路径,关于获取坐标点可使用坐标拾取工具

其它参数和 moveTo 类似。 API

可以使用 stopMoving 接口来终止移动。可以使用 stopMoving 接口来终止移动。

相关文章: