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

Question

我有一个设置在实体上的组件，它应该在 mousedown 事件上旋转：

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 将过早触发。

依赖于不依赖于 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;
});

另请注意，您的场景中有两个 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'];

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

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

aframe