Aframe cardboard movement

Question

I want to be able to move in my VR world by looking around and holding down the cardboard button to move. I have tried for 2 hours and couldn't figure it out. I really don't want to use teleportation as my solution.

Answer 1

I'd throw this in an aframe component, and use the three.js API:

In the init check whether the mouse is up or down.
In the tick find out the rotation as a world matrix using extractRotation(mesh.matrix), apply it to a forward vector using direction.applyMatrix4(matrix), and add it to the current camera position.

AFRAME.registerComponent("foo", {
  init: function() {
    this.mouseDown = false
    this.el.addEventListener("mousedown", (e) => {
      this.mouseDown = true
    })
    this.el.addEventListener("mouseup", (e) => {
      this.mouseDown = false
    })
  },
  tick: function() {
    if (this.mouseDown) {
      let pos = this.el.getAttribute("position")
      let mesh = this.el.object3D
      var matrix = new THREE.Matrix4();
      var direction = new THREE.Vector3(0, 0, -0.1);

      matrix.extractRotation(mesh.matrix);  
      direction.applyMatrix4(matrix)
      direction.add(new THREE.Vector3(pos.x, pos.y, pos.z))
      this.el.setAttribute("position", direction)
    }
  }
})

Working fiddle here.