As we all know, minimaps are very important in games. They are used to display information about the surrounding environment. In digital twin visual scenes, small maps are often used in the scene to show the view of the map or the current scene. First, the minimap is protagonist centered. Second, minimaps should use ICONS instead of real models of people or objects, because minimaps are usually too small to see the real model.

There are many ways to create a minimap on the web, but here I used ThingJS to create a minimap that can be used to display a view of the map or the current digital twin visualization, easily and without the need for additional plug-ins. ThingJS uses built-in controls to integrate application development and custom controls to encapsulate functional modules.

Most minimaps are square, so this article will also create a square minimap in a digital twin visualization. The idea is simple: create two cameras in a digital twin visualization and pass camera 1’s position to camera 2. Buttons and labels are usually added around the minimap as needed.

The first step is to load the digital twin visual scene. The second step is to set the position, distance and Angle of the two cameras. The third step to add a small map control; Step 4 Add buttons as needed.

The specific code is as follows:

var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse' }); var control; app.on('load', function () { app.camera.distanceLimited = [0, 50]; / / set the camera distance range/minimum and maximum app. Camera. XAngleLimitRange = [10, 80]; // Set the camera position and target point app.camera. Position = [-21.874885906496672, 25.144446501358352, 32.15174699792633]; App. Camera. Target = [1.074795849331875, 0.9467607412215804, 2.8844752703106087]; New thing.widget. Button(' Add control ', add_control); Button(' reset ', remove_control); }); / / function add_control() {if (control) return; control = new THING.MiniMapControl({ width: 200, height: 200, position: THING.CornerType.RightBottom, opacity: 0.8, cameraViewImg: 'https://www.thingjs.com/static/images/minimap1.png', cameraCenterImg: 'https://www.thingjs.com/static/images/minimap0.png', // hasClose: When the close button is clicked, minimap enable is false // closeBtnImg: "Https://www.thingjs.com/static/images/minimap2.png"}) / / add a small map control app. AddControl (control); Function remove_control() {if (control) {app.removecontrol (control); control = null; // control.minimap.enable = ! control.minimap.enable; // Show, hide minimap}}Copy the code

— — — — — — — — –

Digital Twin Visualization: Thingjs.com/