Learn the 2D interface of 3D visualization from scratch

Time:2021-7-26

The digital twin visualization scenes built in thingjs are placed in 3D “containers”, which provide 3D and 2D interface display capabilities. The last article analyzed the 3D spatial interface. Now I continue to learn how to connect the 2D interface with the 3D interface. Thingjs has built-in div2d and div3d elements. When creating a 2D interface, you need to insert the elements into div2d.

Create uianchor

Uianchor can connect the 2D HTML interface to the 3D object and follow the 3D object. It should be noted that after deletion, the corresponding panel will also be deleted.

var uiAnchor = app.create({
 type: "UIAnchor",
 parent: app.query("car02")[0],
 element: document.getElementById("XXXX"),
 localPosition: [0, 2, 0],
 pivotPixel: [-16, 109] 
}); 
 
//Delete uianchor
// uiAnchor.destroy(); 
 
//Control display
// uiAnchor.visible = true;

You can create a 2D interface from the template string and add it to the page.
Click the object in the digital twin visualization scene, and the text in the page will display the name of the clicked digital twin visualization object. Click the button in the page to enter the level of the corresponding object. After entering the level, right-click to return to the previous level.
Learn the 2D interface of 3D visualization from scratch
The specific codes are as follows:

var app = new THING.App({
 url: 'https://www.thingjs.com/static/models/storehouse'
});
 
app.on('load', function (ev) {
 app.level.change(ev.campus);
})
 
create_html();
 
//Create page elements from Template Strings
function create_html() {
 var template =
 `<div style='position:absolute;left:20px;top:20px;padding: 8px;width:100px;text-align: center;background: rgba(0,0,0,0.5);'>
 <p id="p1" style='color:white'>Hello World!</p>
 <button style='margin:4px;padding:4px' onclick='changeLevel()'>Into Level</button>
 </div>`;
 //Insert into thingjs built-in 2D interface Div
 $('#div2d').append($(template));
}
 
app.on(THING.EventType.SingleClick, function (ev) {
 if (ev.picked && ev.object) {
 var obj = ev.object;
 var name = obj.name;
 
 changeText(name);
 }
})
 
function changeText(value) {
 document.getElementById("p1").innerHTML = value;
}
 
function changeLevel() {
 var value = document.getElementById("p1").innerHTML;
 var obj = app.query(value)[0];
 if (obj) {
 app.level.change(obj);
 }
}

Headline

Quick interface library
Even the 2D interface can still be connected to the 3D object and follow the 3D object. Thingjs provides a “quick interface library” to quickly create interfaces. Through the quick interface library, you can create a panel and connect it to the digital twin visual object in the way of uianchor. Click the button to create and delete uianchor.
Learn the 2D interface of 3D visualization from scratch
The specific codes are as follows:

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'
});
 
//Create button
function createUI() {
 New then. Widget. Button ('object interface ', test)_ create_ ui);
 New then. Widget. Button ('location interface '), test_ create_ ui_ at_ point);
 New then. Widget. Button ('delete interface '), test_ destroy_ ui);
}
createUI();
 
//Add HTML
function create_html() {
 var sign =
 `<div class="sign" id="board" style="font-size: 12px;width: 120px;text-align: center;background-color: rgba(0, 0, 0, .6);border: 3px solid #eeeeee;border-radius: 8px;color: #eee;position: absolute;top: 0;left: 0;z-index: 10;display: none;">
            <div class="s1" style="margin: 5px 0px 5px 0px;line-height: 32px;overflow: hidden;">
                <span class="span-l icon" style="float: left;width: 30px;height: 30px;background:url(https://www.thingjs.com/static/images/example/hydrant.png) no-repeat center;margin: 1px 1px 1px 5px;"></span>
                <span class="span-l font" style="float: left; margin: 0px 0px 0px 3px;"> Object</span>
                <span class="span-r point" style="float: right;width: 12px;height: 12px;background-color: #18EB20;border-radius: 50%;margin: 10px 5px 10px 0px;"></span>
            </div>
            <div class="s2" style="margin: 5px 0px 10px 0px;line-height: 18px;font-size: 10px;overflow: hidden;">
                <span class="span-l font1" style="float: left; margin: 0px 10px 0px 10px;"> Numerical value</span>
                <span class="span-l font2" style="float: left;width: 70px;background-color: #2480E3;">0.14MPa</span>
            </div>
            <div class="point-top" style="position: absolute;top: -7px;right: -7px;background-color: #3F6781;width: 10px;height: 10px;border: 3px solid #eee;border-radius: 50%;"></div>
        </div>`
    $('#div3d').append($(sign));
}
create_html();
 
//Generate a new panel
function create_element() {
 var srcElem = document.getElementById('board');
 var newElem = srcElem.cloneNode(true);
    newElem.style.display = "block";
    app.domElement.insertBefore(newElem, srcElem);
 return newElem;
}
 
//Object top interface
var ui = null;
function test_create_ui() {
    ui = app.create({
        type: 'UIAnchor',
        parent: app.query('car02')[0],
        element: create_element(),
        localPosition: [0, 2, 0],
        Pivot: [0.5, 1] // [0,0] is located in the upper left corner of the interface, [1,1] is located in the lower right corner of the interface
 });
}
 
//Location interface
var ui2 = null;
function test_create_ui_at_point() {
    ui2 = app.create({
        type: 'UIAnchor',
        element: create_element(),
        position: [0, 1, 0]
 });
}
 
//Delete interface
function test_destroy_ui() {
 if (ui) {
        ui.destroy();
        ui = null;
 }
 if (ui2) {
        ui2.destroy();
        ui2 = null;
 }
}

That. Widget is a lightweight interface library that supports dynamic data binding. You can create a panel through the panel component in the interface library, and add text, numbers, radio boxes, check boxes and other components to the panel. Thingjs supports many panel effects. I won’t list them one by one here. If you are interested, you can try it yourself~
—————————————————
Digital twin visualization:https://www.thingjs.com/