.glb Mesh Rendering Question

Questions
1

Hello,

I’m loading a .glb file but my mesh is off centered from my bounding box:

image
image650×523 24.7 KB

This mesh has about 25k vertices. What is the best way to center this mesh in the bounding box? It seems like I cannot move the mesh within the box-I can only move the box itself.

I need to have the mesh move in the center of the camera rather than the center of the bounding box move in the center. Here’s the code i’m using:

var canvas = document.getElementById("renderCanvas"); // Get the canvas element

var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

var loadPromise = async(root, file, scene)=>{
return new Promise((res,rej)=>{
BABYLON.SceneLoader.LoadAssetContainer(root, file, scene, function (container) {
res(container);
});
});
};

var main = async(scene)=>{
// Different objects to cycle through
var modelURL = path;
var scenes = ;
var phases = implodedPhases.split(’,’);

phases.forEach(i => 
    scenes.push({
        root: modelURL,
        file: id + "_SQZData_" + i + ".glb"
    })
);

// Load all scenes one by one and display the first one
var assetContainers = [];
var currentSceneIndex = Math.ceil(scenes.length/2);
for (var i = 0; i < scenes.length; i++) {
    var assets = await loadPromise(scenes[i].root, scenes[i].file, scene)
    // Add a light if none exists
    if (assets.lights.length == 0) {
        var light = new BABYLON.HemisphericLight("", new BABYLON.Vector3(0, 1, 0), scene)
        scene.removeLight(light)
        assets.lights.push(light)
    }

    assetContainers.push(assets);

}
scene.clearColor = new BABYLON.Color3(.99, .99, .99);
assetContainers[currentSceneIndex].addAllToScene()
console.log(assetContainers[currentSceneIndex].meshes.length);

assetContainers[currentSceneIndex].meshes.forEach(function (mesh) {
    //mesh.translate(new BABYLON.Vector3(20, 30, 40), 1, BABYLON.Space.WORLD);
    var vertexPositions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
    if (vertexPositions != null) {
        console.log(vertexPositions);
        //var i;
        //var positions = [];
        //for (i = 0; i < vertexPositions.length; i++) {
        //    positions.push(vertexPositions - 63.75);
        //}
        //mesh.updateVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
    }
    console.log(mesh.getBoundingInfo().diagonalLength);

});

// wrap in bounding box mesh to avoid picking perf hit
var gltfMesh = assetContainers[currentSceneIndex].meshes[1]
var boundingBox = BABYLON.BoundingBoxGizmo.MakeNotPickableAndWrapInBoundingBox(gltfMesh)
console.log(assetContainers[currentSceneIndex].meshes[1].getBoundingInfo().boundingBox.minimum);
console.log(assetContainers[currentSceneIndex].meshes[1].getBoundingInfo().boundingBox.maximum);
// Create bounding box gizmo
var utilLayer = new BABYLON.UtilityLayerRenderer(scene)
utilLayer.utilityLayerScene.autoClearDepthAndStencil = false;
var gizmo = new BABYLON.BoundingBoxGizmo(BABYLON.Color3.FromHexString("#0984e3"), utilLayer)
gizmo.attachedMesh = boundingBox;

// world axis visualization for debug
var size = 10;
var worldOrigin = BABYLON.Vector3.Zero();
var xAxis = BABYLON.Mesh.CreateLines("x", [worldOrigin, (BABYLON.Axis.X).scale(size)], scene);
var yAxis = BABYLON.Mesh.CreateLines("y", [worldOrigin, (BABYLON.Axis.Y).scale(size)], scene);
var zAxis = BABYLON.Mesh.CreateLines("z", [worldOrigin, (BABYLON.Axis.Z).scale(size)], scene);
xAxis.color = BABYLON.Color3.Red();
yAxis.color = BABYLON.Color3.Green();
zAxis.color = BABYLON.Color3.Blue();

scene.createDefaultCamera(true, true, true)
scene.createDefaultEnvironment();


// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () { 
     scene.render();
});

// Watch for browser/canvas resize events
window.addEventListener("resize", function () { 
    engine.resize();
});

var slider = document.getElementById("myRange");

// Update the current slider value (each Y you drag the slider handle)
slider.oninput = function () {
    var phaseValue = Math.floor(slider.value);
    if (phaseValue === 0) phaseValue = 1;
    var output = document.getElementById("demo");
    output.innerHTML = phases[phaseValue-1];
    
    if (currentSceneIndex !== phaseValue-1) {
        assetContainers[currentSceneIndex].removeAllFromScene();
        currentSceneIndex = phaseValue-1;

        assetContainers[currentSceneIndex].addAllToScene();
    }
};

};

var createScene = function () {
var scene = new BABYLON.Scene(engine);
main(scene);
return scene;
};

createScene();

Thanks,
~Shane

2

Hi. Set your mesh transform point in center of mesh and check in your DCC if you have some unused points in your mesh because i see you bbox very large compared with mesh. And better way ask your question is playground on playground.babylonjs.com

1 Like
3

What do you mean by check my DDC. The bounding box is very large. I’ll try to set up a playground for the import.
Thanks!

4

Hi. Dcc is your program for modeling like blender, 3ds max, maya etc.