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形框架：使用激光控件在鼠标按下时旋转实体

1 个答案: