Orbit the camera around an object

View inC++QMLView on GitHubSample viewer app

Fix the camera to point at and rotate around a target object.

screenshot

Use case

The orbit geoelement camera controller provides control over the following camera behaviors:

  • automatically track the target
  • stay near the target by setting a minimum and maximum distance offset
  • restrict where you can rotate around the target
  • automatically rotate the camera when the target's heading and pitch changes
  • disable user interactions for rotating the camera
  • animate camera movement over a specified duration
  • control the vertical positioning of the target on the screen
  • set a target offset (e.g.to orbit around the tail of the plane) instead of defaulting to orbiting the center of the object

How to use the sample

The sample loads with the camera orbiting an plane model. The camera is preset with a restricted camera heading and pitch, and a limited minimum and maximum camera distance set from the plane. The position of the plane on the screen is also set just below center.

Use the "Camera Heading" slider to adjust the camera heading. Select the "Allow camera distance interaction" checkbox to allow zooming in and out with the mouse/keyboard: when the checkbox is deselected the user will be unable to adjust with the camera distance.

Use the "Plane Pitch" slider to adjust the plane's pitch. When in Center view, the plane's pitch will change independently to that of the camera pitch.

Use the "Cockpit view" button to offset and fix the camera into the cockpit of the plane. Use the "Plane pitch" slider to control the pitch of plane: the camera will follow the pitch of the plane in this mode. In this view adjusting the camera distance is disabled. Use the "Center view" button to exit cockpit view mode and fix the camera controller on the center of the plane.

How it works

  1. Declare an OrbitGeoElementCameraController
  2. Load a plane graphic and set the OrbitGeoElementCameraController to be the targetGeoElement
  3. Assign this controller to the cameraController sceneview property to set the camera to the scene view
  4. Set the heading, pitch and distance camera properties :
  • OrbitGeoElementCameraController.cameraHeadingOffset
  • OrbitGeoElementCameraController.cameraPitchOffset
  • OrbitGeoElementCameraController.cameraDistance
  1. Set the minimum and maximum angle of heading and pitch, and minimum and maximum distance for the camera with properties:
  • OrbitGeoElementCameraController.minCameraHeadingOffset or maxCameraHeadingOffset
  • OrbitGeoElementCameraController.minCameraHeadingOffset or maxCameraPitchOffset
  • OrbitGeoElementCameraController.minCameraHeadingOffset or maxCameraDistance
  1. Set the distance from which the camera is offset from the plane with method:
  • OrbitGeoElementCameraController.setTargetOffsets(x, y, z, duration)
  • or properties :
  • OrbitGeoElementCameraController.targetOffsetX
  • OrbitGeoElementCameraController.targetOffsetY
  • OrbitGeoElementCameraController.targetOffsetZ
  1. Set the vertical screen factor to determine where the plane appears in the scene:
  • OrbitGeoElementCameraController.targetVerticalScreenFactor
  1. Animate the camera to the cockpit using orbitCameraController.setTargetOffsets(x, y, z, duration)
  2. Set if the camera distance will adjust when zooming or panning using mouse or keyboard (default is true):
  • OrbitGeoElementCameraController.cameraDistanceInteractive
  1. Set if the camera will follow the pitch of the plane (default is true):
  • OrbitGeoElementCameraController.autoPitchEnabled

Relevant API

  • OrbitGeoElementCameraController

Offline data

Read more about how to set up the sample's offline data here.

Link Local Location
Bristol Plane Model <userhome>/ArcGIS/Runtime/Data/3D/Bristol/Collada/Bristol.dae

Tags

3D, camera, object, orbit, rotate, scene

Sample Code

OrbitCameraAroundObject.qml
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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
// [WriteFile Name=OrbitCameraAroundObject, Category=Scenes]
// [Legal]
// Copyright 2019 Esri.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// [Legal]

import Esri.ArcGISExtras 1.1
import Esri.ArcGISRuntime 100.15
import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.12

Rectangle {
    id: rootRectangle
    clip: true
    width: 800
    height: 600

    /* Define the Scene. Load a plane model from disk, place it above a runway, and create an orbiting camera around it */
    readonly property string planeModelPath: System.userHomePath + "/ArcGIS/Runtime/Data/3D/Bristol/Collada/Bristol.dae"

    SceneView {
        id: view
        anchors.fill: parent

        Component.onCompleted: {
            // Set the focus on SceneView to initially enable keyboard navigation
            forceActiveFocus();
        }

        Scene {
            id: scene
            Basemap {
                initStyle: Enums.BasemapStyleArcGISImageryStandard
            }

            Surface {
                ArcGISTiledElevationSource {
                    url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
                }
            }
        }

        GraphicsOverlay {
            id: sceneOverlay

            LayerSceneProperties {
                surfacePlacement: Enums.SurfacePlacementRelative
            }

            SimpleRenderer {
                id: sceneRenderer
                RendererSceneProperties {
                    id: renderProps
                    headingExpression: "[HEADING]"
                    pitchExpression: "[PITCH]"
                }
            }

            ModelSceneSymbol {
                id: planeModel
                url: planeModelPath
            }

            Graphic {
                id: planeGraphic
                symbol: planeModel

                //Place the plane just above a runway.
                geometry: Point {
                    x: 6.637
                    y: 45.399
                    z: 100.0
                    spatialReference: Factory.SpatialReference.createWgs84()
                }

                Component.onCompleted: {
                    //The renderer is set to orient objects based on their "HEADING" and "PITCH" attributes, this is how we'll control the plane transform
                    planeGraphic.attributes.insertAttribute("HEADING", 45.0); //Line up with the runway underneath the plane
                    planeGraphic.attributes.insertAttribute("PITCH", 0.0);
                }
            }
        }

        OrbitGeoElementCameraController {
            id: orbitCam
            targetGeoElement: planeGraphic //This camera orbits the plane graphic we loaded earlier
            cameraDistance: 50.0
            minCameraHeadingOffset: -45.0
            maxCameraHeadingOffset: 45.0
            minCameraPitchOffset: 10.0
            maxCameraPitchOffset: 100.0
            maxCameraDistance: 100.0
            targetVerticalScreenFactor: 0.33 //Move the camera so the plane is more on the bottom of the screen
            autoPitchEnabled: false

            // When we move to the callback, we trigger an animation,
            // this callback handles locking the camera into its new cockpit-state when that animation is finished
            onMoveCameraStatusChanged: {
                if(moveCameraStatus === Enums.TaskStatusCompleted) {
                    minCameraPitchOffset = 90.0
                    maxCameraPitchOffset = 90.0
                    autoPitchEnabled = true; //This property locks the orbital camera pitch to the pitch of the target object
                }
            }

            // Called when the user triggers the cockpit view button (see below)
            function moveToCockpit() {
                orbitCam.cameraDistanceInteractive = false;
                orbitCam.minCameraDistance = 0.0;
                orbitCam.setTargetOffsets(0.0, -2.0, 1.1, 1.0);

                //The animation may rotate us over the set camera bounds based on the plane pitch, so unlock them.
                orbitCam.minCameraPitchOffset = -180.0;
                orbitCam.maxCameraPitchOffset = 180.0;

                //Trigger the move-into-cockpit animation.
                //If the camera is already tracking object pitch, don't want to animate the pitch any further, we're exactly where we should be.
                orbitCam.moveCamera(0.0 - orbitCam.cameraDistance,
                                    0.0 - orbitCam.cameraHeadingOffset,
                                    orbitCam.autoPitchEnabled ? 0.0 : (90.0 - orbitCam.cameraPitchOffset) + planeGraphic.attributes.attributeValue("PITCH"), 1.0);
            }

            // Called when the user triggers the center view button (see below.) Snaps back to a following view.
            function moveToFollowing() {
                orbitCam.cameraDistanceInteractive = true;
                orbitCam.autoPitchEnabled = false;
                orbitCam.targetOffsetX = 0.0;
                orbitCam.targetOffsetY = 0.0;
                orbitCam.targetOffsetZ = 0.0;
                orbitCam.cameraHeadingOffset = 0.0;
                orbitCam.minCameraPitchOffset = 10.0;
                orbitCam.maxCameraPitchOffset = 100.0;
                orbitCam.cameraPitchOffset = 45.0;
                orbitCam.minCameraDistance = 10.0;
                orbitCam.cameraDistance = 50.0;
            }
        }

        cameraController: orbitCam //Our new orbital camera controller should be the active SceneView controller.
    }

    /* Create the UI */

    //Camera heading slider, sits at the bottom of the screen
    Slider {
        id: cameraHeadingSlider

        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            margins: 20
        }

        value: orbitCam.cameraHeadingOffset //Value bound to the model, so rotating the camera will update the slider.
        from: orbitCam.minCameraHeadingOffset
        to: orbitCam.maxCameraHeadingOffset

        //To avoid getting stuck in a binding loop for the value, update the value of the camera heading from the slider only in response to a moving slider.
        onMoved: {
            orbitCam.cameraHeadingOffset = value
        }

        //Custom slider handle that displays the current value
        handle: Item {
            x: parent.leftPadding + parent.visualPosition * (parent.availableWidth - headingHandleNub.width)
            y: parent.topPadding + parent.availableHeight / 2 - headingHandleNub.height / 2


            Rectangle {
                id: headingHandleNub
                color: headingHandleRect.color
                radius: width * 0.5
                width: 10
                height: width
            }
            Rectangle {
                id: headingHandleRect
                height: childrenRect.height
                width: childrenRect.width
                radius: 3
                x: headingHandleNub.x - width / 2 + headingHandleNub.width / 2
                y: headingHandleNub.y - height
                color: cameraHeadingSlider.background.children[0].color

                Text {
                    id: headingValue
                    font.pixelSize: 14
                    padding: 3
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                    text: Math.round(cameraHeadingSlider.value) + "\u00B0"
                    color: "white"
                }
            }
        }
    }

    Text {
        id: cameraHeadingLabel

        anchors {
            horizontalCenter: cameraHeadingSlider.horizontalCenter
            bottom: cameraHeadingSlider.top
            bottomMargin: 10
        }

        text: "Camera Heading"
        color: "white"
    }

    //Plane pitch slider, placed in the top-right of the screen
    Text {
        id: planePitchLabel

        anchors {
            horizontalCenter: planePitchSlider.horizontalCenter
            bottom: planePitchSlider.top
            bottomMargin: 10
        }

        text: "Plane Pitch"
        color: "white"
    }

    Slider {
        id: planePitchSlider

        anchors {
            top: parent.top
            bottom: parent.verticalCenter
            right: parent.right
            margins: 30
        }

        value: 0
        from: 90
        to: -90
        orientation: Qt.Vertical

        onMoved: {
            planeGraphic.attributes.replaceAttribute("PITCH", value)
        }

        //Custom slider handle that displays the current value
        handle: Item {
            x: planePitchSlider.leftPadding + planePitchSlider.availableWidth / 2 - pitchHandleNub.width / 2
            y: planePitchSlider.topPadding + planePitchSlider.visualPosition * (planePitchSlider.availableHeight - pitchHandleNub.height)

            Rectangle {
                id: pitchHandleNub
                color: pitchHandleRect.color
                radius: width * 0.5
                width: 10
                height: width
            }
            Rectangle {
                id: pitchHandleRect
                height: childrenRect.height
                width: childrenRect.width
                radius: 3
                x: pitchHandleNub.x - width
                y: pitchHandleNub.y - height/2 + pitchHandleNub.height/2
                color: planePitchSlider.background.children[0].color

                Text {
                    id: pitchValue
                    font.pixelSize: 14
                    padding: 3
                    horizontalAlignment: Qt.AlignHCenter
                    verticalAlignment: Qt.AlignVCenter
                    text: Math.round(planePitchSlider.value)  + "\u00B0"
                    color: "white"
                }
            }
        }
    }

    //View change buttons / allow cam interaction checkbox placed in the top-left of the screen.
    Rectangle {
        anchors {
            left: parent.left
            top: parent.top
        }

        height: childrenRect.height
        width: childrenRect.width
        color: Qt.rgba(0.2, 0.2, 0.2, 0.65)

        Column {
            spacing: 10
            padding: 10
            Button {
                text: "Cockpit View"
                onClicked: {
                    orbitCam.moveToCockpit();
                    allowCamDistanceInteractionCheckBox.enabled = false;
                    allowCamDistanceInteractionCheckBoxText.color = "gray"; //Gray out the text as well so the widget looks disabled
                }
            }

            Button {
                text: "Center View"
                onClicked: {
                    orbitCam.moveToFollowing();
                    allowCamDistanceInteractionCheckBox.enabled = true;
                    allowCamDistanceInteractionCheckBoxText.color = "white";
                }
            }

            Row {
                anchors {
                    left: parent.left
                }

                CheckBox {
                    id: allowCamDistanceInteractionCheckBox
                    checked: orbitCam.cameraDistanceInteractive
                    onCheckedChanged: orbitCam.cameraDistanceInteractive = checked
                }

                Text {
                    id: allowCamDistanceInteractionCheckBoxText
                    anchors {
                        verticalCenter: allowCamDistanceInteractionCheckBox.verticalCenter
                    }
                    text: "Allow camera\ndistance interaction"
                    color: "white"
                }
            }
        }
    }
}

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