1. Create an App

2. Loading scenarios

3. Load the map

Building models and 3D scenes can be a headache in the digital-twin visualization industry, but there’s one platform that solves these problems: ThingJS. As a 3D visualization development platform for the Internet of Things, it is characterized by simple learning, improved efficiency, rapid construction, rich models and one-click deployment. Front-end engineers can also easily develop digital twin visualization projects. If you’re a beginner to digital twin visualization or just looking to get started, you can read this article and dig deeper into my code base.

Go to the ThingJS website, sign up for an account and click Develop Online to get started on our digital twin visualization project. The first step is to create an App, which is how I started learning ThingJS.

1. Create an App

The App object is a functional entry to the ThingJS library for 3D scene initialization.

Initialize the 3D scene by creating an App object. At this point, the App object is empty.

var app = new THING.App();
Copy the code

And set the App object properties by adding the property name and value.

var app = new THING.App({
 name: value,
});
Copy the code

Name is the name of the App object property. Value is the value of the App object attribute.

2. Loading scenarios

Digital twin visualizations can be created in CampusBuilder or CityBuilder and saved to the same ThingJS account.

To load the ThingJS sample campus, enter the following code into your project file.

var app = new THING.App({
 url: "models/storehouse/",
});
Copy the code

After running the project, in the preview window, you can display the ThingJS sample campus, as shown in the figure below.

In the preceding code, URL: “Models /storehouse” indicates the address of the park scenario data, which can be an absolute path or a relative path. Alternatively, you can create a park object via app. Create without entering a path and load the park whenever you want.

3. Load the map

Enter the following code into the project file, and then replace myMapDirectory with the map path required to load, toolbar click map to get the map path. You can view the number of layers in the log window (Ctrl+1).

var app = new THING.App(); // Initialize the 3D scene app.background = [0, 0, 0]; Background to black / / / / set the scene component reference map script THING. Utils. DynamicLoad ([' https://www.thingjs.com/uearth/uearth.min.js'], function () { app.create({ type: 'Map', url: 'myMapDirectory', complete: function (event) { console.log(event.object.userLayers.length); }}); });Copy the code

In this article, we’ve learned how to create an App, load a campus, and load a map. You can go to the ThingJS website to see how to create a digital twin visualizations.