Display the x y z dimensions of the bounding box

Questions
1

Hello!
I have calculated the bounding box for my model. How can I display dimensions on its axes? Like this:

1_ssY-tVnMUuxFFOd78m2ekw
1_ssY-tVnMUuxFFOd78m2ekw1000×735 220 KB

2

Hi there! Welcome to the Babylon community!

I would recommend using the GUI system. Here is the documentation for that: The Babylon GUI | Babylon.js Documentation

Probably create a TextBlock and set its position to where your bounding box line are.

3

I did so, perhaps). How can I snap a textbox to the bounding line?
This function calculate bounding box:
function calculateBoundingBox () {

          if (scene.meshes.length) {

            let meshes = scene.meshes;

            let min = meshes[0].getBoundingInfo().boundingBox.minimumWorld;

            let max = meshes[0].getBoundingInfo().boundingBox.maximumWorld;

            for(let i=0; i<meshes.length; i++){

              let meshMin = meshes[i].getBoundingInfo().boundingBox.minimumWorld;

              let meshMax = meshes[i].getBoundingInfo().boundingBox.maximumWorld;

              min = BABYLON.Vector3.Minimize(min, meshMin);

              max = BABYLON.Vector3.Maximize(max, meshMax);

            }

            let parent = new BABYLON.Mesh("parent", scene);

            parent.setBoundingInfo(new BABYLON.BoundingInfo(min, max));

            //parent.showBoundingBox = true;

            let halfSize = parent.getBoundingInfo().boundingBox.extendSize;

            let size = halfSize.scale(2);

            console.log(parent.getBoundingInfo());

            let bb = parent.getBoundingInfo().boundingBox;

            let width = size.x + 0.001;

            let height = size.y + 0.001;

            let depth = size.z + 0.001;

            let textW = Math.round(size.x*1000) + "ш";

            let textH = Math.round(size.y*1000) + "в";

            let textD = Math.round(size.z*1000) + "г";

            var box = BABYLON.MeshBuilder.CreateBox("box", {width, height, depth}, scene);

            box.material = new BABYLON.StandardMaterial("sm", scene);

            box.material.alpha = 0.5;

            box.position = bb.center;

            box.enableEdgesRendering(); 

            box.edgesWidth = 1.0;

            box.edgesColor = new BABYLON.Color4(0, 0, 1, 1);

            console.log(box);

            

            let textureResolution = 512;

            var font = "bold 44px monospace";

            let textureSizeX = new BABYLON.DynamicTexture(size.x, textureResolution, scene);   

            let textureContextSizeX = textureSizeX.getContext();

            textureSizeX.drawText(textW, 75, 135, font, "#000000", "transparent", true, true);

            let textureSizeY = new BABYLON.DynamicTexture(size.y, textureResolution, scene);   

            let textureContextSizeY = textureSizeY.getContext();

            textureSizeY.drawText(textH, 75, 135, font, "#000000", "transparent", true, true);

            let textureSizeZ = new BABYLON.DynamicTexture(size.z, textureResolution, scene);   

            let textureContextSizeZ = textureSizeZ.getContext();

            textureSizeZ.drawText(textD, 75, 135, font, "#000000", "transparent", true, true);

            let matX = new BABYLON.StandardMaterial("matX", scene);

            matX.diffuseTexture = textureSizeX;

            matX.diffuseTexture.hasAlpha = true;

            let matY = new BABYLON.StandardMaterial("matY", scene);

            matY.diffuseTexture = textureSizeY;

            matY.diffuseTexture.hasAlpha = true;

            let matZ = new BABYLON.StandardMaterial("matZ", scene);

            matZ.diffuseTexture = textureSizeZ;

            matZ.diffuseTexture.hasAlpha = true;

            const planeX = BABYLON.MeshBuilder.CreatePlane("planeX", {});

            planeX.material = matX;

            planeX.position.x = box.position.x;

            planeX.position.y = 0;

            planeX.position.z = box.position.z;

            planeX.rotation.y = Math.PI;

            const planeY = BABYLON.MeshBuilder.CreatePlane("planeY", {});

            planeY.material = matY;

            //planeY.position = box.position;

            planeY.rotation.z = -Math.PI/2;

            planeY.rotation.y = Math.PI;

            const planeZ = BABYLON.MeshBuilder.CreatePlane("planeZ", {});

            planeZ.material = matZ;

            //planeZ.position = 0;

            planeZ.rotation.z = Math.PI/2;

            planeZ.rotation.x = Math.PI/2;

            planeZ.rotation.y = Math.PI;

          }
4

@buddy90210 would be perfect if you can make the code run in : https://playground.babylonjs.com/ then @msDestiny14 could definitely help on this :slight_smile:

1 Like
5
1 Like
6

It is down to the sizes you have chosen for your planes (and positions) they were not big enough https://playground.babylonjs.com/#WGZLGJ#2179

This might be of interest Dynamic Textures | Babylon.js Documentation

2 Likes
7

Thank’s.