Kieran F. Kieran F. - 11 months ago 66
Javascript Question

How do I set an object's rotation to match a Vive controller rotation upon trigger using A-Frame?

Using the project A-Frame Dominoes as an example, I'm creating a basic A-Frame application that spawns objects when the Vive trigger is pressed.

I can get the newly spawned object to match the Vive's controller position at the time of trigger, however I can't figure out a way to match the rotation of the new object to the rotation of the controller.

Here's what I've tried:

onTriggerDown: function () {
var sceneEl =;
var controllerWorldPosition = this.el.object3D.getWorldPosition();
var controllerWorldRotation = this.el.object3D.getWorldRotation();

.attr('id', 'base-street-children')
.attr('scale', '0.01 0.01 0.01')
.attr('position', controllerWorldPosition)
.attr('rotation', controllerWorldRotation)
.attr('src', '#base-street-obj')
.attr('mtl', '#base-street-mtl');

Is there something special about setting a new object's rotation with JavaScript that I'm missing?

Answer Source

In Three.js, rotation is in radians, but in A-Frame rotation is in degrees. Since you are pulling out rotation data from a Three.js Object3D you will need to convert before applying it to an A-Frame entity.

Here is how this might be done in your example:

.attr('rotation', function() {
  var controllerWorldRotationX = controllerWorldRotation._x / (Math.PI / 180);
  var controllerWorldRotationY = controllerWorldRotation._y / (Math.PI / 180);
  var controllerWorldRotationZ = controllerWorldRotation._z / (Math.PI / 180);

  return controllerWorldRotationX + ' ' + controllerWorldRotationY + ' ' + controllerWorldRotationZ;