Qt Quick Exemple simple de suivi tactile en 3D - XR

Démonstration de la saisie par suivi des mains dans Qt Quick 3D XR.

Écran virtuel intitulé « Exemple XR Touch » comportant trois boutons

Cet exemple montre comment utiliser l'API de suivi des mains dans Qt Quick 3D XR pour interagir avec des objets 2D et 3D dans la scène. Il suit la structure de base de l'exemple xr_simple.

Nous commençons par créer un composant réutilisable TouchHand qui encapsule toute la logique nécessaire pour chaque main.

// Copyright (C) 2025 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick3D
import QtQuick3D.Xr

Node {
    id: root
    property color color: "#ddaa88"
    required property int touchId
    required property int hand
    required property XrView view

    property alias touchPosition: handController.scenePos
    property bool touchActive: false

    XrController {
        id: handController
        controller: root.hand

        property vector3d scenePos: view.xrOrigin.mapPositionToScene(pokePosition)

        onScenePosChanged: {
            const touchOffset = view.processTouch(scenePos, root.touchId)
            handModel.position = touchOffset

            const touchState = view.touchpointState(root.touchId)
            const gadget = touchState.model as XrGadget
            if (gadget) {
                gadget.handleTouch(touchState.uvPosition, root.touchId, touchState.pressed)
            }
        }
    }

    XrHandModel {
        id: handModel
        hand: root.hand
        materials: PrincipledMaterial {
            baseColor: root.color
            roughness: 0.5
        }
    }
}

Ce composant contient un ` XrController`, qui nous fournit la position 3D de l’index, ainsi qu’un ` XrHandModel ` indiquant où se trouve la main. C’est dans le gestionnaire ` onTouchPositionChanged ` que la magie opère. Nous appelons ` XrView.processTouch()`, qui effectue le gros du travail : il tente de mapper la position tactile 3D vers une position 2D sur une ` XrItem ` et envoie un événement tactile s’il trouve un élément. Il renvoie ensuite le décalage entre la position 3D et le point de contact sur la surface 2D. Nous utilisons ensuite ce décalage pour déplacer la position de l’ XrHandModel, afin de donner l’illusion que la main est arrêtée par la surface.

Remarque : cet effet ne fonctionnera pas sur l’Apple Vision Pro, car le système affiche les vraies mains de l’utilisateur et l’ XrHandModel n’est pas visible.

Nous créons deux instances du composant TouchHand à l’intérieur de l’ XrOrigin, une pour chaque main :

XrOrigin {
    id: theOrigin
    z: 50
    TouchHand {
        id: rightHandModel
        hand: XrHandModel.RightHand
        view: xrView
        touchId: 0
        onTouchPositionChanged: buttons.handleTouch(touchPosition)
    }
    TouchHand {
        id: leftHandModel
        hand: XrHandModel.LeftHand
        view: xrView
        touchId: 1
        onTouchPositionChanged: buttons.handleTouch(touchPosition)
    }
}
xrOrigin: theOrigin

Ici, « buttons » est un groupe de boutons 3D doté d’une fonction « handleTouch ». (L’implémentation n’est pas spécifique à la réalité étendue, les détails ne sont donc pas documentés ici.)

Nous positionnons l’ XrOrigin à 50 centimètres de l’origine de la scène, ce qui devrait constituer une distance de contact confortable.

Le reste de la scène contient quelques modèles 3D et un « XrItem » qui réagit aux événements tactiles.

Exemple de projet sur code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.