2 Aug 2017

Forge Viewer Skybox and Camera animation

Default blog image

The question of how to create a skybox in the Forge Viewer popped up a while ago on Stackoverflow so I decided to give it a try. ..

Adding a Skybox in Three.js is rather straightforward, I created the small util class below to handle that:

    However when adding a custom mesh to the scene the viewer is not automatically updating the scene bounds, so far/near clipping planes will still be too close to the model in order to show the skybox properly. An easy way to workaround is to load a second model to the scene. I then created a "container" model which only has two tiny cubes positioned at the desired extends (-500, -500, -500) and (500, 500, 500) and load along the first model.

    Once the bigger model is loaded the navigation tool will zoom in/out too fast because it is now calibrated to the container model, this can be fixed with viewer.navigation.setBounds.

    To make the demo a bit more exciting I wanted to add some controlled camera motion around the world Y axis so it's spinning while looking at the model. In Three.js you would only transform the camera position, however in the Forge Viewer you also need to apply the same transform to the up vector.

    Finally I used CAMERA_CHANGE_EVENT to constrain the position so user cannot zoom too close or too far from the model. It's not perfect as a probably more powerful way to achieve that would be to implement a custom navigation tool but that a fair piece of additional work, so I'll leave that for later...

    Here is the complete code and a live demo for you to play with!

Forge Viewer Skybox


Related Article