What is the best way to position html in the viewer?

Question

So, I am trying to position HTML in the viewer to almost make it look like it is part of the scene. So, when you move the camera, I want the position of it, in terms of the viewer, to stay where it is. Now, I have tried to shift the HTML to emulate this when the camera moves; however, I am not sure if my equation is not right or if I am not there. It seems to shift slightly, but not nearly as much as it should when the camera moves. In other words, if I were to put html on top of a cube in the viewer, and move the camera, I want to html to follow the cube. This is what I have tried:

    this.viewer.addEventListener(av.CAMERA_CHANGE_EVENT, function(e){
    console.log($(`.draggable`).attr(`originalPos`));
    console.log(e.camera);
    var width = window.innerWidth, height = window.innerHeight;
    var widthHalf = width / 2, heightHalf = height / 2;
    let originalPos = $(`.draggable`).attr(`originalPos`).split(` `);
    let originalX = originalPos[0];
    let originalY = originalPos[1];
    $(`.draggable`).css(`position`, `absolute`);
    let pixelX = (e.camera.position.x * .0005 + .5) * e.target.container.clientWidth;
    let pixelY = (e.camera.position.y * -.009 + .5) * e.target.container.clientHeight;
    $(`.draggable`).css(`left`, e.camera.position.x + pixelX);
    $(`.draggable`).css(`top`,  e.camera.position.y + pixelY);
});
$(`#viewer .adsk-viewing-viewer`).append(`<h1 originalPos = "50px 100px" class = "draggable" style="position: absolute; top: 50px; left: 100px;">Test</h1>`);

But this just not seem to have the correct scaling. It doesn't stay in the position I want it to. I have seen this similar concept in your MarkupsCore tool you have made, and also the area measurement tool seems to have some html that positions based on the camera. How do you do this?

Answer 1

Take a look at this blog article:

https://forge.autodesk.com/blog/3d-markup-icons-and-info-card

It has source code and an example repo, that shows, how to position an HTML DIV element to appear stuck to the 3D object in the Forge Viewer.