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

最新推荐文章于 2024-08-11 20:09:40 发布

原创

最新推荐文章于 2024-08-11 20:09:40 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#可视化 #java #python #js #vue

本文从零开始介绍如何使用ThingJS在数字孪生可视化场景中加载模型、添加多个园区以及销毁物体。通过`create()`方法创建物体，如加载模型和添加园区，而`destroy()`方法用于删除物体。文中还展示了具体的代码示例，包括加载模型、设置相机位置、添加园区以及实现销毁物体功能的按钮操作。

1、加载模型

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

3、销毁物体

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

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

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

通过 destroy() 来销毁物体。

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

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!"