Camera not appearing in center of object

Questions
1

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.

Screen Shot 2022-01-11 at 3.08.19 PM
Screen Shot 2022-01-11 at 3.08.19 PM1357×747 37.7 KB

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?

2

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

3

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?

4

Hi!

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.

5

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

2 Likes