A-Frame: rotate entity on mouse down using laser-controls

问题

I have a component which is set on the entity which should be rotated on a mousedown event:

AFRAME.registerComponent('spin', {

init: function () {

    var self = this;
    this.mouse_down = false;
    // assuming only one controller for now
    this.laser = document.querySelectorAll('.laser-controls')[0];

    this.el.addEventListener('mousedown', function (e) {
        self.mouse_down = true;       
    });

    this.el.addEventListener('mouseup', function (e) {
        self.mouse_down = false;
    });
},

tick: function() {

    if (this.mouse_down) {

        var el = this.el;
        var rotationTmp = this.rotationTmp = this.rotationTmp || {x: 0, y: 0, z: 0};
        var rotation = el.getAttribute('rotation');
        rotationTmp.y = (this.laser.object3D.getWorldRotation()._y / (Math.PI / 180));
        el.setAttribute('rotation', rotationTmp);
    }
}

});

But it is not rotating properly (tested in Gear VR). What I would like is: hold any controller button and rotate the entity, until controller button is released. Thanks!

回答1:

Assuming that laser-controls events are properly fired and captured (no context provided). Modify the object3D directly:

el.object3D.rotation.y = this.laser.object3D.rotation.y;

The question needs additional information on what not rotating properly means. Notice that if you rely on the controller rotation the entity will stop being intersected and mouseup will fire prematurely.

Probably better to rely on button release that doesn't depend on the raycaster:

// Enables rotation when entity is clicked on
this.el.addEventListener('mousedown', function (e) {
  self.rotate = true;       
});

// Releases entity
this.laser.addEventListener('triggerup', function (e) {
  self.rotate = false;
});

Also notice you have two laser-controls entities in your scene (for left and right hand). GearVR has a single controller and only one of the entities will be actively tracked. The one that correspond to the configured handedness.

Try to do this.laser = document.querySelectorAll('.laser-controls')[1] to access the right hand one. Likely the one configured in GearVR

With this.laser = document.querySelectorAll('.laser-controls')[0] you are accessing the left hand controller. That's why you don't see any rotation.

A more general solution would be to check if the entity has an associated controller:

var hasActiveController = document.querySelectorAll('.laser-controls')[0].components['tracked-controls'];

来源：https://stackoverflow.com/questions/53678080/a-frame-rotate-entity-on-mouse-down-using-laser-controls

标签

aframe