I am currently working on a project in Aframe and I'm looking to implement a control/event that enables an entity to rotate downward.
While attempting to create a new animation and add it as a child object to the entity, I have achieved successful results in turning left and right along the x-axis. However, I am facing difficulties in getting it to work for rotating the box downward.
In certain scenarios, such as {z: 90, x:90, y: 0}, there seems to be no effective way to rotate the face pointing towards the camera downwards, regardless of changing the values for y or z axes.
To illustrate the issue, I have prepared a minimal plunker: https://plnkr.co/edit/B6apT3?p=preview
Edit: Including the code snippet from the original plunker.
For achieving the desired downward rotation, I am implementing the following logic:
if(rotateOnY){
z -= 90;
} else {
y -= 90;
}
changePosition(x, y, z);
And the function used to change the position is as follows:
function changePosition(x, y, z){
let animation = document.createElement('a-animation');
animation.setAttribute("attribute","rotation");
animation.setAttribute("dur", 300);
animation.setAttribute("repeat", "0");
animation.setAttribute("to",`${z} ${x} ${y}`);
document.getElementById('box').appendChild(animation);
document.getElementById('position-text').setAttribute('text', `value: Position(x, y, z): ${x} ${y} ${z}`)
}
Although there was a helpful response, the rotations using Tween are not functioning perfectly.
We can consider modifying the logic as shown below, but the mathematical computations do not align correctly, as evidenced in http://plnkr.co/edit/hr2l83?p=preview
const originalEuler = new THREE.Euler(x, y, z);
const originalQuaternion = new THREE.Quaternion();
originalQuaternion.setFromEuler(originalEuler);
var tarQ = originalQuaternion.premultiply(q);
var euler = new THREE.Euler();
euler.setFromQuaternion(tarQ);
let rot = { // rot not pos
x: THREE.Math.radToDeg(euler._x),
y: THREE.Math.radToDeg(euler._y),
z: THREE.Math.radToDeg(euler._z)
};
// update to neares 45
for(let axis of Object.keys(rot)){
rot[axis] = nearest45(rot[axis]);
}
// update global x, y, z;
x = rot.x; y = rot.y; z = rot.z;
changePosition(rot.x, rot.y, rot.z);