CODEWITHSUNDEEP
aframe
Micah Blumberg
Micah Blumberg

Reputation: 79

Aframe How do I simulate a 6dof controller on the Oculus GO controller using the touchpad to move the controller forward, back, left, and right?

enter image description hereWhat if we could simulate 6dof control on the Oculus Go controller? Imagine that we turn the controller 3d model into a hand, it still just rotates, but imagine that we use the touchpad to move the hand foward, left, right, or backwards in space, the touch pad gives you movement along a z and x axis in space, but the accelerometer/gyro gives you a y and x axis. so the accelerometer/gyro serves as the arm, and the touch pad serves as the hand/wrist, a hand that can move forward and back and only twist left and right, and grip with the trigger, the hand can't tilt up or down but the arm can make up for that. So how do I build this?

Upvotes: 0

Views: 446

Answers (1)

ngokevin
ngokevin

Reputation: 13233

There is https://www.npmjs.com/package/aframe-thumb-controls-component that provides events for pressing thumbpad in directions (e.g., thumbupstart, thumbleftend).

Write a component that listens to those events, sets a property (e.g., this.buttons.left = true, then the tick handler needs to update the this.el.object3D.position based on which buttons are held down.

Also need to take into consideration the direction the camera is facing. https://github.com/aframevr/aframe/blob/master/src/components/wasd-controls.js is a good starting point is it is similar, where it listens to key downs and translates position. Just need to modify to use thumb-controls instead.

More hints:

<script src="https://unpkg.com/[email protected]/dist/aframe-thumb-controls-component.min.js">

AFRAME.registerComponent('thumb-movement-controls', {
  init: function () {
    this.buttons = {
      left: false, right: false, up: false, down: false
    };

    this.el.addEventListener('thumbleftstart', () => {
      this.buttons.left = true;
    });

    this.el.addEventListener('thumbleftend', () => {
      this.buttons.left = false;
    });
  },

  tick: function () {
    // Really simplified movement. Does not take into account camera heading or velocity / time, but wasd-controls shows how.
    if (this.buttons.left) {
      this.el.position.x -= 0.001;
    }
  }
});

<a-entity daydream-controls thumb-controls thumb-movement-controls></a-entity>

Upvotes: 2

Related Questions