Jump to content

Viewer skybox and camera API access


Recommended Posts


Iam playing with skybox and DDS environment in viewer, I'd would like know if its possible to hide the background environment (background color instead) without hide Global illumination on model material.

I Guess it's possible via babylonJS api ? Iam newbie on it.

In the same idea Could I access to the camera constraints : restrict zoom, angle navigation, setup left mouse for panning...

If the viewer has some restriction to code that, I think its better I go on babylonJS in full API.


ps: I read the doc about view setup with events, but I dont understand how access to Scene object.

Link to comment
Share on other sites

First to the viewer's restrictions - There are technically none. It might force you to work in a different way, but in general, it is Babylon under the hood.

About background - if no skybox object is defined, you won't have one. The scene color will be displayed instead (I assume this is what you meant by background color). The lights are configured separately, so they won't be influenced by that.

If you want to setup the scene color using the configuration, use scene.clearColor in the configuration. if you want to use HTML it will look a bit odd, but possible:

<babylon id="babylon-viewer" model.title="Amazing Rabbit" model.subtitle="BabylonJS" model.thumbnail="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png"
        <clear-color r="0.1" g="0.4" b="0.5" a="1.0"></clear-color>


If you want to configure the camera, you can also do it using the configuration object. Any camera parameter (that exists publicly on the ArcRotateCamera) can be configured. for example:

<babylon id="babylon-viewer" model.title="Amazing Rabbit" model.subtitle="BabylonJS" model.thumbnail="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png"
            model.url="https://playground.babylonjs.com/scenes/Rabbit.babylon" observers.on-scene-init="globalSceneInitCallback">
    <camera panning-inertia="0.5" lower-alpha-limit="0"></camera>


To get the scene or camera (if you want to play with them programatically) you should fetch your viewer from the viewer manager. It is described here - https://github.com/BabylonJS/Babylon.js/blob/master/Viewer/dist/eventsExample.html .

To get the scene and camera:

BabylonViewer.viewerManager.getViewerPromiseById('your-viewer-id').then(function (viewer) {
    console.log(viewer.camera, viewer.scene);

The id is the ID of the babylon container. If you don't have any, you can use the other methods (onViewerAdded etc'). Check the example on github (the link I pasted)

Hope this helps :)


BTW - keep on throwing those questions, it really helps in knowing what's missing and what's not clear.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...