A-Frame VR Controller Support (Quest2) Tutorial

A-Frame has native support for VR controller: https://aframe.io/docs/1.4.0/introduction/interactions-and-controllers.html

However, native support does not give you customization ability. Oculus Quest2 Controller also reported not working with the default controller component; to customize support for Oculus Quest2, here is a script I made based on https://github.com/gftruj/webzamples/tree/master/aframe ; this script will give you support to move around VR scene with thumbstick and head direction:

AFRAME.registerComponent('oculus-thumbstick-controls', {

schema: {

acceleration: { default: 45 },

rigSelector: {default: "#rig"},

fly: { default: false },

controllerOriented: { default: false },

adAxis: {default: 'x', oneOf: ['x', 'y', 'z']},

wsAxis: {default: 'z', oneOf: ['x', 'y', 'z']},

enabled: {default: true},

adEnabled: {default: true},

adInverted: {default: false},

wsEnabled: {default: true},

wsInverted: {default: false}

},

init: function () {

this.easing = 1.1;

this.velocity = new THREE.Vector3(0, 0, 0);

this.tsData = new THREE.Vector2(0, 0);

this.thumbstickMoved = this.thumbstickMoved.bind(this)

this.el.addEventListener('thumbstickmoved', this.thumbstickMoved);

},

update: function() {

this.rigElement = document.querySelector(this.data.rigSelector)

},

tick: function (time, delta) {

if (!this.el.sceneEl.is('vr-mode')) return;

var data = this.data;

var el = this.rigElement

var velocity = this.velocity;

//console.log("here", this.tsData, this.tsData.length())

if (!velocity[data.adAxis] && !velocity[data.wsAxis] && !this.tsData.length()) { return; }

// Update velocity.

delta = delta / 1000;

this.updateVelocity(delta);

if (!velocity[data.adAxis] && !velocity[data.wsAxis]) { return; }

// Get movement vector and translate position.

el.object3D.position.add(this.getMovementVector(delta));

},

updateVelocity: function (delta) {

var acceleration;

var adAxis;

var adSign;

var data = this.data;

var velocity = this.velocity;

var wsAxis;

var wsSign;

const CLAMP_VELOCITY = 0.00001;

adAxis = data.adAxis;

wsAxis = data.wsAxis;

// If FPS too low, reset velocity.

if (delta > 0.2) {

velocity[adAxis] = 0;

velocity[wsAxis] = 0;

return;

}

// https://gamedev.stackexchange.com/questions/151383/frame-rate-independant-movement-with-acceleration

var scaledEasing = Math.pow(1 / this.easing, delta * 60);

// Velocity Easing.

if (velocity[adAxis] !== 0) {

velocity[adAxis] = velocity[adAxis] * scaledEasing;

}

if (velocity[wsAxis] !== 0) {

velocity[wsAxis] = velocity[wsAxis] * scaledEasing;

}

// Clamp velocity easing.

if (Math.abs(velocity[adAxis]) < CLAMP_VELOCITY) { velocity[adAxis] = 0; }

if (Math.abs(velocity[wsAxis]) < CLAMP_VELOCITY) { velocity[wsAxis] = 0; }

if (!data.enabled) { return; }

// Update velocity using keys pressed.

acceleration = data.acceleration;

if (data.adEnabled && this.tsData.x) {

adSign = data.adInverted ? -1 : 1;

velocity[adAxis] += adSign * acceleration * this.tsData.x * delta;

}

if (data.wsEnabled) {

wsSign = data.wsInverted ? -1 : 1;

velocity[wsAxis] += wsSign * acceleration * this.tsData.y * delta;

}

},

getMovementVector: (function () {

var directionVector = new THREE.Vector3(0, 0, 0);

var rotationEuler = new THREE.Euler(0, 0, 0, 'YXZ');

return function (delta) {

var rotation = this.el.sceneEl.camera.el.object3D.rotation

var velocity = this.velocity;

var xRotation;

directionVector.copy(velocity);

directionVector.multiplyScalar(delta);

// Absolute.

if (!rotation) { return directionVector; }

xRotation = this.data.fly ? rotation.x : 0;

// Transform direction relative to heading.

rotationEuler.set(xRotation, rotation.y, 0);

directionVector.applyEuler(rotationEuler);

return directionVector;

};

})(),

thumbstickMoved: function (evt) {

this.tsData.set(evt.detail.x, evt.detail.y);

},

remove: function () {

this.el.removeEventListener('thumbstickmoved', this.thumbstickMoved);

}

Basic usage

<a-scene>

<a-entity id="rig">

<a-camera position="0 1.6 0"></a-camera>

<a-entity oculus-touch-controls="hand: left" ></a-entity>

<a-entity oculus-touch-controls="hand: right" oculus-thumbstick-controls></a-entity>

</a-entity>

</a-scene>

Properties