Extremely basic model viewer with javascript controls

Questions
1

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>
    </model>
    <skybox></skybox>
    <bouncing type="1"></bouncing>
  </babylon>

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.

2

Welcome aboard!

cc @RaananW regarding the Babylon viewer.

3

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

4 Likes
4

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

BabylonViewer.viewerManager
        .getViewerPromiseById("babylon-viewer")
        .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.

4 Likes
5

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