How to set up camera movements

How it works

When we do visualization of an object we don't move the object in the 3D space but rather the camera. The way the camera works is explained here: Viewport and Camera

Calculating the right camera position is not an easy task, so usually the best way is doing by trying and let the computer do the work.

What you need

Create a simple web page with your configurator. You can use the method described here: Creating Web Applications with paramate

Load this page in a browser and open the developer tools (in most browsers the shortcut to this is the F12 key).

Get the camera settings

After the page is loaded, move the camera to the position you want automatically move to later. (Do configurations first if needed)

When the camera is at the desired position, use the javascript console of the developer tools to type the following command:

viewPort.getCameraParams()

It gives back a JS object with the camera parameters that you can copy and paste to your code to move the camera to this exact same position. The reference for this methos is here: getCameraParams

Set the camera settings

The result of the previous call can be used to move the camera. To do this there are 2 options.

• The setCamera function changes the camera immediately.

  viewPort.setCamera(camera); // where camera is the object that was the result of the getCameraParams method
  

• The moveCamera function moves the camera with a transition animation.

  viewPort.moveCamera(camera); // where camera is the object that was the result of the getCameraParams method