如何利用ThingJS开发物联网可视化小Demo？

如何利用ThingJS平台制作一个3D可视化应用并且发布出去？怎么去制作一个简单的可视化入门项目？如何判断自己能不能进军3D可视化行业?多说不练假把式，今天我们就来学习ThingJS平台中的官方示例，然后仿照一个官方示例来制作一个升级版的例子，如果能做出来，那么就代表着，我们有能力迈入可视化的大门，如果做不出来，建议先学会javaScript基础，毕竟这个就是ThingJS平台将物联网可视化技术降低后的最终门槛了，如果javaScript都不会，建议还是先去学习javaScript吧…

好了，话不多说，让我们进入ThingJS网站，百度直接搜索ThingJS，进入官网就行了。对于我们这种抱着学习态度的人来说，ThingJS是免费的，进入官网，点击登录，偷懒的我就直接使用第三方进行登录了，点击QQ登录，ok，让我们先看看ThingJS网站登录后，有哪些我们可以做的行为。

据我不完全统计，登录后可以做以下的事情：

1、访问资源中心的所有文件（诸如项目地图等，未登录就只能看看缩略图咯，登录了就可以点进去看看具体内容）；

2、进入在线开发开始运行示例或者新建文件等；

3、进入文档中心（发现不登陆也可以进去查阅相关资料）

4、进入平台与应用、价格页、论坛、关于我们(不登陆同样可以进去）

那我们看看普通白板人物进入资源中心页面，随便点个项目后是啥情况吧，就第一个，我来看看，以下是第一个的截图：

点进去后发现右边还有一个图表在哪实时展示对应变化，还有背景音乐啥的，看起来还是非常棒的一个项目，看了项目后，我们就来试着做一个简单的项目，看看能不能完成吧！点击在线开发，进入在线开发平台，进入后有一个helloworld项目自动展示，我们来看看这些官方的例子，ThingJS说有javaScript开发经验的，看官方示例，一周即可进行可视化项目的开发，我这个半桶水也来试试能不能仿照一个示例做一个小例子吧。

查看示例后我选择将轨迹线与跟随物体两个示例结合，形成一个升级版的“摄像头跟随物体沿轨迹线运动”示例，选择将轨迹线应用示例代码全部复制，点击“我的”旁边的加号，新建项目，将复制的代码粘进去，然后选择跟随物体示例，复制摄像机跟随物体的代码，并且粘到app.on()方法中。

/**
* 说明：轨迹线应用
*/
app = new THING.App({url: 'https://www.thingjs.com/static/models/simplebuilding'
});//轨迹线
var line;
app.on('load', function () {// 创建一个不断上升的路径
var points = [];
var radius = 20;
for (var degree = 0, y = 0; degree <= 520; degree += 10, y += 0.25) {var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
points.push([x, y, z]);
}// 创建轨迹线
line = app.create({type: 'Line',
color: 0x00FF00, // 轨迹线颜色
dotSize: 2, // 轨迹点的大小
dotColor: 0xFF0000, // 轨迹点的颜色
points: points,
})// 小车开始沿轨迹线运动
play();// 创建按钮
new THING.widget.Button('开始移动', play);
new THING.widget.Button('轨迹线', showLines);
new THING.widget.Button('轨迹点', showPoints);
});// 物体跟随轨迹线运动
function play() {var car = app.query('car01')[0];
car.movePath({'path': line.points, // 轨迹路线
'time': 12000, // 移动时间
'orientToPath': true, // 物体移动时沿向路径方向
});
}// 显示/隐藏轨迹线
var lineVisible = true;
function showLines() {lineVisible = !lineVisible;
line.showLines(lineVisible);
}// 显示/隐藏轨迹点
var pointVisible = true;
function showPoints() {pointVisible = !pointVisible;
line.showPoints(pointVisible);
}

摄像机跟随小车移动的代码：

 new THING.widget.Button('摄像机跟随物体', function () {// 每一帧设置摄像机位置 和 目标点car.on('update', function () {// 摄像机位置为 移动小车后上方// 为了便于计算 这里用了坐标转换 将相对于小车的位置 转换为 世界坐标app.camera.position = car.selfToWorld([0, 5, -10]);// 摄像机目标点为 移动小车的坐标app.camera.target = car.position}, '自定义摄影机跟随');});

粘贴完毕后，发现缺少了car.postion这个属性，于是在跟随物体的例子中，仔细看了看注释，将相关的代码放入我们的项目中去，同时也添加了ThingJS平台的对应按钮工具，当项目形成后发现不知道怎么让摄像机归位了，找了几分钟最后在ThingJS官网交流群里面问了下，原来是在快捷代码中有，点击设置位置，加上一个摄像机归位的按钮，就能让摄像机归位啦。

最终效果图如下：

附上完整代码：

/**
* 说明：轨迹线应用
*/
app = new THING.App({url: 'https://www.thingjs.com/static/models/simplebuilding'
});//轨迹线
var line;
app.on('load', function () {var car = app.query('car01')[0];// 创建一个不断上升的路径
var points = [];
var radius = 20;
for (var degree = 0, y = 0; degree <= 520; degree += 10, y += 0.25) {var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
points.push([x, y, z]);
}// 创建轨迹线
line = app.create({type: 'Line',
color: 0x00FF00, // 轨迹线颜色
dotSize: 2, // 轨迹点的大小
dotColor: 0xFF0000, // 轨迹点的颜色
points: points,
})car.position = line.points[0];
// 小车开始沿轨迹线运动
play();// 创建按钮
new THING.widget.Button('开始移动', play);
new THING.widget.Button('轨迹线', showLines);
new THING.widget.Button('轨迹点', showPoints);new THING.widget.Button('摄像机跟随物体', function () {// 每一帧设置摄像机位置 和 目标点
car.on('update', function () {// 摄像机位置为 移动小车后上方
// 为了便于计算 这里用了坐标转换 将相对于小车的位置 转换为 世界坐标
app.camera.position = car.selfToWorld([0, 5, -10]);
// 摄像机目标点为 移动小车的坐标
app.camera.target = car.position
}, '自定义摄影机跟随');
});new THING.widget.Button('摄像机停止跟随', function () {car.off('update', null, '自定义摄影机跟随');
});new THING.widget.Button('摄像机归位', function () {car.off('update', null, '自定义摄影机跟随');
// 设置摄像机位置和目标点
app.camera.position = [43.4, 16.200000000000003, 52.3];
app.camera.target = [0, 0, 0];
});
});// 物体跟随轨迹线运动
function play() {var car = app.query('car01')[0];
car.movePath({'path': line.points, // 轨迹路线
'time': 12000, // 移动时间
'orientToPath': true, // 物体移动时沿向路径方向
});
}// 显示/隐藏轨迹线
var lineVisible = true;
function showLines() {lineVisible = !lineVisible;
line.showLines(lineVisible);
}// 显示/隐藏轨迹点
var pointVisible = true;
function showPoints() {pointVisible = !pointVisible;
line.showPoints(pointVisible);
}

大家也可以试试将几个官方示例合成一个项目，我的javaScript水平不足，如果换成一个正规军说不定一周就能做出资源中心的第一个3D可视化项目啦。

如何利用ThingJS开发物联网可视化小Demo？相关推荐

解密ThingJS是如何让程序员更高效的开发物联网可视化项目
物联网可视化项目怎么制作的?除了需要建模还需要什么?一般来说物联网可视化项目中都包含哪些东西?物联网可视化项目的制作周期大概是多久?一个用来初期投标的物联网可视化方案怎么制作才算是简单?就目前而言,可 ...
利用Python3开发一款小工具（界面的设计）
前面在<利用Python3开发一款小工具(引言)>文章中,对我们的需求进行了分析.为了能够让用户运行该工具,因此我们需要一个ui界面,而python中常用的工具就是pyqt,本文将使用py ...
利用JML开发的一个小例子，附详细注释
利用JML开发的一个小例子,附详细注释.有问题的地方希望大家能帮我提出来,呵呵 /**/ /* * msntest.java * * Created on 2007年4月11日, 下午1:40 ...
python快递分拣小程序_利用Python开发的ATM小程序
最近在学习Python,便利用业余时间开发了一个模拟ATM抢银行的小程序,不废话,直接上程序 #!/usr/bin/env python #coding=utf-8 # Name: AtmCard.p ...
利用Python3开发一款小工具（环境配置）
前面一篇文章对开发的小工具的需求进行了分析,已经大致清楚了我们需要使用的工具,本文将逐个工具进行安装配置,主要包括: 1.python36安装 2.pycharm安装 3.pyqt5与pyqt5-to ...
PyQt开发样例：利用QToolBox开发的桌面工具箱Demo
老猿Python博文目录专栏:使用PyQt开发图形界面Python应用老猿Python博客地址一.引言 toolBox工具箱是一个容器部件,对应类为QToolBox,在其内有一列从上到下顺序排列 ...
利用百度LBS做一个小Demo
为什么80%的码农都做不了架构师?>>> 申请ak(即获取密钥) http://lbsyun.baidu.com/apiconsole/key?application=key ...
利用html开发英语单词小程,前端利用表单标签自己制作一个简单的表单页面-表单制作-小程序表单制作...
html中的表单标签:form标签:属性:提交到后台url地址:actionurl地址:http://localhost:8080/XXX提交方式:method常用两个:get:把提交的数据放到地址栏 ...
如何利用C#开发“通讯录”小程序
本文介绍了数理系15级魏道鑫同学汇报的成果,利用C#开发的通讯录小程序.

如何利用ThingJS开发物联网可视化小Demo？

如何利用ThingJS开发物联网可视化小Demo？相关推荐

最新文章

热门文章