从零开始学习 3D 可视化之控制对象（1）

森友小锘

关注

发布于: 2021 年 06 月 02 日

1、控制显隐

2、控制旋转

3、控制缩放

获取数字孪生可视化场景中的对象后，就可以通过对象的属性和方法来控制对象了。在 ThingJS API 中，列举了控制对象的属性和方法，下面本篇文章我打算学习控制对象的方法。

1、控制显隐

ThingJS 中通过设置物体的 visible 属性来直接控制数字孪生可视化场景中物体的显示/隐藏。

如果数字孪生可视化场景中对象有相应的父子关系，那么，当隐藏父亲时，他的子子孙孙也会跟随隐藏。比如当隐藏建筑时，建筑的外立面、楼层、楼层里的物体等子孙会同时隐藏。

加载 ThingJS 示例园区后，我打算将数字孪生可视化园区内的小车进行显隐控制，点击按钮，可以显示或隐藏小车。

var app = new THING.App({    url: 'https://www.thingjs.com/static/models/storehouse'}); app.on('load', function () { var car1 = app.query('car01')[0];  // 创建Box 父物体为小车 var box = app.create({        type: 'Box',        center: 'Bottom', // 中心点        localPosition: [0, 0.2, 1], // 设置 Box 相对于父物体的位置        parent: car1 // 指定父物体 });  var visible = true;  new THING.widget.Button('显隐小车', function () { // 显示隐藏小车        car1.visible = !car1.visible; });});

复制代码

运行项目后，可以通过按钮控制小车的显示或者隐藏。

2、控制旋转

ThingJS 使用角度控制数字孪生可视化场景中物体旋转，下面的代码中，我可以通过 moveTo() 方法来控制数字孪生可视化场景中的物体移动。

var app = new THING.App({ url: "models/storehouse"}) app.on('load', function() { new THING.widget.Button('按钮', function() { var car = app.query('car01')[0]; car.rotateTo({ angles: [0, 360, 0], // 旋转角度 time: 5000, // 总时间 complete: function () { THING.Utils.log('rotate complete'); // 旋转结束回调 } }) });})

复制代码

运行项目后，点击按钮可以观察到叉车缓缓旋转。

3、控制缩放

缩放是比较复杂的概念，ThingJS 只提供自身坐标系下的缩放控制。将 moveTo() 方法替换为 scaleTo() 来将数字孪生可视化场景中的物体变大，基于上个旋转示例，我继续将叉车缩放，还添加了一个小彩蛋不仅可以将叉车缩放还可以变大。

new THING.widget.Button('叉车缩放', function () { car.scaleTo({ scale: [1.5, 1.5, 1.5], // 缩放倍数 time: 1000, // 动画时间 loopType: THING.LoopType.PingPong // 循环类型 设置循环后 无回调函数 }) })

复制代码

完整代码如下：

var app = new THING.App({ url: "models/storehouse"}) app.on('load', function() { var car = app.query('car01')[0]; new THING.widget.Button('旋转', function() { car.rotateTo({ angles: [0, 360, 0], // 旋转角度 time: 5000, // 总时间 complete: function () { THING.Utils.log('rotate complete'); // 旋转结束回调 } }) });  new THING.widget.Button('叉车变大', function() { car.scale = [3, 3, 3]; });  new THING.widget.Button('叉车缩放', function () { car.scaleTo({ scale: [1.5, 1.5, 1.5], // 缩放倍数 time: 1000, // 动画时间 loopType: THING.LoopType.PingPong // 循环类型 设置循环后 无回调函数 }) }) new THING.widget.Button('停止缩放', function () { car.stopScaling(); })});

复制代码

经过学习，我了解了数字孪生可视化场景中物体如何设置显示隐藏以及控制旋转、缩放，大家可以在自己的项目查询具体物体进行物体控制功能。控制对象本篇还没有讲完，学会了控制单个对象，下篇我继续深入学习如何批量控制对象。

发布于: 2021 年 06 月 02 日阅读数: 10

原文链接:【http://xie.infoq.cn/article/feb5d3588f3f04a416c1b11e9】。文章转载请联系作者。

森友小锘

关注

还未添加个人签名 2021.04.28 加入

还未添加个人简介

发布

暂无评论

创作场景

从零开始学习 3D 可视化之控制对象（1）

森友小锘

评论