Qt Quick 3D - XR Ejemplo táctil simple
Demuestra la entrada de seguimiento de manos en Qt Quick 3D Xr.
Este ejemplo muestra cómo utilizar la API de seguimiento de manos en Qt Quick 3D Xr para interactuar con objetos 2D y 3D en la escena. Sigue la estructura básica del ejemplo xr_simple.
Empezamos creando un componente reutilizable TouchHand que encapsula toda la lógica que necesitamos para cada mano. Este se encuentra en el subproyecto separado xr_shared, por lo que se puede reutilizar fácilmente en otros proyectos.
// 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 } } }
El componente contiene un XrController, que nos da la posición 3D del dedo índice, y un XrHandModel para mostrar dónde está la mano. El manejador onTouchPositionChanged es donde ocurre la magia. Llamamos a XrView.processTouch(), que hace el trabajo pesado: Intenta mapear la posición 3D táctil a una posición 2D en XrItem y envía un evento táctil si encuentra un elemento. A continuación, devuelve el desplazamiento desde la posición 3D hasta el punto táctil en la superficie 2D. A continuación, utilizamos ese desplazamiento para cambiar la posición de XrHandModel, para dar la ilusión de que la mano está detenida por la superficie.
Nota: Este efecto no funcionará en el Apple Vision Pro ya que el sistema muestra las manos reales del usuario, y el XrHandModel no se muestra.
Creamos dos instancias del componente TouchHand dentro de XrOrigin, una para cada mano:
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
Aquí, buttons es un grupo de botones 3D que tiene una función handleTouch. (La implementación no es específica de XR, por lo que los detalles no se documentan aquí).
Colocamos el XrOrigin a 50 centímetros del origen de la escena, lo que debería ser una distancia cómoda para tocar.
El resto de la escena contiene algunos modelos 3D y un XrItem que reacciona a los eventos táctiles.
© 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.
