BabylonJS - world to screen coordinates
Project to fork to test BabylonJS
HTML
<script src="https://rawgit.com/BabylonJS/Babylon.js/v1.11/babylon.1.11.js"></script>
<div style="position: absolute; background-color:#00ff00; x: 100px">
test test
</div>
<canvas id="renderCanvas"></canvas>
CSS
#renderCanvas {
width: 100%;
height: 100%;
min-height: 100%;
}
JavaScript
if (BABYLON.Engine.isSupported()) {
var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas, true);
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera("Camera", new BABYLON.Vector3(0, 0, -10), scene);
var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene);
var cube = BABYLON.Mesh.CreateBox("Box", 2, scene);
var alpha = 0;
cube.scaling.x = 0.5;
cube.scaling.z = 3.5;
cube.rotation.x = 1;
var increase = true;
scene.beforeRender = function() {
if(increase) {
cube.position.x += 0.1;
}
else {
cube.position.x -= 0.1;
}
if (increase && cube.position.x > 4) {
increase = false;
}
else if (!increase && cube.position.x < -4) {
increase = true;
}
};
scene.afterRender = function() {
/*console.log(BABYLON.Matrix.GetFinalMatrix(scene.activeCamera.viewport, cube.getWorldMatrix(), scene.activeCamera.getViewMatrix(), scene.activeCamera.getProjectionMatrix(), scene.activeCamera.minZ, scene.activeCamera.maxZ));*/
var worldMatrix = cube.getWorldMatrix();
var transformMatrix = scene.getTransformMatrix();
var position = cube.position;
var viewport = scene.activeCamera.viewport;
var coordinates = BABYLON.Vector3.Project(position, worldMatrix, transformMatrix, viewport);
if (!window.minX) {
window.minX = coordinates.x;
window.maxX = coordinates.x;
}
else {
window.minX = coordinates.x < window.minX ? coordinates.x : window.minX;
window.maxX = coordinates.x > window.maxX ? coordinates.x : window.maxX;
}
};
// Material
var material = new BABYLON.StandardMaterial("default", scene);
material.emissiveColor = new BABYLON.Color3(0.3, 0.3, 0.5);
cube.material =...