How to rotate Vector3 with x degrees(vertical) and y degrees(horizontal)?

Questions
,
1

I want to rotate Vector3 with x degrees(vertical) and y degrees(horizontal).

So I created an Euler and rotated the vector with applyEuler.

I thought the angle between cameraVector and vector would then be equal to the first rotation (x: 30), but the actual value is 27.809374…

Can you explain the reason for this and what is the correct way to do it?

    const cameraPosition = new Vector3(0, 0, 0)
	const cameraPositionDot = new Mesh(new SphereGeometry(0.05, 64, 64), new MeshBasicMaterial({ color: 0x0000ff }))
	cameraPositionDot.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z)
	G.scene.add(cameraPositionDot)

	const cameraVector = new Vector3(2, 3, 4)
	const nCameraVector = cameraVector.normalize()
	const cameraPositionVectorArrow = new ArrowHelper(nCameraVector, cameraPosition, 1, 0x00ffff)
	G.scene.add(cameraPositionVectorArrow)

	const currentRotation = {
		x: 0,
		y: 30
	}

	const currentRotationEuler = new Euler(MathUtils.degToRad(currentRotation.x), MathUtils.degToRad(currentRotation.y), 0, 'XYZ')

	console.log(currentRotationEuler)

	const vector = cameraVector.clone().applyEuler(currentRotationEuler)
	const nVector = vector.normalize()
	const vectorArrow = new ArrowHelper(nVector, cameraPosition, 1, 0xff0000)
	G.scene.add(vectorArrow)

	const angleRadians = nCameraVector.angleTo(nVector)
	const angleDegrees = angleRadians * 180 / Math.PI
	console.log(angleDegrees) // theta
2

That’s because the rotated vector is not perpendicular to the rotation axis. Only then the angle of rotation will match the angle between starting and ending vectors.

Consider the extreme case, when the vector is parallel to the axis of rotation. In this case whatever the angle of rotation is, the angle between the two vectors will always be 0.

1 Like