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 getVectorOnScreen = function(vector, camera) {
/*var w = canvas2D.width;
var h = canvas2D.height;
var vectorOnScreen = BABYLON.Vector3.TransformCoordinates(vector, camera.getViewMatrix());
vectorOnScreen = BABYLON.Vector3.TransformCoordinates(vectorOnScreen, camera.getProjectionMatrix());
return new BABYLON.Vector2((vectorOnScreen.x + 1) * (w / 2), (1 - vectorOnScreen.y) * (h / 2));*/
var viewport = scene.activeCamera.viewport;
var globalViewport = viewport.toGlobal(engine);
return BABYLON.Vector3.Project(vector, BABYLON.Matrix.Identity(), scene.getTransformMatrix(), globalViewport);
};
var drawBoundingBox = function(mesh, camera){
context2D.strokeStyle='#ffffff';
context2D.lineWidth = 1;
context2D.shadowColor = '#000000';
...