// rx, ry and rz are target radians
var euler = new THREE.Euler(rx,ry,rz);
var quaternion = new THREE.Quaternion();
quaternion.setFromEuler(euler);
object.rotation.setFromQuaternion( quaternion )

However, the results are not what we expected. Could be an issue on our end. We’re trying to build a simple keyframe system to change position and rotation over time. Position works great but the rotation is always a mess.

What range of values do your radian variables have? Quaternions cannot express >180 degrees, so if you Euler radian values are greater than that, you will lose some information.

BTW with code you are creating an Euler, converting it to a Quaternion, and the converting it back to an Euler (object.rotation):

var euler = new THREE.Euler(rx,ry,rz);
var quaternion = new THREE.Quaternion();
quaternion.setFromEuler(euler);
object.rotation.setFromQuaternion( quaternion )

You would be better off using object.quaternion directly.

Without knowing what results you were hoping for and seeing the rest of your code, I can’t help you any more here. Can you please create a minimal working example that demonstrates the issue, using Codepen.io or a similar site?

The solution was to create keyframes using an object’s quaternion _x, _y, _z and _w values. During video playback, new, normalized quaternions are created with target values that the object’s rotation is set to.