# Extremely basic model viewer with javascript controls

**URL:** <https://forum.babylonjs.com/t/extremely-basic-model-viewer-with-javascript-controls/44615>\
**Category:** Questions\
**Created:** [October 1, 2023, 4:39pm UTC](https://forum.babylonjs.com/t/extremely-basic-model-viewer-with-javascript-controls/44615 "2023-10-01T16:39:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![digitalsmithy](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/digitalsmithy/32/35325_2.png) [@digitalsmithy](https://forum.babylonjs.com/u/digitalsmithy)\
**Post date:** [October 1, 2023, 4:39pm UTC](https://forum.babylonjs.com/t/extremely-basic-model-viewer-with-javascript-controls/44615/1 "2023-10-01T16:39:52Z")

</div>

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:

```auto
  <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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [October 2, 2023, 9:51am UTC](https://forum.babylonjs.com/t/extremely-basic-model-viewer-with-javascript-controls/44615/2 "2023-10-02T09:51:58Z")

</div>

Welcome aboard!

cc @RaananW regarding the Babylon viewer.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [October 2, 2023, 12:28pm UTC](https://forum.babylonjs.com/t/extremely-basic-model-viewer-with-javascript-controls/44615/3 "2023-10-02T12:28:27Z")

</div>

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)](https://github.com/carolhmj/quick-demos/blob/main/test-viewer.html). If you have any questions about it, feel free to ask it out

---

<div class="post-metadata">

**Author:** ![shaderbytes](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/shaderbytes/32/174_2.png) [@shaderbytes](https://forum.babylonjs.com/u/shaderbytes)\
**Post date:** [October 2, 2023, 1:49pm UTC](https://forum.babylonjs.com/t/extremely-basic-model-viewer-with-javascript-controls/44615/4 "2023-10-02T13:49:19Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![digitalsmithy](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/digitalsmithy/32/35325_2.png) [@digitalsmithy](https://forum.babylonjs.com/u/digitalsmithy)\
**Post date:** [October 2, 2023, 3:31pm UTC](https://forum.babylonjs.com/t/extremely-basic-model-viewer-with-javascript-controls/44615/5 "2023-10-02T15:31:58Z")

</div>

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.