1. Load the model

2. Add multiple digital twin visual parks

3. Destroy objects

After the digital twin visual scene is initialized, we can add objects to the 3D scene. We can use the Create () method to create objects, such as loading models, adding tags, creating basic shapes, adding multiple parks, and so on. With the destroy() method, you can destroy an object by removing it from the scene.

Create the object with the create() method and add the properties of the created object with the object name and properties.

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

Destroy objects by destroying ().

obj.destroy();
Copy the code

1. Load the model

Input the url corresponding to the model into the digital twin visual scene project file to load the model. Right-click the model in the model library to directly obtain the model URL. Let me load a factory as an example.

Here, I adjust the preview Angle by setting the camera position with the last line of code. If you do not add this line of code, the default position of the camera is the same as the object created, that is, the camera lens is attached to the object, then we can roll the mouse wheel back, zoom, and the loaded model is displayed in the preview window.

var app = new THING.App(); // Initialize the 3D scene app.background = '#F0FFFF'; Var obj = app.create({type: "Thing", name: "factory ", position: [-20, 2, 0], url: "/ API/models/d0fb1dcb52354a7d8a5e19715b2879c2/0 / GLTF/", complete: function () {the console. The log (" workshop created!" ); }}); App.camera. Position = [-35, 5, 10] // Set the camera position to adjust the preview AngleCopy the code

Where Thing is the type of the model and factory is the name of the model. After running the project, in the preview window, you can display the object you created, as shown below.

2. Add multiple digital twin visual parks

Of course, we can also add multiple digital twin visual parks using the create() method. I added the ThingJS sample campus and my custom Chinese architectural campus.

var app = new THING.App({ skyBox: "BlueSky", }); Var campus1 = app.create({type: "Campus", url: "models/storehouse", complete: function (ev) { console.log("Campus created: " + ev.object.id); }}); / / add custom Chinese architecture park var campus2 = app. Create ({type: "Campus", url: "/ API/scene / 05972 f8c68a48a1a0c4a2da8", the position: [115, 0, 0], complete: function (ev) { console.log("Campus created: " + ev.object.id); }});Copy the code

Use the Position property to set the location of the digital twin visual park. In order to make the location of the two parks do not overlap, I set the location of the Chinese architectural park as [115, 0, 0].

After the project is running, the mouse wheel is rolled back to control the scene zooming. Press the left mouse button to move the mouse to adjust the park position, and the two digital twin visual parks loaded can be viewed in the preview window.

3. Destroy objects

Based on the above code, enter the following code into the project file to add a destroy object button for the digital twin visual scene.

Var button = new thing.widget. button (' destroy object ', function() {obj.destroy(); });Copy the code

After running the project, in the preview window, you can see the created button. Click the button to destroy the object.

The complete code is as follows:

var app = new THING.App(); // Initialize the 3D scene app.background = '#F0FFFF'; Var obj = app.create({type: "Thing", name: "factory ", position: [-20, 2, 0], url: "/ API/models/d0fb1dcb52354a7d8a5e19715b2879c2/0 / GLTF/", complete: function () {the console. The log (" workshop created!" ); }}); App.camera. Position = [35, 5, 10] var button = new thing.widget. button (' Destroy object ', function() { obj.destroy(); });Copy the code

In addition, you can also use a map to load multiple digital twin visualization parks. The steps are similar to the above steps, so you can try it yourself