Given three Euler angles x, y, z in radians, I am looking to convert them into a Vector location X, Y, Z with the center as the origin.
If it is possible to utilize https://threejs.org/docs/#api/en/math/Euler.toVector3 to obtain the Vector, I would appreciate knowing how. Alternatively, any mathematical (sin/cos) solution is also welcome.
In this code snippet, axesHelper represents the angles while the cube should be positioned based on the Euler angles. Use Dat gui for real-time editing of the rotations.
// Adding Axis to represent Euler
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// Adding cube to represent Vector
const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
render();
const gui = new GUI();
const angles = {
degX: 0,
degY: 0,
degZ: 0,
}
gui.add(angles, 'degX', 0, 360, 1).onChange(function() {
axesHelper.rotation.x = THREE.MathUtils.degToRad(angles.degX);
render();
updateEULtoAngle();
});
gui.add(angles, 'degY', 0, 360, 1).onChange(function() {
axesHelper.rotation.y = THREE.MathUtils.degToRad(angles.degY);
render();
updateEULtoAngle();
});
gui.add(angles, 'degZ', 0, 360, 1).onChange(function() {
axesHelper.rotation.z = THREE.MathUtils.degToRad(angles.degZ);
render();
updateEULtoAngle();
});
console.log(THREE.MathUtils.radToDeg(axesHelper.rotation.x));
console.log(THREE.MathUtils.radToDeg(axesHelper.rotation.y));
console.log(THREE.MathUtils.radToDeg(axesHelper.rotation.z));
function updateEULtoAngle() {
let eul = new THREE.Euler(
THREE.MathUtils.degToRad(angles.degX),
THREE.MathUtils.degToRad(angles.degY),
THREE.MathUtils.degToRad(angles.degZ)
);
let vec = new THREE.Vector3();
eul.toVector3(vec);
console.log(eul,vec);
cube.position.copy(vec);
}
Visual representation: Cube following the Y axis
Related question: encountering issues with axis alignment - How to convert Euler angles to directional vector?