Positioning issue of HTML content (popup) on 3D model.

[Premkumar Jayaseelan]

I want to show the information of the model on popup. I've started with billboard, but as per the suggestion in the post I have created a normal html element and bind with the model. 

The html content works great, If my camera is very close to the model. When I zoom-out, the position of html content is getting change. When I rotate the scene, again the position of the popup is getting change.

Also, when I snap with 2nd model, the popup of 1st model position is changing. 

Is there any way to position the popup while rotating the scene and while snapping.?

The sandcastle code and the video describes my issue is given below.

Video

Sandcastle Code:

// HTML

<style>

    @import url(../templates/bucket.css);

    

     .canvaswrap {

            position: relative;

        }

        #popupBox {

            background-color: #333;

            border: 1px solid #fff;

            padding: 10px;

            color: #fff;

        }

    

</style>

<div id="cesiumContainer" class="fullSize"></div>

<div id="loadingOverlay"><h1>Loading...</h1></div>

<div id="toolbar"></div>

  <div class="canvaswrap">

        <div id="Container"></div>

        <div id="popup">

            <div id="popupBox" style="width: 50px; height: 20px;">

                <p>Truck</p>

            </div>

         </div>

</div>


// JavaScript Code:

var viewer = new Cesium.Viewer('cesiumContainer', {

    infoBox : false,

    selectionIndicator : false

});

function createModel(url, height, lat, long) {

 

    var position = Cesium.Cartesian3.fromDegrees(lat, long, height);

    var heading = Cesium.Math.toRadians(135);

    var pitch = 0;

    var roll = 0;

    var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);

    var entity = viewer.entities.add({

        name : url,

        position : position,

        orientation : orientation,

        model : {

            uri : url,

            minimumPixelSize : 0

        }, 

        billboard: {

            image: generateBillboard("Sample popup", 200, 300),

            show: true,

            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

            eyeOffset : new Cesium.Cartesian3(0.0,0.0,-100.0), // Negative Z will make it closer to the camera

            pixelOffset : new Cesium.Cartesian2(0.0,-32.0) // Optional offset in pixels relative to center

        }

    });

    viewer.trackedEntity = entity;

}

createModel('../../SampleData/models/CesiumGround/Cesium_Ground.glb', 0, -123.0744619, 44.0503706);

createModel('../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb', 0, -123.0745519, 44.0504506);

document.addEventListener("keyup", function (event) {

    switch (event.keyCode) {

        case 27:    /* Remoce the selected object */

            viewer.trackedEntity = undefined;

            break;

        default:

            break;

    }

});

var geoOverlay = document.getElementById('popup');

viewer.container.appendChild(geoOverlay);

geoOverlay.style.position = 'absolute';

var anchor = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0);

 

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(function (movement) {

    var tmp = new Cesium.Cartesian2();

    var result = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, anchor, tmp);

    if (Cesium.defined(result)) {

        //console.log("Result : " + result + "; temp : " + tmp);

        geoOverlay.style.display = 'block';

        geoOverlay.style.bottom = tmp.y + 'px';

        geoOverlay.style.left = tmp.x + 'px';

    } else {

        // geoOverlay.style.display = 'none';

    }

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

function generateBillboard(content, width, height) {

    var canvas = document.createElement("canvas");

    canvas.width = width;

    canvas.height = 600;

    var ctx = canvas.getContext("2d");

    var data = "data:image/svg+xml," +

        "<svg xmlns='http://www.w3.org/2000/svg' width='" + width + "' height='"+ height + "'>" +

        "<foreignObject width='100%' height='100%'>" +

        "<div xmlns='http://www.w3.org/1999/xhtml'> " +

        "<span style='font-size:18px; color:white;'>" +

        content +

        "</span>" +

        "</div>" +

        "</foreignObject>" +

        "</svg>";

    var img = new Image();

    img.src = data;

    ctx.drawImage(img, 0, 0);

    return canvas;

}

Appreciate your support.

[Hannah Pinkos]

Hello,

This looks like a bug in Cesium.  I've filed an issue here: https://github.com/AnalyticalGraphicsInc/cesium/issues/3247

Best,

Hannah

[Hannah Pinkos]

Oh, and thank you for posting good example!

On Wednesday, November 25, 2015 at 2:28:51 AM UTC-5, Premkumar Jayaseelan wrote: