15 Aug 2023

Introducing Interactive Viewer Examples using Codepen




The viewer documentation has been enhanced with the introduction of a fresh collection of interactive examples. These examples are designed to provide you with hands-on demonstrations of various features and functionalities. This addition aims to offer a more engaging and immersive learning experience, allowing users to explore and grasp the usage of viewer in a practical manner. 

The six examples are :

1. Controlling Viewer State

This particular example showcases the implementation of a button called "Toggle Explode." The purpose of this button is to alternate between two states: a 50% exploded view and a non-exploded view. The demonstration highlights the fucntion of a click event listener with the "explodeButton." This event listener checks the current explode scale and then triggers the viewer.explode() function with the appropriate explode scale.

2. Handling Viewer Events

In this example, the focus is on illustrating the inclusion of an event listener which is "SELECTION_CHANGED_EVENT." Whenever a change in selection takes place, the designated inline function is invoked. This function, working asynchronously, retrieves the ID of the selected object and subsequently presents it within an alert dialog.

3. Querying Model Properties

The third example elucidates the process of querying a model through the use of a specific property name. 

4. Customizing Viewer UI

This example revolves around the customization of the Viewer's user interface (UI). A custom button is introduced into the Viewer's toolbar. The event handler tied to the button's "onClick" event is responsible for adjusting the light preset of the Viewer.

5. Customizing Viewer Scene

The example is centered around the concept of customizing the Viewer's scene.

6. Aggregated View

This example illustrates how to provide an aggregated view of two models.

Find the examples here - https://aps.autodesk.com/en/docs/viewer/v7/developers_guide/interactive_examples/

Related Article