从零开始学习ThingJS之创建/销毁物体 / 开普饭

1、加载模型

2、添加多个数字孪生可视化园区

3、销毁物体

在数字孪生可视化场景初始化后，我们就可以在3D场景内添加物体对象了，可以通过 create() 方法来创建物体，例如，加载模型、添加标记、创建基本形体、添加多个园区等。通过 destroy() 方法，可以销毁物体，即在场景中删除物体。

通过 create() 方法创建物体，并通过对象名称和属性，来添加所创建的物体属性。

var obj = app.create({
 name: value,
})

通过 destroy() 来销毁物体。

obj.destroy();

1、加载模型

将模型对应的url输入到数字孪生可视化场景项目文件中，即可加载模型，模型库中右键单击模型可以直接获取模型url。下面我加载一个厂房来举例。

这里，我通过最后一行代码设置摄像机的位置，来调整预览视角。如果不添加此行代码，则默认状态下摄像头的位置跟所创建的物体一致，也就是说摄像机的镜头贴在物体上，那么，此时我们可以将鼠标滚轮回滚，进行缩放调节，就可以在预览窗口显示出所加载的模型了。

var app = new THING.App(); // 3D场景初始化

app.background = '#F0FFFF'; //设置背景颜色

//创建物体
var obj = app.create({
 type: "Thing",
 name: "厂房",
 position: [-20, 2, 0],
 url: "/api/models/d0fb1dcb52354a7d8a5e19715b2879c2/0/gltf/",
 complete: function() {
 console.log("厂房 created!"); //创建完成后日志窗口显示返回信息
 }
});

app.camera.position = [-35, 5, 10] //设置摄像机位置来调整预览视角

其中，Thing 为模型的类型，厂房为模型的名称。运行项目后，在预览窗口，可以展示出创建的物体，如下图所示。

2、添加多个数字孪生可视化园区

当然，我们也可以用create()方法添加多个数字孪生可视化园区。下面我将 ThingJS 示例园区和我自定义的中式建筑园区添加进来。

var app = new THING.App({
 skyBox: "BlueSky",
}); // 3D场景初始化，设置天空盒

// 添加ThingJS示例园区
var campus1 = app.create({
 type: "Campus",
 url: "models/storehouse",
 complete: function (ev) {
 console.log("Campus created: " + ev.object.id);
 }
});

//添加自定义中式建筑园区
var campus2 = app.create({
 type: "Campus",
 url: "/api/scene/05972f8c68a48a1a0c4a2da8",
 position: [115, 0, 0],
 complete: function (ev) {
 console.log("Campus created: " + ev.object.id);
 }
});

通过 position 属性来设置数字孪生可视化园区的位置。为了使两个园区的位置不重叠，我将中式建筑园区的位置设置为 [115, 0, 0]。

项目运行后，鼠标滚轮回滚控制场景缩放，按鼠标左键移动鼠标调整园区位置后，在预览窗口可查看加载的两个数字孪生可视化园区。

3、销毁物体

在上面的代码的基础上，将下面的代码输入项目文件中，可为数字孪生可视化场景添加销毁物体的按钮。

var button = new THING.widget.Button('销毁物体', function() {
 obj.destroy();
});

运行项目后，在预览窗口，可以显示出创建的按钮，点击按钮，即可销毁物体。

完整代码如下：

var app = new THING.App(); // 3D场景初始化

app.background = '#F0FFFF'; //设置背景颜色

//创建物体
var obj = app.create({
 type: "Thing",
 name: "厂房",
 position: [-20, 2, 0],
 url: "/api/models/d0fb1dcb52354a7d8a5e19715b2879c2/0/gltf/",
 complete: function() {
 console.log("厂房 created!"); //创建完成后日志窗口显示返回信息
 }
});

app.camera.position = [35, 5, 10] //设置摄像机位置来调整预览视角
var button = new THING.widget.Button('销毁物体', function() {
 obj.destroy();
});

另外，还可以通过地图来加载多个数字孪生可视化园区，步骤和上述步骤基本一致，感兴趣的小伙伴可以自己动手试一试~

从零开始学习ThingJS之创建/销毁物体

相关推荐