# .glb Mesh Rendering Question

**URL:** <https://forum.babylonjs.com/t/glb-mesh-rendering-question/16357>\
**Category:** Questions\
**Created:** [December 5, 2020, 10:44pm UTC](https://forum.babylonjs.com/t/glb-mesh-rendering-question/16357 "2020-12-05T22:44:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Strix](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/strix/32/5500_2.png) [@Strix](https://forum.babylonjs.com/u/Strix)\
**Post date:** [December 5, 2020, 10:44pm UTC](https://forum.babylonjs.com/t/glb-mesh-rendering-question/16357/1 "2020-12-05T22:44:49Z")

</div>

Hello,

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/c/c560f53911b1fbf5b1d76dbbb6c8c8ddcc2ffde6.jpeg)

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

---

<div class="post-metadata">

**Author:** ![kvasss](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kvasss/32/3774_2.png) [@kvasss](https://forum.babylonjs.com/u/kvasss)\
**Post date:** [December 5, 2020, 11:08pm UTC](https://forum.babylonjs.com/t/glb-mesh-rendering-question/16357/2 "2020-12-05T23:08:26Z")

</div>

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](http://playground.babylonjs.com)

---

<div class="post-metadata">

**Author:** ![Strix](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/strix/32/5500_2.png) [@Strix](https://forum.babylonjs.com/u/Strix)\
**Post date:** [December 6, 2020, 11:29pm UTC](https://forum.babylonjs.com/t/glb-mesh-rendering-question/16357/3 "2020-12-06T23:29:54Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![kvasss](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kvasss/32/3774_2.png) [@kvasss](https://forum.babylonjs.com/u/kvasss)\
**Post date:** [December 7, 2020, 11:27am UTC](https://forum.babylonjs.com/t/glb-mesh-rendering-question/16357/4 "2020-12-07T11:27:40Z")

</div>

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