Animate 3D graphic

View inWPFUWPFormsiOSAndroid
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.axmlAnimate3DGraphic.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/Animate3DGraphicLayout">
    <Esri.ArcGISRuntime.UI.Controls.SceneView
        android:id="@+id/PrimarySceneView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tableLayout" />
    <TableLayout
        android:id="@+id/tableLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal">
            <Button
                android:id="@+id/missionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Mission"
                tools:text="Mission"
                style="@android:style/Widget.Material.Button.Borderless.Colored" />
            <Button
                android:id="@+id/cameraButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Follow"
                style="@android:style/Widget.Material.Button.Borderless.Colored" />
            <Button
                android:id="@+id/statsButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Stats"
                style="@android:style/Widget.Material.Button.Borderless.Colored" />
            <Button
                android:id="@+id/playPauseButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Pause"
                style="@android:style/Widget.Material.Button.Borderless.Colored" />
        </TableRow>
    </TableLayout>
    <Esri.ArcGISRuntime.UI.Controls.MapView
        android:id="@+id/insetMap"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginBottom="30dp"
        android:layout_marginStart="30dp"
        android:layout_marginLeft="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <LinearLayout
        android:id="@+id/statsPanelLayout"
        android:layout_width="150dp"
        android:layout_height="256dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="100dp"
        android:alpha="0.8"
        android:background="@android:color/background_light"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingStart="16dp"
        android:paddingTop="16dp">
        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Altitude:"
            android:textColor="@android:color/holo_blue_bright" />
        <TextView
            android:id="@+id/planeAltitudeText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="@android:color/holo_blue_dark" />
        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Heading:"
            android:textColor="@android:color/holo_blue_bright" />
        <TextView
            android:id="@+id/planeHeadingText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="@android:color/holo_blue_dark" />
        <TextView
            android:id="@+id/textView99"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Pitch:"
            android:textColor="@android:color/holo_blue_bright" />
        <TextView
            android:id="@+id/planePitchText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="@android:color/holo_blue_dark" />
        <TextView
            android:id="@+id/textView7"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Roll:"
            android:textColor="@android:color/holo_blue_bright" />
        <TextView
            android:id="@+id/planeRollText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textColor="@android:color/holo_blue_dark" />
        <TextView
            android:id="@+id/textView9"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Mission Progress:"
            android:textColor="@android:color/holo_blue_bright" />
        <SeekBar
            android:id="@+id/missionProgressSeekBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:max="100"
            android:progress="50" />
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

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