CODEWITHSUNDEEP
javascriptvectorthree.jseuler-angles
Prime007
Prime007

Reputation: 11

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

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?

Upvotes: 1

Views: 2045

Answers (2)

Mom Mam
Mom Mam

Reputation: 111

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

Upvotes: 1

Mugen87
Mugen87

Reputation: 31026

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().

Upvotes: 1

Related Questions