A-Frame：使用激光控制在鼠标向下旋转实体

Question

我有一个设置在实体上的组件，应该在鼠标按下事件上旋转：

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

});

但它没有正确旋转（在 Gear VR 中测试）。我想要的是：按住任何控制器按钮并旋转实体，直到释放控制器按钮。谢谢！

Answer 1

假设正确触发和捕获激光控制事件（未提供上下文）。直接修改object3D：

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

该问题需要有关not rotating properly 含义的更多信息。请注意，如果您依赖控制器旋转，实体将停止相交，mouseup 将提前触发。

依赖于不依赖于光线投射器的按钮释放可能会更好：

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

另外请注意，您的场景中有两个 laser-controls 实体（用于左手和右手）。 GearVR 有一个控制器，只有一个实体会被主动跟踪。与配置的惯用手对应的那个。

尝试使用this.laser = document.querySelectorAll('.laser-controls')[1] 来访问右手边的那个。可能是 GearVR 中配置的那个

使用this.laser = document.querySelectorAll('.laser-controls')[0]，您正在访问左侧控制器。这就是为什么您看不到任何旋转。

更通用的解决方案是检查实体是否有关联的控制器：

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