Explore in the sandbox Open in CodePen View live

This sample shows how to use the external renderer interface of a SceneView. An external renderer offers a low-level interface to access the SceneView's WebGL context, and thus enables creating custom visualizations that interact with the scene the same way as built-in layers.

In this sample, wind measurements are queried from a service and used to place animated windmills and determine their orientation and the blade rotation speed. This data was created by modelling a windmill in Blender and then manually extracting the raw geometry data. In a production application the geometry would be loaded from another data source (e.g. glTF); loading geometry files is out of scope of this sample.

Title	Sample
Satellites in 3D view	Explore in the sandboxSandbox CodePen View live
Update the camera in a 3D view	Explore in the sandboxSandbox CodePen View live
Intro to SceneView - Create a 3D map	Explore in the sandboxSandbox CodePen View live
IntegratedMeshLayer	Explore in the sandboxSandbox CodePen View live
WebTileLayer	Explore in the sandboxSandbox CodePen View live
Detect WebGL support	Explore in the sandboxSandbox CodePen View live
SceneView - hitTest	Explore in the sandboxSandbox CodePen View live
Working with 3D mesh primitives	Explore in the sandboxSandbox CodePen View live
Switch view from 2D to 3D	Explore in the sandboxSandbox CodePen View live
Chaining Promises	Explore in the sandboxSandbox CodePen View live
OpenStreetMapLayer	Explore in the sandboxSandbox CodePen View live
Toggle ground elevation	Explore in the sandboxSandbox CodePen View live
Load a basic web scene	Explore in the sandboxSandbox CodePen View live
Web scene - slides	Explore in the sandboxSandbox CodePen View live
Home button	Explore in the sandboxSandbox CodePen View live
Search Widget	Explore in the sandboxSandbox CodePen View live
Measurement in 3D	Explore in the sandboxSandbox CodePen View live
Import glTF 3D Models	Explore in the sandboxSandbox CodePen View live
Query Elevation (points)	Explore in the sandboxSandbox CodePen View live
Low poly terrain using mesh geometry	Explore in the sandboxSandbox CodePen View live
Add Graphics to a SceneView	Explore in the sandboxSandbox CodePen View live
Highlight point features	Explore in the sandboxSandbox CodePen View live
Intro to MapImageLayer	Explore in the sandboxSandbox CodePen View live
Intro to PointCloudLayer	Explore in the sandboxSandbox CodePen View live
Intro to SceneLayer	Explore in the sandboxSandbox CodePen View live
WMSLayer	Explore in the sandboxSandbox CodePen View live
Overview map	Explore in the sandboxSandbox CodePen View live
ElevationLayer	Explore in the sandboxSandbox CodePen View live
Custom background for SceneView	Explore in the sandboxSandbox CodePen View live
Take a screenshot of a SceneView	Explore in the sandboxSandbox CodePen View live
Using the view's UI	Explore in the sandboxSandbox CodePen View live
Synchronize MapView and SceneView	Explore in the sandboxSandbox CodePen View live
Visualize features with realistic WebStyleSymbols	Explore in the sandboxSandbox CodePen View live
Save a web scene	Explore in the sandboxSandbox CodePen View live
BasemapGallery widget	Explore in the sandboxSandbox CodePen View live
CoordinateConversion widget - Custom Formats	Explore in the sandboxSandbox CodePen View live
Locate button	Explore in the sandboxSandbox CodePen View live
Custom Basemap	Explore in the sandboxSandbox CodePen View live
BuildingSceneLayer with Slice widget	Explore in the sandboxSandbox CodePen View live
Create a layer from a portal item	Explore in the sandboxSandbox CodePen View live
Symbol playground	Explore in the sandboxSandbox CodePen View live
SceneView - goTo()	Explore in the sandboxSandbox CodePen View live
Generate a relationship visualization	Explore in the sandboxSandbox CodePen View live
Expand widget	Explore in the sandboxSandbox CodePen View live
Custom widgets with Vue	Explore in the sandboxSandbox CodePen View live
Histogram widget	Explore in the sandboxSandbox CodePen View live
HistogramRangeSlider	Explore in the sandboxSandbox CodePen View live
LayerList widget	Explore in the sandboxSandbox CodePen View live
Realistic water visualization in 3D	Explore in the sandboxSandbox CodePen View live
Query client-side 3D extents	Explore in the sandboxSandbox CodePen View live
Filter BuildingSceneLayer	Explore in the sandboxSandbox CodePen View live
Event explorer / watch properties	Explore in the sandboxSandbox CodePen View live
Intro to layers	Explore in the sandboxSandbox CodePen View live
Label features using Arcade expressions	Explore in the sandboxSandbox CodePen View live
MapImageLayer - Set definition expressions on sublayers	Explore in the sandboxSandbox CodePen View live
SceneLayer filter and query	Explore in the sandboxSandbox CodePen View live
Scene Layer with point geometries	Explore in the sandboxSandbox CodePen View live
Extend the SceneView WebGL engine	Explore in the sandboxSandbox CodePen View live
Underground navigation in global mode	Explore in the sandboxSandbox CodePen View live
Responsive widgets	Explore in the sandboxSandbox CodePen View live
Line of sight widget	Explore in the sandboxSandbox CodePen View live
Sketch in 3D	Explore in the sandboxSandbox CodePen View live
Intro to CSVLayer	Explore in the sandboxSandbox CodePen View live
Custom TileLayer	Explore in the sandboxSandbox CodePen View live
Filter points in a PointCloudLayer	Explore in the sandboxSandbox CodePen View live
PointCloudLayer - change point size and density	Explore in the sandboxSandbox CodePen View live
Elevation options	Explore in the sandboxSandbox CodePen View live
Use three.js from an external renderer	Explore in the sandboxSandbox CodePen View live
SceneView - shadow and lighting settings	Explore in the sandboxSandbox CodePen View live
QueryTask	Explore in the sandboxSandbox CodePen View live
Thematic multivariate visualization (2D)	Explore in the sandboxSandbox CodePen View live
Data-driven extrusion	Explore in the sandboxSandbox CodePen View live
Web scene - slide tour	Explore in the sandboxSandbox CodePen View live
Track widget simulation	Explore in the sandboxSandbox CodePen View live
Path visualization in 3D	Explore in the sandboxSandbox CodePen View live
Query Elevation (lines)	Explore in the sandboxSandbox CodePen View live
Zoom to extent of all features	Explore in the sandboxSandbox CodePen View live
Custom ElevationLayer - Exaggerating elevation	Explore in the sandboxSandbox CodePen View live
Filter features by geometry with SceneLayer	Explore in the sandboxSandbox CodePen View live
Realistic buildings with SceneLayer	Explore in the sandboxSandbox CodePen View live
SceneLayerView - query statistics by geometry	Explore in the sandboxSandbox CodePen View live
Create a local scene	Explore in the sandboxSandbox CodePen View live
Extrude building footprints based on real world heights	Explore in the sandboxSandbox CodePen View live
Flat vs. volumetric 3D symbol layers	Explore in the sandboxSandbox CodePen View live
Generate continuous color visualization for 3D buildings	Explore in the sandboxSandbox CodePen View live
Thematic multivariate visualization (3D)	Explore in the sandboxSandbox CodePen View live
Thematic visualization with realistic 3D symbols	Explore in the sandboxSandbox CodePen View live
Geoprocessing - viewshed analysis	Explore in the sandboxSandbox CodePen View live
Highlight SceneLayer	Explore in the sandboxSandbox CodePen View live
MapImageLayer - create dynamic map layers	Explore in the sandboxSandbox CodePen View live
PointCloudLayer - toggle renderers	Explore in the sandboxSandbox CodePen View live
PointCloudLayer - intensity color modulation	Explore in the sandboxSandbox CodePen View live
Measurement widget	Explore in the sandboxSandbox CodePen View live
Generate univariate continuous size and color visualization in 3D	Explore in the sandboxSandbox CodePen View live
Custom ElevationLayer - Thematic data as elevation	Explore in the sandboxSandbox CodePen View live
Daylight widget	Explore in the sandboxSandbox CodePen View live
GeometryEngine - geodesic buffers	Explore in the sandboxSandbox CodePen View live
MapImageLayer - dynamic data layer with table join	Explore in the sandboxSandbox CodePen View live
Calcite Maps and Bootstrap	Explore in the sandboxSandbox CodePen View live
Add edges to a SceneLayer	Explore in the sandboxSandbox CodePen View live
Coloring options for textured buildings	Explore in the sandboxSandbox CodePen View live
Using callout lines with labels	Explore in the sandboxSandbox CodePen View live
Point styles for cities	Explore in the sandboxSandbox CodePen View live

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

	Sample Code
`/`	Focus search
`esc`	Remove search focus
`enter`	Focus first search result
`es`	Explore in the Sandbox
`s`	Share in online code editor
`vl`	View live example

JavaScript API 4.14 Sample Code

JavaScript API Sample Code

Tags

103 results for Sample Code: 3D