JSFiddle - React, Tailwind, and code Playground

actions !

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="parent">
    <canvas id="canvas_3d"></canvas>
</div>

CSS

body {
    background: gray;
    margin:0;
    padding:0;
}
#parent {
}
#canvas_3d {
    width : 99%;
    height: 500px;
}

JavaScript

var view;

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 () {
        view.currentScene.render();
    });
    
    //printstuff();
}

function createScene(viewer) {
    var scene =...