JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/BezierPlugin.min.js"></script>
<script src="https://rawgit.com/BabylonJS/Babylon.js/v1.11/babylon.1.11.js"></script>
 <body>
    <div id="rootDiv">
        <canvas id="canvas_renderer"></canvas>
        <span>
            Coordinates expected: <br/>
            X : <span id="Xb"></span> Y : <span id="Yb"></span> Z : <span id="Zb"></span>
        </span><br/><br/>
        <span>
            Coordinates after position setting: <br/>
            X : <span id="Xa"></span> Y : <span id="Ya"></span> Z : <span id="Za"></span>
        </span>
    </div>
     
 </body>

CSS

html, body, div, canvas {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
canvas {
    width: 100%;
    height: 400px;
}

JavaScript

//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////       
// Set the value to determine what camera we use

var arcRotate = true;

// true : use arcrotate camera
// false : use free camera
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////

        // Init
        var canvas = document.getElementById("canvas_renderer");
        var engine = new BABYLON.Engine(canvas, true);
        var scene = new BABYLON.Scene(engine);
        // Camera
        var camera;
        
        // Same position and same target for both cameras
        var position = new BABYLON.Vector3(-20, 10, -20);
        var target = new BABYLON.Vector3(0, 0, 0);

        document.getElementById("Xb").innerHTML = position.x;
        document.getElementById("Yb").innerHTML = position.y;
        document.getElementById("Zb").innerHTML = position.z;

        // If we chose the ArcRotateCamera
        if (arcRotate) {
            var arCam  = new BABYLON.ArcRotateCamera(
                "ArcRotateCamera", 
                0,
                0,
                0,
                BABYLON.Vector3.Zero(),
                scene
            );
            arCam.setPosition(position);
            arCam.target = target;
            camera = arCam;
        } 
        // If we chose the FreeCamera
        else {
            var frCam  = new BABYLON.FreeCamera(
                "FreeCamera", 
                BABYLON.Vector3.Zero(),
                scene
            );
            frCam.position = position;
            frCam.setTarget(target);
            camera = frCam;
        }
        camera.attachControl(canvas);

        

        // Light
        var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0,...