CODEWITHSUNDEEP
javascriptthree.jsrotationaframe
Kieran F.
Kieran F.

Reputation: 555

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 = d3.select(this.el.sceneEl);
  var controllerWorldPosition = this.el.object3D.getWorldPosition();
  var controllerWorldRotation = this.el.object3D.getWorldRotation();

  sceneEl.append('a-obj-model')
         .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?

Upvotes: 0

Views: 316

Answers (1)

bryik
bryik

Reputation: 146

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;
})

Upvotes: 2

Related Questions