The new Babylon Viewer

Recommended Posts

Hi boys and girls,

I don't know if you noticed, but the repository has a new directory called "Viewer" : https://github.com/BabylonJS/Babylon.js/tree/master/Viewer

The viewer is a simple way of displaying a model without the need of JavaScript at all. It (obviously) uses babylon, and can be customized to your needs using HTML tags and HTML attributes.

The only two important lines in your page would be:

<babylon model="https://playground.babylonjs.com/scenes/Rabbit.babylon"></babylon>
<script src="https://viewer.babylonjs.com/viewer.min.js"></script>

Which will result in this:


 You can read about how to use it and how to customize it here - http://doc.babylonjs.com/extensions/the_babylon_viewer

It is currently in a very early stage. The (public) project can be found here - https://github.com/BabylonJS/Babylon.js/projects/6 , including future plans. 

I am in the process of simplifying the development, build, and deploy process and it will soon be available on NPM as well, if anyone wishes to embed it using webpack/imports/require/whatever

Share this post

Link to post
Share on other sites

I was wondering, watching github notifications, what are these interesting "viewer" task & issues, so here it is!

This tool will be very useful, for example for easily doing a custom "sketchfab-like" 3d viewer on artists folio websites. Thanks!

Share this post

Link to post
Share on other sites

Hello, I was using viewer recently, great babylonJS extension guys and PBR are awesome  !

I was trying to play with json config but I I got an error:

TypeError: undefined is not an object (evaluating 'cacheReference')

line 107028 in viewer.js

I followed the doc here : https://doc.babylonjs.com/extensions/configuring_the_viewer

-> 'Configuring using external JSON"

I can't understand the issue, here the html code and the viewerconfig.json file setup :


I think viewer doesn't find the file or not read the format, the viewerconfig.json file is in root with html


Edited by efxlab
I switched on non compressed viewer.js for have more accurate error

Share this post

Link to post
Share on other sites

Hi @efxlab,

I tried loading the configuration file (http://babel.dev/viewerconfig.json) and couldn't. I am being redirected to https://babel.dev/viewerconfig.json . I can ping the server, so I guess something is wrong with the link (or with what I am doing :) ) . Any chance of seeing a live version of this? I will check it locally as well, but I want to check with your configuration to see and be able to debug this. Thanks!

Share this post

Link to post
Share on other sites

Hello, Can I use a jpegs skybox with _nx, _ny, _nz, _px, _py and _pz names in skybox file in viewer ?

I tried to call in skybox folder :

"cubeTexture": {
            "url": "environment/skybox/skybox",

it say Error loading model.

How I can follow babylonia with viewer :

var skyboxTexture = new BABYLON.CubeTexture(rootUrl, scene, ["skybox_px.jpg", "skybox_py.jpg", "skybox_pz.jpg", "skybox_nx.jpg", "skybox_ny.jpg", "skybox_nz.jpg"]);


Share this post

Link to post
Share on other sites


The viewer does support the default naming (["_px.jpg", "_py.jpg", "_pz.jpg", "_nx.jpg", "_ny.jpg", "_nz.jpg"]) when cubeTexture.url is a string (the rootUrl).

If you want to provide specific files for each of the sides, cubeTexture.url can also be an array, with a list of files (in the right order). 

What error do you get? If you want to show me an example where it doesn't work (or forces you to use DDS, which it shouldn't), please do!


P.S. - in the future, please ask your question in the Q&A, so we can easily follow up on the different questions. Thanks :)


Share this post

Link to post
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.