Animate 3D graphic

View inWPFUWPFormsiOSAndroid
View on GitHub
Sample viewer app

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.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
123
124
125
<UserControl
    x:Class="ArcGISRuntime.WPF.Samples.Animate3DGraphic.Animate3DGraphic"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="300"
    d:DesignWidth="300"
    mc:Ignorable="d">
    <UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="5,0,5,0" />
            <Setter Property="Height" Value="25" />
            <Setter Property="Padding" Value="5,0,5,0" />
        </Style>
        <Style TargetType="Slider">
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>
        <Style TargetType="Label">
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
        <Style TargetType="TextBlock">
            <Setter Property="Margin" Value="5,0,5,0" />
        </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="150" />
        </Grid.ColumnDefinitions>
        <esri: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"
                Width="100"
                Height="25"
                VerticalAlignment="Top" />
            <Button
                x:Name="MissionPlayPause"
                Width="50"
                Height="25"
                VerticalAlignment="Top"
                Click="MissionPlayPlauseClick"
                Content="Pause" />
            <TextBlock Margin="5" Text="Progress" />
            <Slider
                x:Name="MissionProgressBar"
                Width="100"
                Height="25"
                Margin="5"
                VerticalAlignment="Top"
                IsMoveToPointEnabled="True"
                Maximum="1"
                Minimum="0"
                ValueChanged="MissionProgressOnSeek" />
            <Button
                Width="100"
                Height="25"
                VerticalAlignment="Top"
                Click="ToggleFollowPlane"
                Content="Don't follow" />
        </StackPanel>
        <Border
            Grid.Row="0"
            Grid.Column="2"
            Margin="5"
            CornerRadius="5">
            <Border.Background>
                <SolidColorBrush Opacity="0.7" Color="White" />
            </Border.Background>
            <StackPanel Margin="5">
                <Label Content="Play speed" />
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="40" />
                    </Grid.ColumnDefinitions>
                    <Slider
                        x:Name="MissionPlaySpeedSlider"
                        Grid.Column="0"
                        IsMoveToPointEnabled="True"
                        Maximum="8"
                        Minimum="0.5"
                        ValueChanged="MissionPlaySpeedChanged"
                        Value="1" />
                    <TextBlock Grid.Column="1" Text="{Binding ElementName=MissionPlaySpeedSlider, Path=Value, StringFormat=N2}" />
                </Grid>
                <Separator />
                <Label Content="Stats" FontSize="16" />
                <Label Content="Altitude:" />
                <TextBlock x:Name="AltitudeLabel" />
                <Label Content="Heading:" />
                <TextBlock x:Name="HeadingLabel" />
                <Label Content="Pitch:" />
                <TextBlock x:Name="PitchLabel" />
                <Label Content="Roll:" />
                <TextBlock x:Name="RollLabel" />
            </StackPanel>
        </Border>
        <esri:MapView
            x:Name="InsetMapView"
            Grid.Row="2"
            Grid.Column="0"
            Margin="5,0,0,25"
            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.