使用ThingJS制作一个3D可视化简易例子

zzzzzker 4月前 533

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

最新回复 (0)

你可以在 登录 or 注册 后,对此帖发表评论!

返回