Skip To Content ArcGIS for Developers Sign In Dashboard

ArcGIS Runtime SDK for Qt

Orbit the camera around an object

Sample Viewer View Sample on GitHub

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

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

import Esri.ArcGISExtras 1.1
import Esri.ArcGISRuntime 100.9
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

        Scene {
            id: scene
            BasemapImagery {}

            Surface {
                ArcGISTiledElevationSource {
                    url: "http://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"
                }
            }
        }
    }
}