Camera not appearing in center of object

I’m attempting to get the camera to appear at the center of the model I have. I tried the UniversalCamera and the others also aren’t appearing here is my code:

const createScene = () => {
  const scene = new BABYLON.Scene(engine);

  const camera = new BABYLON.UniversalCamera("camera", new BABYLON.Vector3(0, 0, 0), scene);
  camera.attachControl(canvas, true);

  const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1,0), scene);

  const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);

  return scene;

I load this in html like so:

    <babylon model="./model/test3.glb"></babylon>

The model appears but from a sky view.

I’m sure I’m doing something wrong but can’t figure out how to set it. I tried changing the coordinates on new BABYLON.Vector3(0, 0, 0) but that didn’t help. Any idea what I’m doing wrong?

Hello and welcome!!

So you are using the model viewer and running some code to initialize the scene right?

Let me ping @RaananW who is the architect of our viewer as I believe there might some race condition where the viewer is using its own camera setup overwriting your change in the process

Hi! It’s good to be here! Yes correct I’m using model viewer. I can also load it via canvas. Is there a tutorial I can follow for that?


Yes, the viewer works a bit differently. It creates its own scene, camera and lights based on a configuration object (as opposed to a playground scene where you create everything you need).

If you want to use the viewer, i would recommend reading this: Babylon.js Viewer | Babylon.js Documentation

After the viewer is created you can get access to the scene the viewer created and do whatever you want, but if you want to stay model-agnostic, you should use the configuration and let the viewer do its magic.

Probably in your case you don’t need to use Babylon Viewer.
Just use usual import and usual babylon code, as here - The Meshes Library | Babylon.js Documentation