Animate 3D graphic

View inWPFWinUIUWPFormsiOSAndroid
View on GitHub

An OrbitGeoElementCameraController follows a graphic while the graphic's position and rotation are animated.

Image of animate 3D graphic

Use case

Visualize movement through a 3D landscape.

How to use the sample

Animation Controls:

  • Select a mission -- select a flight path
  • Play/Pause -- toggles playing and stopping the animation
  • Follow/Don't follow -- toggles the camera's free cam mode and follow
  • Mission progress -- shows how far along the route the plane is. Slide to change keyframe in animation
  • Flight speed -- controls speed of animation

How it works

  1. Create a GraphicsOverlay and add it to the SceneView.
  2. Create a ModelSceneSymbol object.
  3. Create a Graphic object and set its geometry to a Point.
  4. Set the ModelSceneSymbol object to the graphic.
  5. Add heading, pitch, and roll attributes to the graphic. Get the attributes from the graphic with Graphic.attributes.
  6. Create a SimpleRenderer object and set its expression properties.
  7. Add graphic and a renderer to the graphics overlay.
  8. Create a OrbitGeoElementCameraController which is set to target the graphic.
  9. Assign the camera controller to the SceneView.
  10. Update the graphic's location, heading, pitch, and roll.

Relevant API

  • Scene
  • Camera
  • GlobeCameraController
  • Graphic
  • GraphicsOverlay
  • ModelSceneSymbol
  • OrbitGeoElementCameraController
  • Renderer
  • SceneProperties
  • SceneView
  • SurfacePlacement

Offline data

This sample downloads the following items from ArcGIS Online automatically:

  • Bristol.zip - A 3D model for use within an ArcGIS Runtime Model Scene Symbol.
  • GrandCanyon.csv - CSV data for a route through the Grand Canyon
  • Hawaii.csv - CSV data for a route in Hawaii
  • Pyrenees.csv - CSV data for a route through the Pyrenees
  • Snowdon.csv - CSV data for a route near Mount Snowdon

Tags

Camera, ModelSceneSymbol, OrbitGeoElementCameraController, RendererSceneProperties, SceneView

Sample Code

Animate3DGraphic.xamlAnimate3DGraphic.xamlAnimate3DGraphic.xaml.cs
Use dark colors for code blocksCopy
                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="ArcGISRuntime.Samples.Animate3DGraphic.Animate3DGraphic"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:esriUI="clr-namespace:Esri.ArcGISRuntime.Xamarin.Forms;assembly=Esri.ArcGISRuntime.Xamarin.Forms">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="170" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="170" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="150" />
        </Grid.ColumnDefinitions>
        <esriUI:SceneView x:Name="MySceneView"
                          Grid.Row="0"
                          Grid.RowSpan="3"
                          Grid.Column="0"
                          Grid.ColumnSpan="3"
                          AtmosphereEffect="Realistic" />
        <StackLayout Grid.Row="0"
                     Grid.Column="0"
                     Grid.ColumnSpan="3"
                     Margin="5"
                     Orientation="Horizontal">
            <Picker x:Name="MissionSelectionBox" VerticalOptions="CenterAndExpand" />
            <Button x:Name="MissionPlayPause"
                    Clicked="MissionPlayPlauseClick"
                    Text="Pause" />
            <Button Clicked="ToggleFollowPlane" Text="Don't Follow" />
        </StackLayout>
        <Frame x:Name="LayoutFrame"
               Grid.Row="1"
               Grid.Column="2"
               Margin="5">
            <!--  Frame is hidden on iOS due to layout issues  -->
            <StackLayout Padding="5"
                         BackgroundColor="White"
                         Opacity=".7">
                <Label Text="Mission Progress:" TextColor="Black" />
                <Slider x:Name="MissionProgressBar"
                        Maximum="100"
                        MaximumTrackColor="CadetBlue"
                        MinimumTrackColor="CadetBlue"
                        ValueChanged="MissionProgressOnSeek" />
                <Label TextColor="Black">Altitude:</Label>
                <Label x:Name="AltitudeLabel" TextColor="Black" />
                <Label TextColor="Black">Heading:</Label>
                <Label x:Name="HeadingLabel" TextColor="Black" />
                <Label TextColor="Black">Pitch:</Label>
                <Label x:Name="PitchLabel" TextColor="Black" />
                <Label TextColor="Black">Roll:</Label>
                <Label x:Name="RollLabel" TextColor="Black" />
            </StackLayout>
        </Frame>
        <esriUI:MapView x:Name="InsetMapView"
                        Grid.Row="2"
                        Grid.Column="0"
                        Margin="20"
                        IsAttributionTextVisible="False" />
    </Grid>
</ContentPage>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.