Extended version of babylon viewer replication by code

Babylon Viewer scene replication by code.

I’m new to babylon, just creating my first application and I’m facing a problem that can’t resolve for days.

I’m trying to replicate by code the Extended configuration of Babylon Viewer found on github:
can’t add more than two links, sorry

I really like the lighting setup. This scene is perfectly suitable for my application.

I created a playground scene, check it out:

but it is far from how extended version of the viewer looks like.

Maybe someone could help in recreating such a scene by code?

How the viewer scene is looking - here is the image: Dropbox - Screenshot_1.jpg - Simplify your life

On the left - Extended version of babylon Viewer
On the right - my code

Please help if possible…

Hi! and welcome to the forum.

The extended configuration has a lot of definitions for lights, camera and scene. You will need to apply them all to your scene if you want your model to look exactly like in the right picture. It is not the easiest task (to recreate that in the playground), but is more than possible. Go over each of the definitions (like you did with the lights) and apply them to your scene, lights, camera, model and so on.

Hi RaananW,

This is the exact algorithm I was using:
checking property
googling for documentation
But in the end - too different results.

If a ground plane, the environment is ok - similar, then after applying imageProcessing - my scene is too bright.

Also, I can’t understand at all how to setup point lights: If I set the direction for them as in the config file - my sofa is completely black.

I even added gizmos to setup lights by hand and then copied the transformedDirection values directly into direction during light creation. But what I noticed:
dragging gizmos
getting transformedDirection values
copy-paste them into new BABYLON.SpotLight creation …
launching the scene and what i see - light directed not as I dragged gizmos.
I’m missing something here. Maybe I’m checking the wrong values here:
engine.runRenderLoop(function () {
if (sceneToRender && sceneToRender.activeCamera) {

                var light2 = sceneToRender.getLightByName("light2");
                console.log("light2"+ light2.transformedDirection);

maybe I should check not the transformedDirection, but something else.
I’m out of the clue… stuck… don’t know what to do else…

Also, lights intencity in the viewer is set to 7. In my scene, somehow, even intensity 3 is too bright. Why?

It very much depends on the entire configuration :slight_smile:

Can you make a playground with the entire settings set with aloaded model? this way it will be simpler to tell you what went wrong.

There is little to no magic in the viewer. It is taking the configuration and applying it to standard babylon elements.

I already created the scene, mentioned it in the first message.
Here it is again:


At the first glance it should be pretty straightforward - take config property and write corresponding code. But some settings I was not able to find in the documentation at all.

The biggest struggle is:

  • how the size of the model in 3dsmax corresponds to the world size inside babylon? If I am placing the model at postion Vector3(0,0,0) and light at position Vector3(1,0,0) - turns out the light is inside the model.
  • Why, if I’m setting for spotlights direction Vector3(0,0,0) - there the model should be - the model is still not filled with the light…

This line:

normalize: true,

in the extended mode configuration is the one responsible for centering and fixing the world unit of the model.

This function - Babylon.js/viewerModel.ts at master · BabylonJS/Babylon.js (github.com) is in charge of applying all of the default configuration to the model.

I am also not sure why you need to apply material to the model after you loaded it. The viewer will not work this way - the material should already be configured in the model file itself.

Thing is - I’m trying to build a furniture configurator, that’s why materials not loaded with the model on purpose, because later I will be changing materials and applying them to the same model. In this case - not really wise to load same mesh after changing material.

Thank you for the source code link - will dig into it :slight_smile:



After fighting with source code, i finally made something not quite similar to the Viewer, but ok for now.
What I don’t understand is - two problems:

  • strange artefacts after zooming or rotating in the playground. I don’t have such stuff on my local machine
  • the camera bouncing behavior. This bug I have on my local machine also. See code explanation below:

camera.useBouncingBehavior = true;
camera.lowerRadiusTransitionRange = 0.00005;
camera.upperRadiusTransitionRange = -0.2;

Changing numbers does not affect camera bouncing range at all. Same behavior is in playground (even with empty scene with ground, box, and camera) and on my local machine.

Here is the playground: https://playground.babylonjs.com/#8G76XX#5

The strange artifacts happen because your skybox is 1000 units and the maxZ is 50. make the maxZ 100 and the skybox 50 and it is all fine.

Regarding the bouncing behavior, you will need to change the properties of the behavior itself, and not the camera:

extended viewer replication | Babylon.js Playground (babylonjs.com)

1 Like

Raanan, thank you very much!

Will bother you for one more time :slightly_smiling_face:

Added following modification to camera only:

  • camera.upperBetaLimit / camera.lowerBetaLimit - intention - to limit camera movement under the sofa. No need for a viewer to see bottom of the furniture

By doing so, turns out, it ruined the starting camera position. I would like the starting screen look like this:

Not too far, not too close and under the angle, similar as the image above.
Spent quite some time already and I don’t understand what should I tweak to achieve this :frowning:


1 Like

The screenshot was not attached correctly (or - i can’t seem to be able to open this page), so I am not sure how you want it to be oriented.

Setting the camera’s target (after loading the model, for example) will recalculate your alpha/beta/radius values, so you should set them after setting the target. For example:

extended viewer replication | Babylon.js Playground (babylonjs.com)


Yess, it’s working now :slight_smile:

I was tweaking the same properties, but, of course, not after adding mesh, but at the camera creation time and was very upset why things not working.

My logic was - camera.setTarget(new BABYLON.Vector3.Zero());
mesh will be placed at the same location, everything must be working…

In the documentation, I was not able to find any mention that the camera must be configured after adding the mesh.

The rhetorical question: how to proceed further without knowing such “things” :slight_smile:

it is not after adding a mesh, it is after setting the camera’s target :slight_smile:
You can see the description in the function’s documentation - ArcRotateCamera | Babylon.js Documentation

1 Like

Now I got it :slight_smile: Thank you very much :wink:

By the way, nice setup :slight_smile:
Wouldn’t you mind if I’ll publish it at Utilities Archives - BabylonPress ?

1 Like

@labris of course, no problem from my side

1 Like

Here is is - Babylon Viewer Setup in Babylon Playground - BabylonPress

1 Like