Problem reading rotation on A-Frame enviroment - aframe

Question

this is my first post here:
I would like to know where users are looking at when using a-frame. I'm now using the rotation listener component to know that. Something like:
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);
});
}
But I have one issue, I have modified on look-controls the yawobject.rotation.y and the pitchobject.rotation.x and apply a 0,25 factor to get a lower sensitivity and look around more slow.
The problem is that when I get the values of the rotation variable on console.log shows me the correct value but divided by 0,25. This is an issue because on Y axis there is a cap on 90 and -90 (you reach that cap before the true cap is), so i can't obtain all the values correctly.
How can I solve that? Creating a new variable rotationdat which makes the correct calculation, without the 0,25? And then reading that variable on the rotation-listener component? I have done this but I don't know if it is correct:
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);
},
Thank you for read me!

Answer 1

I think it's simpler to acess the camera in the underlying Threejs layer instead of decomposing the look-controls.
Any threejs object has a getWorldQuaternion() method, which you can use to get the current "global" rotatation:
<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>