Animate 3D graphic

View inMAUIUWPWPFWinUIView 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
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<UserControl
    x:Class="ArcGIS.UWP.Samples.Animate3DGraphic.Animate3DGraphic"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls">
    <UserControl.Resources>
        <Style x:Key="LabelStyle" TargetType="TextBlock">
            <Setter Property="FontWeight" Value="SemiBold" />
        </Style>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="225" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="225" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="175" />
        </Grid.ColumnDefinitions>
        <esriUI:SceneView
            x:Name="MySceneView"
            Grid.Row="0"
            Grid.RowSpan="3"
            Grid.Column="0"
            Grid.ColumnSpan="3"
            AtmosphereEffect="Realistic" />
        <StackPanel
            Grid.Row="0"
            Grid.Column="0"
            Grid.ColumnSpan="2"
            Margin="5"
            Orientation="Horizontal">
            <ComboBox
                x:Name="MissionSelectionBox"
                MinWidth="150"
                VerticalAlignment="Top" />
            <Button
                x:Name="MissionPlayPause"
                MinWidth="75"
                Margin="5,0,0,0"
                VerticalAlignment="Top"
                Click="MissionPlayPause_Click"
                Content="Pause" />
            <TextBlock
                Margin="5"
                VerticalAlignment="Top"
                Style="{StaticResource LabelStyle}"
                Text="Progress:" />
            <Slider
                x:Name="MissionProgressBar"
                Width="100"
                Margin="5,-2,5,0"
                VerticalAlignment="Top"
                Maximum="1"
                Minimum="0"
                StepFrequency=".01"
                ValueChanged="MissionProgressOnSeek" />
            <Button
                MinWidth="100"
                Margin="5,0,0,0"
                VerticalAlignment="Top"
                Click="ToggleFollowPlane"
                Content="Don't follow" />
        </StackPanel>
        <Border
            Grid.Row="0"
            Grid.Column="2"
            Margin="5"
            Padding="5"
            CornerRadius="5">
            <Border.Background>
                <SolidColorBrush Opacity="0.7" Color="White" />
            </Border.Background>
            <StackPanel Margin="5" Opacity=".9">
                <TextBlock Style="{StaticResource LabelStyle}" Text="Play speed" />
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Slider
                        x:Name="MissionPlaySpeedSlider"
                        Grid.Column="0"
                        Maximum="8"
                        Minimum="0.5"
                        ValueChanged="MissionPlaySpeedChanged"
                        Value="1" />
                    <TextBlock
                        Grid.Column="1"
                        Margin="8"
                        Text="{Binding ElementName=MissionPlaySpeedSlider, Path=Value}" />
                </Grid>
                <TextBlock
                    Margin="0,0,0,10"
                    FontSize="16"
                    FontWeight="Bold"
                    Text="Stats" />
                <TextBlock Style="{StaticResource LabelStyle}" Text="Altitude:" />
                <TextBlock x:Name="AltitudeTextBlock" Margin="5" />
                <TextBlock Style="{StaticResource LabelStyle}" Text="Heading:" />
                <TextBlock x:Name="HeadingTextBlock" Margin="5" />
                <TextBlock Style="{StaticResource LabelStyle}" Text="Pitch:" />
                <TextBlock x:Name="PitchTextBlock" Margin="5" />
                <TextBlock Style="{StaticResource LabelStyle}" Text="Roll:" />
                <TextBlock
                    x:Name="RollTextBlock"
                    Margin="5"
                    FontWeight="Normal" />
            </StackPanel>
        </Border>
        <esriUI:MapView
            x:Name="InsetMapView"
            Grid.Row="2"
            Grid.Column="0"
            Margin="10,0,0,30"
            BorderBrush="Black"
            BorderThickness="1"
            IsAttributionTextVisible="False" />
    </Grid>
</UserControl>

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close