1、 加载模型
2、 添加多个数字孪生可视化园区
3、 销毁物体
在数字孪生可视化场景初始化后，我们就可以在 3D 场景内添加物体对象了，可以通过 create() 方法来创建物体，例如，加载模型、添加标记、创建基本形体、添加多个园区等。通过 destroy() 方法，可以销毁物体，即在场景中删除物体。
通过 create() 方法创建物体，并通过对象名称和属性，来添加所创建的物体属性。
var obj = app.create({ name: value,})
复制代码
通过 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 - 面向物联网的三维可视化开发平台
评论