Samples
Tags
iTwin Platform APIs
Changed Elements
Compare ChangedElements between Version and colorizing them by operation.
Clash Review
Uses the validation REST api to get and visualize clash results.
Grouping Mapping Widget
Demonstrates iTwin Grouping & Mapping Widget with in-memory database
iModels API Sample Application
This is a simple React based application that demonstrates iModel management workflow that can be achieved using iModels API.
Issues
Uses issues REST API to retrieve issues associated with project and display them.
iTwins API Sample App
An iTwin sample application that demonstrates how to create, query and update an iTwins using the iTwin API.
Library API Sample App
An iTwin sample application that demonstrates how to create, upload and query components in a catalog.
Reporting
Request and visualize the data in an insights report of iModel
Reporting API sample Console application
This is a simple command line app that illustrates the workflow of configuring a report using the Reporting platform APIs.
Saved Views
Uses the REST api to store, share, organize, and retrieve saved views.
Storage API Sample App
An iTwin sample application that demonstrates how to create, query and update files with folders saved in the Storage.
Synchronization Sample Using Manifest Connections
Sample portal that demonstrates synchronization workflow using the Manifest connections API.
Synchronization Sample Using Storage Connections
Sample portal that demonstrates synchronization workflow using the Storage connections API.
Transformations
How use the Transformations API to transform an iModel into another, and display them.
Validation
Uses the validation REST API.
Webhooks API V1 Sample NodeJs Express App
Node.js (Express) application that shows the basic examples of consuming Webhooks V1 API and reacting to iTwin Platform events.
Webhooks API V2 Sample Azure Function
An Azure Function that shows the basic examples of consuming Webhooks V2 API and reacting to iTwin Platform events.
Webhooks API V2 Sample NodeJs Express App
Node.js (Express) application that shows the basic examples of consuming Webhooks V2 API and reacting to iTwin Platform events.
Viewer
2d Viewer
An iTwin.js application that lets you view 2D models
3d Viewer
This is the simplest iTwin.js frontend example. It displays a viewport and shows a view navigation toolbar
Global Display
This sandbox demonstrates the display of global data sources and globe-based navigation terrain buildings global location maps
Reality Data
Adding, removing, and modifying the display of reality data. Discovers available realitymodel and attaches them to the viewport.
UI-Provider-Packages
Demonstrates how to use pre-defined UI Provider Packages in your application.
View Attributes
How to get and set various ViewFlags and other view attributes including: RenderMode, Skybox, BackgroundMap, Grid, ACS, and others.
Viewer Features
Background-Colors
This sample demonstrates how to implement viewport images, single background colors with transparency, and 2 and 4 color sky gradients. background color transparency skybox image
Camera Path
Animates the camera along a path using setEyePoint. Also shows a tool to control the look direction using setupViewFromFrustum.
Camera Visualizer
Visualize the camera frustum by using multi-viewport setup. Also shows a tool to modify the view.
Car Particle Effect
Creates an traffic visualization from OpenStreetMap data and a Decorator using particles.
Classifiers
How to apply a classifier to a realitymodel. Also demonstrates how to adjust the display of classifier, in this case a spatial classifier
Cross-Probing
This sample demonstrates how to implement basic cross-probing between 2D and 3D elements given an iModel of a Plant
Display Styles
Customize the appearance of a 3d viewport using Display Styles
Emphasize Elements
How to emphasize, hide, isolate, and override the color of elements using the EmphasizeElements API.
Exploded View
Uses a TileTree to create an explode effect in the viewport.
Fire Particle Effect
Creates an fire effect using particles Decorator.
Heatmap Decorator
Uses a Decorator to show a heatmap as a WorldOverlay on top of the viewport.
Hyper-modeling
Navigate between 2d and 3d views using hyper-modeling
Image Export
Exports visible viewport of iModel as PNG image. ImageExport
Image Manipulator
Resize, rotate, and change the transparency of images in the viewer!
IoT Alerts
How to simulate out-of-bound condition from a sensor and trigger IotAlert, blinking effect
Marker Pins
Uses a Decorator and a MarkerSet to display markers that indicate important locations in a model.
Multiple Viewports
Demonstrates displaying two viewports showing the same 3d model
Place glTF
Demonstrates way to place glTF on viewport using AccuDraw and PrimitiveTool
Render Schedule Scripts
This sample demonstrates how to create an animation using Render Schedule Scripts. The script is created by reading data from a csv file containing a construction schedule.
Road Network Decoration
Viszualizes a road network by combining OpenStreetMap data with a Decorator
Scientific Visualization
Shows scientific visualization and animation
Screen-space Effects
Demonstrates how to create and apply screen-space effects to a viewport
Selection Scope - Geometric Elements
Allows you to explore how SelectionScope works. Using an element id and various scopes, calculate what Geometric Element(s) would be selected/highlighted using Presentation and HiliteSetProvider.
Serialize View
How to serialize, deserialize and load a viewstate from JSON.
Shadow Study
Shows how to adjust the solar lighting by using setSunTime
Snow and Rain Particle Effect
Creates a snow overlay using particles Decorator.
Stadium Section Viewer
Select a section and check the view of stadium from selected section.
Swiping Comparison
Compare models and reality data using a clip and a TileGraphicsProvider in a single viewport.
Thematic Display
Renders using thematic display by changing the styles.
Tooltip Customize
Shows customized element tooltips by supplying a ToolAdmin that overrides the getToolTip method.
View Clipping
How to add a ClipVolume, ClipPlane, and ViewClipDecorationProvider to a view to clip the geometry
Volume Query
Query SpatialElements using SpatialQueries. Elements are classified using getGeometryContainment. To color and represent elements EmphasizeElements and PresentationLabelsProvider are being used.
Zoom to Elements
Uses zoomToElement, ZoomToOptions, and ViewChangeOptions to center the view on element(s) of interest.
App UI
Add Toolbar Button
How to add a toolbar button
Frontstage-Blank-Connection
Demonstrates how to provide a blank iModel connection to a frontstage.
Frontstage-Content
This sample provides a series of examples on how to declare and swap between Frontstages.
Frontstage-Introduction
This sample provides a series of examples on how to declare and swap between Frontstages.
Frontstage-Statusbar
Demonstrates how to customize the Statusbar in a Frontstage.
Frontstage-Toolbar
Demonstrates how to customize the Toolbar in a Frontstage.
Frontstage-Widgets
Demonstrates how to customize Widgets in a Frontstage.
Geometry Samples
2d Transformations
Geometry sample showing how to generate, translate, and rotate different types of 2d geometry.
Advanced 3d
Geometry sample showing how to generate several 3d pieces of geometry including mitered pipes, rotational, linear, and ruled, sweeps.
Closest Point on Curve
Geometry sample showing how to find the closest point on a curve by using the closestPoint method.
Curve Fractions
Geometry sample showing how to find a point along a set fraction of a curve using the fractionToPointAndDerivative method
Introduction to PrimitiveTool
Geometry sample showing how to create a basic tool - primitiveTool.
PrimitiveTool - Standard ToolSettings
Geometry sample showing how to create standard toolSettings using PrimitiveTool?
PrimitiveTool - ToolSettings in Widget
Geometry sample showing how to create tool with toolsettings in widget and toolbar buttons
Simple 3d
Geometry sample showing how to generate simple types of 3d geometry.
Simple Animated
Geometry sample showing how to create animation using multiple 2d shapes.
Simple Line
Simple geometry sample showing how to create a line segment using LineSegment3d and create points along it using fractionToPoint.
UI Components
Badges
Component sample showing different styles of badges.
Check List Box
Component sample showing different styles of checklistboxes.
Expandable Lists
Component sample showing different styles of expandable lists.
Inputs
Component sample showing different styles of inputs.
Loading
Component sample showing different styles of loading icons.
Search Boxes
Component sample showing different styles of search boxes.
Slider
Component sample showing different styles of sliders.
Tabs
Component sample showing different styles of tabs.
Text
Component sample showing different styles of text.
Tiles
Component sample showing different styles of tiles.
Toggle
Component sample showing different styles of toggles.
UI Trees
Basic Tree
Tree sample showing how to create a simple tree using a ControlledTree component.
Custom Checkboxes Tree
Tree sample showing how to create a tree with custom checkboxes using a ImageCheckBox component.
Custom Event Handler Tree
Tree sample showing how to create a tree with custom events using a TreeEventHandler.
Custom Node Loading Tree
Tree sample showing how to create two different trees, one that loads data from memory, and the other using presentation rules.
Custom Table Node Tree
Tree sample showing how to override the default node rendering of a tree.
Custom Webfont Icons Tree
Tree sample showing how to display custom icons using iModel data.
Presentation Tree
Tree sample showing how to create a simple tree using a ControlledTree component.
Unified Selection Tree
Tree sample showing how to use events that interact with a viewport using useUnifiedSelectionTreeEventHandler.