JSFiddle - React, Tailwind, and code Playground

debug popup position

by Lio Vousk-prod.

HTML

<script src="http://vousk-prod.net/webgl/babyl/includes/hand.minified-1.3.4.js"></script>
<script src="http://vousk-prod.net/webgl/babyl/includes/babylon.1.13-beta.js"></script>
<div id="some_space">&nbsp;</div>
<div id="parent">
    <div id="pop_elem">&nbsp;</div>
    <canvas id="canvas_3d"></canvas>
</div>
<div id="some_space2">&nbsp;</div>

CSS

body {
    background: gray;
    margin:0;
    padding:0;
}
#parent {
    position: relative;
    top: 30px;
    border: 10px dotted yellow;
}
#canvas_3d {
    position: relative;
    width : 80%;
    height: 200px;
    top: -20px;
    left: 50px;
    border: 5px dashed white;
}
#some_space {
    background: #236478;
    width : 100%;
    height: 20px;
    /*display:none;*/
}
#some_space2 {
    background: #236478;
    width : 120%;
    height: 1500px;
    /*display:none;*/
}
#pop_elem {
    position: absolute;
    z-index: 90;
    width: 6px;
    height:6px;
    border: 2px solid red;
    pointer-events: none;
}

JavaScript

var view, POP_elem, HND_obj;

function Viewer( canvasName ) {
    this.canvasDOMName = canvasName;
    this.canvas = document.getElementById(this.canvasDOMName);
    this.baseContainerDOMName = "parent";
    this.baseContainer = document.getElementById(this.baseContainerDOMName);   
    this.canvasBounds = null;
    this.baseContainerBounds = null;
    this.canvasBorders = { left: 0, top: 0 };
    this.baseContainerBorders = { left: 0, top: 0 };
    this.engine = null;
    this.scenes = [];  
    this.currentScene = null;
    this.currentSceneId = 0;
    this.transformMatrix = null;
    this.viewport = null;
}
Viewer.prototype.initViewer = function() {
    this.engine = new BABYLON.Engine(this.canvas, true);
    this.scenes[0] = createScene(this);
    this.currentScene = this.scenes[0];
    this.transformMatrix = this.scenes[0].getTransformMatrix();
    this.viewport = this.scenes[0].activeCamera.viewport;
    this.updateBounds();
};
Viewer.prototype.updateBounds = function() {
    this.canvasBounds = this.canvas.getBoundingClientRect();    
    var elem = $("#"+this.canvasDOMName);
    this.canvasBorders.left = parseInt(elem.css('border-left-width'),10);
    this.canvasBorders.top = parseInt(elem.css('border-top-width'),10);    
    this.baseContainerBounds = this.baseContainer.getBoundingClientRect();   
    elem = $("#"+this.baseContainerDOMName);
    this.baseContainerBorders.left = parseInt(elem.css('border-left-width'),10);
    this.baseContainerBorders.top = parseInt(elem.css('border-top-width'),10);
};
Viewer.prototype.getcurrentScene = function() {
    return this.scenes[this.currentSceneId];
};


window.addEventListener("pointerdown", onPointerDown, false);
window.addEventListener("resize", resized, false);
window.onload = init();

function init() {
    view = new Viewer("canvas_3d");
    view.initViewer();
    
    view.engine.runRenderLoop(function () {
        movePopup();
        view.currentScene.render();
    });
    
   ...