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'];