Qt Quick 3D - XR Exemple de toucher simple
Démonstration de l'entrée de suivi de la main dans Qt Quick 3D Xr.
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 dont nous avons besoin pour chaque main. Ce composant est situé dans le sous-projet distinct xr_shared, de sorte que vous pouvez facilement le réutiliser dans d'autres projets.
// 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 } } }
Le composant contient un XrController, qui nous donne la position 3D de l'index, et un XrHandModel qui indique où se trouve la main. C'est dans le gestionnaire onTouchPositionChanged que la magie opère. Nous appelons XrView.processTouch(), qui se charge des tâches les plus lourdes : Il essaie de faire correspondre la position tactile 3D à une position 2D sur un site 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 du site 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 montre les vraies mains de l'utilisateur et le site XrHandModel n'est pas affiché.
Nous créons deux instances du composant TouchHand à l'intérieur de 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 qui a une fonction handleTouch. (La mise en œuvre n'est pas spécifique à XR, les détails ne sont donc pas documentés ici).
Nous positionnons le site XrOrigin à 50 centimètres de l'origine de la scène, ce qui devrait être une distance de contact confortable.
Le reste de la scène contient des modèles 3D et une page XrItem qui réagit aux événements tactiles.
© 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.
