es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

a-frame: ¿cómo hacer que las manos sigan a la cámara?

23 Jul, 2023 Programación

Estoy comenzando a aprender aframe y quiero usarlo con un Oculus Quest 2. Tengo las manos mostradas y estoy tratando de moverme por el mundo de realidad virtual, pero cuando me muevo, las manos no se mueven … ¿cómo hacer que las manos sigan a la cámara?
Gracias.

Este es mi código

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
        <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.0/dist/aframe-extras.min.js"></script>

    <script>


    </script>
  </head>
  <body>
    <a-scene>
        <a-entity id="rig" movement-controls="" position="0 0 0">
            <a-entity camera="" position="0 0 0" look-controls="pointerLockEnabled: true"></a-entity>
        </a-entity>

        <a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffcccc"></a-entity>
        <a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffcccc"></a-entity>



      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que las manos sigan la cámara en un aframe con Oculus Quest 2, es necesario agregar un listener al evento update en el componente de la cámara. En el interior del listener, se puede establecer la posición de las manos para que coincida con la posición de la cámara. Aquí tienes un ejemplo de cómo podría verse eso:

    <a-entity camera="" position="0 0 0" look-controls="pointerLockEnabled: true" on="update: #leftHandPos.object3D.position.set(camera.el.object3D.position.x - 0.2, camera.el.object3D.position.y - 0.5, camera.el.object3D.position.z); 
              update: #rightHandPos.object3D.position.set(camera.el.object3D.position.x + 0.2, camera.el.object3D.position.y - 0.5, camera.el.object3D.position.z);">
   </a-entity>

   <a-entity id="leftHand" hand-controls="hand: left; handModelStyle: lowPoly; color: #ffcccc" position="0 0 0" static-body="" kinematic-body="" mesh-collider="" position="0.2 -0.5 -0.5" ref="leftHandPos">
   </a-entity>

   <a-entity id="rightHand" hand-controls="hand: right; handModelStyle: lowPoly; color: #ffcccc" position="0 0 0" static-body="" kinematic-body="" mesh-collider="" position="-0.2 -0.5 -0.5" ref="rightHandPos">
   </a-entity>

    En este código, estamos utilizando el atributo on en la entidad de la cámara para agregar dos listeners al evento update. El primer listener establece la posición de la entidad leftHand ligeramente detrás y debajo de la cámara, mientras que el segundo listener establece la posición de la entidad rightHand ligeramente delante y debajo de la cámara.

    Ten en cuenta que hemos agregado atributos ref a las entidades leftHand y rightHand, que podemos utilizar para acceder a sus posiciones en el listener. Por defecto, los controles de a-frame (incluyendo hand-controls) utilizan cuerpos dinámicos, lo que significa que no se pueden mover con setPosition(). Para moverlos, es necesario establecer las propiedades static-body y kinematic-body, así como agregar un componente mesh-collider.

    Con estos cambios, las manos deberían seguir ahora la cámara mientras te mueves por el mundo de realidad virtual.

Comments are closed.