Extremely basic model viewer with javascript controls

I am absolutely clueless, having used BJS for less than a day. I’m the most tech of a team and thus tasked with this - but with very little idea, so apologies.
I got this working with three.js but it’s rendering is awful. BJS is great, but after 8 hours of reading docs and trying to find help via docs/ai etc. I am nowhere with what I thought would be a trivial task.
I want a model viewer, it’s for a public kiosk, we can’t enable screen swipe/gesture/touch for long but good reasons. So we build simple on-screen controls. I need to load a gltf model, and have pan/zoom/rotate. With three.js I added html buttons to screen, and used JS to do the rotate etc.
With BJS I can’t make anything work. Every attempt to use JS to load the model fails - even if I copy from examples. So I’m stuck with this:

  <babylon extends="minimal" scene.debug="true" id="babylon-viewer">
    <canvas id="babyCanvas" width="1920" height="900"></canvas>
    <model url="./myModel.gltf">
      <scaling x="10" y="10" z="10"></scaling>
    <bouncing type="1"></bouncing>

But now i cannot work out how to rotate/pan (always around center) or zoom via JS. Does anyone have a better tutorial page, the right docs page (please not a dense bunch of code with ‘it’s easy’ declared all over it, I am at best a nursery level coder) - or any guidance at all as to how I can do something along the lines of:

let babyWrap = BabylonViewer.viewerManager.getViewerById('babylon-viewer');
babyWrap.rotation.x += 0.1;

To rotate the model. I’ve tried about 50 versions of the let babyWrap =, but none of it exposes the model for manipulation.
Sorry for the incredibly basic question and thanks in advance to anyone with the patience to lend an idea.

Welcome aboard!

cc @RaananW regarding the Babylon viewer.

Hello! Since Raanan is out until Wednesday, I tried my hand out at setting up an example of the viewer with camera control via DOM: quick-demos/test-viewer.html at main · carolhmj/quick-demos (github.com). If you have any questions about it, feel free to ask it out


The take away for you from @carolhmj code , is this :

        .then((viewer) => {
          // Once the viewer is loaded, we wait for the scene to be loaded. For that we use Babylon.js Observables.
          viewer.onSceneInitObservable.add((scene) => {

            //your code here , the reference to the scene is passed in 


You dont have to care what all the outside functions are doing , just use them , they work and I have personally used them like this as well when wanting to code into the BabylonViewer.


Thank you @carolhmj - this is incredibly helpful. I now have rotate u/d/l/r working.
I will try and find the right docs, but if you are able… what would replace this
scene.activeCamera.alpha += 0.1;
In order to move the model u/d/l/r (pan?) in the viewport.
And one to zoom in/out.
Just a link to the right doc page - I find so many things I can only half grasp (e.g. auto-rotate type=“0” - what types are there? how do I know what 0,1,2 are!? Ah the joy of it all…)
Huge thanks again, and to @shaderbytes - for offering clarification.

1 Like