---

Example 1:

Minimal Initialization and Loading (download, view)

This example will show you how to initialize the BimCT Viewer Web-Assembly engine and load a sample model using loadModelFromUrl

Example 2:

Using Renderer Initialization Options (download, view)

This example will show you how to use the Renderer Initialization Options to change the initial visualization attributes of the viewer. Additionally it will show you how to enable the out-of-the-box user interfaces included with the BimCT Viewer.

Example 3:

Registering to Events (download, view)

This example will show you how to register and listen to viewer events related to:

• Model Loading / Unloading Event (using modelLoadedEvent and modelRemovedEvent)
• Selection Changed Events (using selectionChangeEvent)
• Visibility Changed Events (using visibilityChangeEvent)
• Engine State Changed Events (using stateChangedEvent for all action state changes including Pick Mode, Navigation Mode, Markups etc)
• Measurement Update Events (using measurementsPointPushBackEvent, measurementsSelectedEvent and measurementsUpdatedEvent)
• Context Menu Events (using contextMenuEvent)

Example 4:

Adding Custom Context Menu Items (download, view)

This example will show you how to add a custom right click menu item to the viewer. You can right click to the viewer and have your own menu items. Right click and select My Custom Menu Group:

• Get Metadata of Selected Elements (shows element properties in the console using metadataAccessor's getElementData)
• Download Snapshot PNG (shows how to get a snapshot using takeSnapshot )
• Save Scene View (using getSceneView)
• Load Scene View (using setSceneView)

Example 5:

Element Visibility, Colorization and Selection (download, view)

This example will show you how to use the BimCT Viewer APIs to highlight, zoom, isolate, hide others, colorize and show all 3D Elements. Right click and select Example 5:

• Highlight all Roofs (shows how to select elements based on their class type)
• Load Highlighted State (shows how to get current state of selected elements or faces)
• Save Highlighted State (shows how to set the state of highlighted elements or faces)
• Highlight all Roofs (shows how to highlight elements based on their class type)
• Clear Selections (shows how to clear highlights all highlights)
• Isolate Selected Elements (show how to hide everything except the highlighted elements)
• Hide Selected Elements (show how to hide the highlighted elements)
• Show all Elements (show how to show all elements that were hidden)
• Colorize Selected Elements (show how to colorize the selected elements or faces to predefined color)
• De-Colorize Selected Elements (show how to decololorize selected elements or faces)
• De-Colorize all Elements (shows how to decololorize selected elements and/or faces)
• Load Colorization State (shows how to get current state of colorized elements or faces)
• Save Colorization State (shows how to set the state of colorized elements or faces)

Example 6:

Using Scene Views and Unloading/Reloading Models (download, view)

This example will show you how to get and set a full SceneView state. You can use SceneView to store the full state of the viewer at a given time. Additionally it will show you how to unload and reload a model and use the inner states of the SceneView individually such as SettingsState, VisibilityState, CameraState, ColorizationState, MeasurementState etc.

Example 7:

Using Pins (download, view)

This example will show you how to add and remove Pins (using standard colors or using a custom image URL), how to associate Pins with a context, how to save and load Pins and how to listen to pin clicked events. Right click and select Example 7:

• Insert Red Pin (will put the renderer into Pin Insertion Mode and start adding a Predefined SVG Pin, when the pin is added PinInsert event is fired)
• Insert Image Pin (will put the renderer into Pin Insertion Mode and start adding a Pin based on an Image URL, when the pin is added PinInsert event is fired)
• Clear Pins (shows how to clear all pins in the scene)
• Save Pins State (shows how to get the state of the current scene pins)
• Load Pins State (show how to load back the state loaded with Save Pins State)

Also check pinClickedEvent and pinInsertEvent callbacks that will show you to listen to click and inserting events and use data passed to pins.

Example 8:

Using Sensors (download, view)

This example will show you how to use sensors based on a fixed Temperature Range. It uses Pins to add sensors into a model that can be dragged and edited. Right click and select Example 8:

• Click on an Element to Select it
• Right click and Select more Elements using Autoselect Visible Elements > Select All Visible Elements
• Right click and create a channel for selected elements using Example 8 > Create channel for Selected Elements
• Add a Cold Sensor Pin using right click Example 8 > Insert Cold Temperature Sensor
• Add a Medium and Hot Temperatures Sensor using the same menu
• Now drag and drop the pins to different locations to see how changes are shown
• Check the other function like load save state and clear pins and sensors

Example 9:

Using Dynamic Elements (download, view)

This example will show you how to use dynamic Elements. Dynamic Elements are special elements included in .bimct models that can be transformed in 3D Space. Unlike static elements they can have a Transformation Matrix that will allow them to move, translate, scale and rotate around a pivot point. This example demonstrates the use of dynamic elements, using the dynamic elements API as well as the cloning mechanism of dynamic elements.

NOTE: To create a .bimct model that contains dynamic elements you need to specify what elements will be Dynamic at conversion time using the Converter API enqueue web service.

CCTV Cameras - Dynamic Elements Example how to use:

• Right click and choose CCTV Demo > Add a CCTV Camera (3D) to start the pin insertion command to add the 3D Object
• Move close to a wall that you want to place a CCTV Camera Object and click to place the 3D Object
• Do the same to add some more CCTV Camera Objects ( Notice that they are always positioned to the correct direction of the wall )
• Now click only on the cylindrical part of the CCTV camera object to select it
• Now right click on CCTV Demo > Rotate Y and type a value in degrees that you want to Rotate the upper part of the CCTV Camera
• To Save and Load Back the Camera and Related Models State use the CCTV Demo > Save / Load and Remove Commands