在A-Frame环境中读取旋转时出现问题

Question

这是我在这里的第一篇文章：

我想知道用户在使用a-frame时看到的是什么。我现在使用旋转侦听器组件来了解这一点。类似于：

AFRAME.registerComponent('rotation-listener', {
tick() {
const newValue = this.el.getAttribute('rotation');
const stringCoords = AFRAME.utils.coordinates.stringify(newValue);
if (this.lastValue !== stringCoords) {
this.el.emit('rotationChanged', newValue);
this.lastValue = stringCoords;
}
},
});
camera[0].addEventListener('rotationChanged', e => {
console.log('Rotation: ', e.detail);
});
}

但我有一个问题，我修改了onlook控制yavobject.returation.y和pitchobject.returation.x，并应用0.25因子以获得较低的灵敏度和较慢的环视速度。

问题是，当我在console.log上获得旋转变量的值时，会显示正确的值，但除以0.25。这是一个问题，因为在Y轴上有一个90和-90的上限(你在真正的上限之前到达那个上限(，所以我不能正确地获得所有的值。

我该如何解决？创建一个新的变量rotationdat，进行正确的计算，而不使用0.25？然后读取旋转侦听器组件上的变量？我已经这样做了，但我不知道它是否正确：

onMouseMove: function (evt) {
var direction;
var movementX;
var movementY;
var pitchObject = this.pitchObject;
var previousMouseEvent = this.previousMouseEvent;
var yawObject = this.yawObject;
var rotationdat = [0,0,0];
// Not dragging or not enabled.
if (!this.data.enabled || (!this.mouseDown && !this.pointerLocked)) { return; }
// Calculate delta.
if (this.pointerLocked) {
movementX = evt.movementX || evt.mozMovementX || 0;
movementY = evt.movementY || evt.mozMovementY || 0;
} else {
movementX = evt.screenX - previousMouseEvent.screenX;
movementY = evt.screenY - previousMouseEvent.screenY;
}
this.previousMouseEvent.screenX = evt.screenX;
this.previousMouseEvent.screenY = evt.screenY;
// Calculate rotation.
direction = this.data.reverseMouseDrag ? 1 : -1;
yawObject.rotation.y += movementX * 0.002 * this.data.mouseSpeedFactor * direction;
pitchObject.rotation.x += movementY * 0.002 * this.data.mouseSpeedFactor * direction;
pitchObject.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, pitchObject.rotation.x));
//new rotation calculation calculo de rotacion
yawObject.rotationdat.y += movementX * 0.002 * direction;
pitchObject.rotationdat.x += movementY * 0.002 * direction;
pitchObject.rotationdat.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, pitchObject.rotationdat.x));
rotationdat = (pitchObject.rotationdat.x, yawObject.rotationdat.y, 0);
},

谢谢你读我的书！

Answer 1

我认为在底层Threejs层访问相机比分解look-controls更简单。

任何threejs对象都有一个getWorldQuaternion()方法，您可以使用它来获取当前的"；全局"；旋转：

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('foo', {
init: function() {
this.text = document.querySelector("a-text"); // to display the angles
this.tmpQuaternion = new THREE.Quaternion(); // to keep the current rotation
this.tmpEuler = new THREE.Euler(); // we want euler angles, not quaternions
},
tick: function() {
const camera = this.el.sceneEl.camera; // get the camera reference
camera.getWorldQuaternion(this.tmpQuaternion); // get the 'global' rotation as a quaternion object
this.tmpEuler.setFromQuaternion(this.tmpQuaternion, "YXZ"); // convert it to euler angles
// get the yaw, pitch, and roll components, and display them as degrees
const string = [
THREE.MathUtils.radToDeg(this.tmpEuler.x).toFixed(2),
THREE.MathUtils.radToDeg(this.tmpEuler.y).toFixed(2),
THREE.MathUtils.radToDeg(this.tmpEuler.z).toFixed(2)
].join(" ");
this.text.setAttribute("value", string)
}
})
</script>
<a-scene foo>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-text position="-0.5 1 -2.5" color="black"></a-text>
<a-sky color="#ECECEC"></a-sky>
</a-scene>