JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgithub.com/BabylonJS/Babylon.js/master/babylon.1.7.2.js"></script>
<button id="bug">Show me bug</button>
<div id="rootDiv">
<canvas id="renderCanvas"></canvas>
<canvas id="canvas_2D"></canvas>
</div>
CSS
html, body, div, canvas {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#canvas_2D {
position: absolute;
top: 0;
pointer-events: none;
}
JavaScript
var meshWithBoundingBox = new Array();
// Get the Canvas element from our HTML below
var canvas = document.getElementById("renderCanvas");
// Load BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
// Creating a camera looking to the zero point (0,0,0), a light, and a sphere of size 1
var camera = new BABYLON.ArcRotateCamera("Camera", 1, 0.8, 10, new BABYLON.Vector3(0, 0, 0), scene);
var light0 = new BABYLON.PointLight("Omni", new BABYLON.Vector3(0, 0, 10), scene);
var origin = BABYLON.Mesh.CreateCylinder("origin", 1, 10, 10, 100, scene);
// Attach the camera to the scene
scene.activeCamera.attachControl(canvas);
meshWithBoundingBox.push(origin);
// Once the scene is loaded, just register a render loop to render it
engine.runRenderLoop(function () {
scene.render();
clearCanvas2D();
for(var i in meshWithBoundingBox){
drawBoundingBox(meshWithBoundingBox[i], camera);
}
});
var canvas2D = document.getElementById("canvas_2D");
var context2D = canvas2D.getContext("2d");
var clearCanvas2D = function(){
canvas2D.width = window.innerWidth;
canvas2D.height = window.innerHeight;
};
var drawBoundingBox = function(mesh, camera){
context2D.strokeStyle='#ffffff';
context2D.lineWidth = 1;
context2D.shadowColor = '#000000';
context2D.lineCap = "square";
context2D.shadowBlur = 10;
context2D.shadowOffsetX = 0;
context2D.shadowOffsetY = 0;
var positions = new Array();
for(var i in mesh.getBoundingInfo().boundingBox.vectorsWorld){
var screenCoordinates = BABYLON.Vector3.TransformCoordinates(mesh.getBoundingInfo().boundingBox.vectorsWorld[i], camera.getViewMatrix());
screenCoordinates = BABYLON.Vector3.TransformCoordinates(screenCoordinates, camera.getProjectionMatrix());
var objectScreenPosition = new BABYLON.Vector2(screenCoordinates.x * (canvas2D.width / 2) + canvas2D.width / 2, canvas2D.height -...