|
如何利用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可视化项目啦。 | 
2251
0
