Convert Euler angle to Vector using .Euler's "setFromVector3"

Question

So the inputs are three euler angles x,y,z in radians I would like to convert this to a Vector location X,Y,Z with center as origin.

So if its possible to use https://threejs.org/docs/#api/en/math/Euler.toVector3 to get the Vector, i would like to know how. And also the alternate mathematical(sin/cos) solution is also appreciated.

so in this snippet axesHelper represents the angle and the cube should be at the location based on the euler.Use Dat gui to live edit the rotations.

//add Axis to represent Euler
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

//add 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)
}

fake visual representation cube following the axes Y axis

related: but has problem with axis matching How to convert Euler angles to directional vector?

score 1 · Answer 1 · answered Dec 21 '20 at 22:02

1

Euler.toVector3() does not do what you are looking for. It just copies the x, y and z angles into the respective vector components.

I think you should have a look at THREE.Spherical which is an implementation for using spherical coordinates. You can express a point in 3D space with two angles (phi and theta) and a radius. It's then possible to use these data to setup an instance of Vector3 via Vector3.setFromSpherical() or Vector3.setFromSphericalCoords().

answered Dec 21 '20 at 22:02

Mugen87

28,829
4
27
50

` vec.setFromSphericalCoords(1, radX,radZ,)` is Very close ..its properly tracking the Y axis now but rotating the Z has absolutely zero impact. – Prime007 Dec 22 '20 at 16:05

Mom Mam · Answer 2 · 2022-09-06T18:56:40.410

0

im very not sure whats going on but

let vec = new THREE.Vector3(0, 0, 1).applyEuler(eul)

worked for me

also check this: https://github.com/mrdoob/three.js/issues/1606

edited Sep 06 '22 at 18:56

answered Sep 05 '22 at 22:38

Mom Mam

91
6

I think it gives me the wrong values – Guy Luz May 23 '23 at 13:41

Convert Euler angle to Vector using .Euler's "setFromVector3"

2 Answers2