Orbit the camera around an object

View inQMLC++
View on GitHub
Sample 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. Instantiate an OrbitGeoElementCameraController with GeoElement and camera distance as parameters.
  2. Use sceneView::setCameraController(OrbitCameraController) to set the camera to the scene view.
  3. Set the heading, pitch and distance camera properties with:
  4. orbitCameraController::setCameraHeadingOffset(double)
  5. orbitCameraController::setCameraPitchOffset(double)
  6. orbitCameraController::setCameraDistance(double)
  7. Set the minimum and maximum angle of heading and pitch, and minimum and maximum distance for the camera with:
  8. orbitCameraController::setMinCameraHeadingOffset(double) or setMaxCameraHeadingOffset(double)
  9. orbitCameraController::setMinCameraHeadingOffset(double) or setMaxCameraPitchOffset(double)
  10. orbitCameraController::setMinCameraHeadingOffset(double) or setMaxCameraDistance(double)
  11. Set the distance from which the camera is offset from the plane with:
  12. orbitCameraController::setTargetOffsets(x, y, z, duration)
  13. orbitCameraController::setTargetOffsetX(double)
  14. orbitCameraController::setTargetOffsetY(double)
  15. orbitCameraController::setTargetOffsetZ(double)
  16. Set the vertical screen factor to determine where the plane appears in the scene:
  17. orbitCameraController::setTargetVerticalScreenFactor(float)
  18. Animate the camera to the cockpit using orbitCameraController::setTargetOffsets(x, y, z, duration)
  19. Set if the camera distance will adjust when zooming or panning using mouse or keyboard (default is true):
  20. orbitCameraController::setCameraDistanceInteractive(boolean)
  21. Set if the camera will follow the pitch of the plane (default is true):
  22. orbitCameraController::setAutoPitchEnabled(boolean)

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.qmlOrbitCameraAroundObject.cppOrbitCameraAroundObject.h
                                                                                                                                                                                                                             
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
// [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.Samples 1.0
import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.12

Item {

    SceneView {
        id: view
        anchors.fill: parent
    }

    // Declare the C++ instance which creates the scene etc. and supply the view
    OrbitCameraAroundObjectSample {
        id: model
        sceneView: view
        planePitch: planePitchSlider.value
    }

    //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: model.cameraHeading //Value bound to the model, so rotating the camera will update the slider.
        from: model.cameraHeadingBounds.x //Similarly, setting different initial bounds changes the UI automatically. Type used is QPointF for min/max, hence the x/y
        to: model.cameraHeadingBounds.y

        //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: {
            model.cameraHeading = cameraHeadingSlider.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

        //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: {
                    model.cockpitView();
                    allowCamDistanceInteractionCheckBox.enabled = false;
                    allowCamDistanceInteractionCheckBoxText.color = "gray";
                }
            }

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

            Row {
                anchors {
                    left: parent.left
                }

                CheckBox {
                    id: allowCamDistanceInteractionCheckBox
                    checked: model.allowCamDistanceInteraction
                    onCheckedChanged: model.allowCamDistanceInteraction = 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.