JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js"></script>
<div is="container">


<canvas id="renderCanvas"></canvas>
</div>
<div id="miniMap">

<div id="bg">
</div>


<img width="400" height="400" src="http://www.iconsdb.com/icons/download/green/square-outline-512.png">

<div id="circle">

    </div>
</div>

CSS

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

  #renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
    position: relative;
  }



#container {
  position: relative;
}
#container canvas, #miniMap {
  position: absolute;

}

#miniMap {
  top: 0;
  height: 200px;
  width: 200px;
  
  left: 0;

}



#bg {
 height:100%;
 width:100%;
  background-color: blue;
  opacity: 0.4;
   position: absolute;
   top:0;
   border-radius: 20%;
}

img {
  display: block;
  max-width:200px;
  max-height:200px;
  width: auto;
  height: auto;
  opacity: 0.8;
  border-radius: 20%;
}

#circle {
	border-radius: 50%;
	width: 20px;
	height: 20px; 
  background-color: red;
 position: absolute;
 right:90px;
 top:90px;
}

JavaScript

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var sphere;
var sphereX;
var sphereY;
var moveUnit = 1;
var mapUnit = 10;

var createScene = function () {

    var scene = new BABYLON.Scene(engine);

    scene.clearColor = new BABYLON.Color3(0, 1, 0);

    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);

    camera.setTarget(BABYLON.Vector3.Zero());

    camera.attachControl(canvas, false);

    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

    light.intensity = .5;

    sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

    sphere.position.y = 1;
		sphereX = 90;
    sphereY = 90;

    var ground = BABYLON.Mesh.CreateGround("ground1", 16, 16, 2, scene);

  
    return scene;

  };  
  
 
var changeMapPoint = function(dir, moveUnit){
if(dir === "X"){
sphereX += moveUnit * mapUnit;
document.getElementById('circle').style.left="" + sphereX + "px";
}

if(dir === "Y"){
sphereY += moveUnit * mapUnit;
document.getElementById('circle').style.top="" + sphereY + "px";
}

}
 
 
 
 var scene = createScene();


  engine.runRenderLoop(function () {
    scene.render();
  });


  window.addEventListener("resize", function () {
    engine.resize();
  });

window.addEventListener('keydown', function(event) {
    if(event.keyCode == 65) {
        sphere.position.x -= moveUnit;
        changeMapPoint("X", -moveUnit);
    }
    else if(event.keyCode == 68) {
        sphere.position.x += moveUnit;
        changeMapPoint("X", moveUnit);
    }
    else if(event.keyCode == 87) {
        sphere.position.z += moveUnit;
        changeMapPoint("Y", -moveUnit);
    }
    else if(event.keyCode == 83) {
        sphere.position.z -= moveUnit;
        changeMapPoint("Y", moveUnit);
    }
});