Samples
Tags
iTwin Platform APIs
Compare changes between two iModel changesets and color-code them by operations type
How use the Transformations API to transform an iModel into another, and display them.
Viewer
This is the simplest iTwin.js frontend example. It displays a viewport and shows a view navigation toolbar
This sandbox demonstrates the display of global data sources and globe-based navigation terrain buildings global location maps
Adding, removing, and modifying the display of reality data. Discovers available realitymodel and attaches them to the viewport.
How to get and set various ViewFlags and other view attributes including: RenderMode, Skybox, BackgroundMap, Grid, ACS, and others.
Viewer Features
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
Animates the camera along a path using setEyePoint. Also shows a tool to control the look direction using setupViewFromFrustum.
Visualize the camera frustum by using multi-viewport setup. Also shows a tool to modify the view.
Creates an traffic visualization from OpenStreetMap data and a Decorator using particles.
How to apply a classifier to a realitymodel. Also demonstrates how to adjust the display of classifier, in this case a spatial classifier
This sample demonstrates how to implement basic cross-probing between 2D and 3D elements given an iModel of a Plant
How to emphasize, hide, isolate, and override the color of elements using the EmphasizeElements API.
How to simulate out-of-bound condition from a sensor and trigger IotAlert, blinking effect
Uses a Decorator and a MarkerSet to display markers that indicate important locations in a model.
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.
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.
Compare models and reality data using a clip and a TileGraphicsProvider in a single viewport.
Shows customized element tooltips by supplying a ToolAdmin that overrides the getToolTip method.
How to add a ClipVolume, ClipPlane, and ViewClipDecorationProvider to a view to clip the geometry
Query SpatialElements using SpatialQueries. Elements are classified using getGeometryContainment. To color and represent elements EmphasizeElements and PresentationLabelsProvider are being used.
Uses zoomToElement, ZoomToOptions, and ViewChangeOptions to center the view on element(s) of interest.
App UI
This sample provides a series of examples on how to declare and swap between Frontstages.
This sample provides a series of examples on how to declare and swap between Frontstages.
Geometry Samples
Geometry sample showing how to generate, translate, and rotate different types of 2d geometry.
Geometry sample showing how to generate several 3d pieces of geometry including mitered pipes, rotational, linear, and ruled, sweeps.
Geometry sample showing how to find the closest point on a curve by using the closestPoint method.
Geometry sample showing how to find a point along a set fraction of a curve using the fractionToPointAndDerivative method
Geometry sample showing how to create standard toolSettings using PrimitiveTool?
Geometry sample showing how to create tool with toolsettings in widget and toolbar buttons
Simple geometry sample showing how to create a line segment using LineSegment3d and create points along it using fractionToPoint.
UI Components
UI Trees
Tree sample showing how to create a tree with custom checkboxes using a ImageCheckBox component.
Tree sample showing how to create a tree with custom events using a TreeEventHandler.
Tree sample showing how to create two different trees, one that loads data from memory, and the other using presentation rules.
Tree sample showing how to use events that interact with a viewport using useUnifiedSelectionTreeEventHandler.