Camera Action

The Camera Action component creates an Action that controls the camera of the App's viewer: it can switch to a predefined camera, move the camera to a custom position and target, animate the camera along a path of several cameras, or zoom to specific objects of the scene. The Action can be triggered in the App by a button using an Action Control component, or along with specific events in the App (upcoming feature).

The Camera Action works together with three helper components:

• Camera defines a camera: a predefined camera name, or a camera type with a position and a target.

• Camera Motion defines how the camera travels to its new state: duration, easing and interpolation.

• Camera Settings define how users can navigate once a camera is active: field of view, pan / rotation / zoom, restrictions, etc.

Action types

The Camera Action decides on the type of action from the data it receives. There is no type to select manually:

Example

The definition of the 11K tutorial creates a simple box from three sliders ("Width", "Depth" and "Height") and displays it with a glTF 2.0 Display component named "Box". The App contains:

• a left Container with a Controls Widget showing the three sliders;

• a right Container with a Controls Widget containing four buttons, each created with an Action Control driven by a Camera Action:

1. Top view (assign): a Camera component receives the name "Top" and Camera Settings disabling rotation, so the top view stays a plan view.

2. Custom view (set): a Camera component receives the type "Perspective", a position and a target (the centre of the box). A Camera Motion of 2 seconds with "Cubic.InOut" easing makes the camera travel smoothly to its new position. The type makes sure that the viewer switches back to the perspective camera after the top view.

3. Orbit (animate): 13 points on a circle around the box are used as camera positions, all looking at the centre of the box. The Camera Action receives the list of cameras and a Camera Motion of 8 seconds with "Linear.None" easing (constant speed) and "CatmullRom" interpolation.

4. Zoom to box (zoomTo): the Node Names input receives "Box", the name of the glTF 2.0 Display component. The active camera zooms to fit the box using the 2-second Camera Motion.

Camera Action

The output of the Camera Action is connected to the Action input of an Action Control component.

Camera

When several positions are provided, the Camera component creates one camera per position, which can be used as a camera path for an animate action.

Camera Motion

The same Camera Motion can be reused by several Camera Actions.

Camera Settings

Node names

The node names used by the zoomTo action refer to the objects displayed by glTF 2.0 Display components:

• The nickname of the glTF 2.0 Display component is the name of its node, e.g. Box.

• Objects inside this output can be addressed with <nickname>.<name> when they carry a "name" attribute (assigned with the ShapeDiver Construct Attributes and Inject Attributes components), e.g. Objects.sphere.

Tips and limitations

• Types and Camera Settings of an animation are taken from the first camera of the list only. If you need a type (e.g. to make sure the perspective camera is used), only give it to the first camera: split the first position off the list, create a camera with a type for it and merge it back in front of the other cameras.

• Use a Type in set and animate actions when the App also contains assign actions to other cameras (e.g. a top view), so that the viewer switches back to the right camera.

• Data trees: when merging the controls of several Camera Actions into one Controls Widget, flatten the Merge inputs, as an animate action built from a list may sit on a deeper data path.