Qt Quick 3D - XR Simple Touch Beispiel

Dieses Beispiel zeigt, wie man die Hand-Tracking-API in Qt Quick 3D Xr verwendet, um mit 2D- und 3D-Objekten in der Szene zu interagieren. Es folgt der Grundstruktur des xr_simple Beispiels.

Da wir zwei Hände unterstützen müssen, beginnen wir mit der Erstellung einer Komponente, die die gesamte Logik kapselt, die wir für jede Hand benötigen, um Wiederholungen zu vermeiden:

component Hand : Node {
    id: handComponentRoot
    property color color: "#ddaa88"
    required property int touchId
    property alias hand: handModel.hand

    property vector3d touchPosition: handController.pokePosition
    onTouchPositionChanged: {
        const scenePos = theOrigin.mapPositionToScene(touchPosition)
        const touchOffset = xrView.processTouch(scenePos, handComponentRoot.touchId)
        handModel.position = touchOffset
        buttons.handleTouch(scenePos)
    }

    XrController {
        id: handController
        controller: handComponentRoot.hand
    }
    XrHandModel {
        id: handModel
        materials: PrincipledMaterial {
            baseColor: handComponentRoot.color
            roughness: 0.5
        }
    }
}

Die Komponente enthält einen XrController, der die 3D-Position des Zeigefingers angibt, und einen XrHandModel, der zeigt, wo sich die Hand befindet. Der onTouchPositionChanged Handler ist der Ort, wo die Magie passiert. Wir rufen XrView.processTouch() auf, das die schwere Arbeit übernimmt: Er versucht, die 3D-Berührungsposition auf eine 2D-Position auf XrItem abzubilden und sendet ein Berührungsereignis, wenn er ein Element findet. Anschließend wird der Versatz zwischen der 3D-Position und dem Berührungspunkt auf der 2D-Oberfläche zurückgegeben. Dieser Versatz wird dann verwendet, um die Position der XrHandModel zu verschieben, damit die Illusion entsteht, dass die Hand von der Oberfläche aufgehalten wird.

Schließlich führen wir die 3D-Interaktion durch. Hier ist buttons eine Gruppe von 3D-Schaltflächen, die eine handleTouch Funktion haben. (Die Implementierung ist nicht XR-spezifisch, daher werden die Details hier nicht dokumentiert).

Wir erstellen zwei Instanzen der Handkomponente innerhalb der XrOrigin, eine für jede Hand:

XrOrigin {
    id: theOrigin
    z: 50
    Hand {
        id: rightHandModel
        hand: XrHandModel.RightHand
        touchId: 0
    }
    Hand {
        id: leftHandModel
        hand: XrHandModel.LeftHand
        touchId: 1
    }
}
xrOrigin: theOrigin

Außerdem positionieren wir den Ursprung 50 Zentimeter vom Ursprung der Szene entfernt, was ein angenehmer Berührungsabstand sein sollte.

Der Rest der Szene enthält einige 3D-Modelle und eine XrItem, die auf Berührungsereignisse reagiert.

Beispielprojekt @ code.qt.io