CODEWITHSUNDEEP
aframehtc-vive
Shuai Peng
Shuai Peng

Reputation: 1

How to use A-Frame framework to get the rotation data of the helmet

At present, with the support of the A-Frame framework, I can wear the helmet to watch the panoramic video content. I want to know how to obtain the data when the helmet chooses the direction through A-Frame framework.

Upvotes: -1

Views: 115

Answers (1)

Diarmid Mackenzie
Diarmid Mackenzie

Reputation: 826

This example shows how you would get the camera position & rotation data, and display it on a panel.

https://camera-coordinates.glitch.me/

<!DOCTYPE html>
<html>
  <head>
      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
      <script>
      /* Custom A-Frame component
         Fires a specified event on this entity on a regular timed interval */
      AFRAME.registerComponent('log-position-data', {
        schema: {
          output: {type: 'selector'}
        },
        tick: function () {

          var dataString = "Camera Position Data:"
          dataString += "Position: \n"
          dataString += `x: ${this.el.object3D.position.x.toFixed(2)}\n`
          dataString += `y: ${this.el.object3D.position.y.toFixed(2)}\n`
          dataString += `z: ${this.el.object3D.position.z.toFixed(2)}\n`

          dataString += "Orientation: \n"
          dataString += `x: ${this.el.object3D.rotation.x.toFixed(2)}\n`
          dataString += `y: ${this.el.object3D.rotation.y.toFixed(2)}\n`
          dataString += `z: ${this.el.object3D.rotation.z.toFixed(2)}\n`

          this.data.output.setAttribute("text", {value: dataString});
        }
      });
      </script>

  </head>

  <body>
    <a-scene>
      <a-camera log-position-data="output:#hud">
        <a-plane id="hud" position = "0 0 -2" text="color:white; xOffset: 0.1" material="color:black">
        </a-plane>
      </a-camera>
      <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>

Upvotes: 0

Related Questions