in threeJS: I have an object3D and want to do simple keyframed Animations with it: Move, Rotate, Scale.

There is a simple example here: but it does not work anymore since Animation has changed pletely animation rotation switched to quaternion in threeJS some time ago.

I am searching for a very simple example like that, but working with the new Animation system, i already googled it and did find nothing. There is no documentation on the threeJS Page.

Using Blender or Collada to create the animation is not an option, since i have imported the model from a step file, which is supported by neither one.

EDIT I have solved the problem with the example, but i still have problems, since i want to animate a nested Object3d, but only the root Object3d, so i specified keys only for the root object not the whole hierarchy. But it throws an error cause the animation keys hierarchy has not the same structure than the root Object3d hierarchy. But this is another problem and needs another question

in threeJS: I have an object3D and want to do simple keyframed Animations with it: Move, Rotate, Scale.

There is a simple example here: https://threejs/examples/#misc_animation_keys but it does not work anymore since Animation has changed pletely animation rotation switched to quaternion in threeJS some time ago.

I am searching for a very simple example like that, but working with the new Animation system, i already googled it and did find nothing. There is no documentation on the threeJS Page.

Using Blender or Collada to create the animation is not an option, since i have imported the model from a step file, which is supported by neither one.

EDIT I have solved the problem with the example, but i still have problems, since i want to animate a nested Object3d, but only the root Object3d, so i specified keys only for the root object not the whole hierarchy. But it throws an error cause the animation keys hierarchy has not the same structure than the root Object3d hierarchy. But this is another problem and needs another question

• javascript
• animation
• three.js

3 Answers 3

The problem with the example was, that rotation in animation keys is now specified as quaternion, not as Euler rotation like in the example. So adding a fourth value (1) to the rotation param made it work.

Finally found one good example with setting desired values in key frames:

Misc animation keys

Full source can be found by inspecting that page.

Here is pasted essential part:

// create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
// Note: the keyframe track type should correspond to the type of the property being animated

// POSITION
var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );

// SCALE
var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );

// ROTATION
// Rotation should be performed using quaternions, using a QuaternionKeyframeTrack
// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported

// set up rotation about x axis
var xAxis = new THREE.Vector3( 1, 0, 0 );

var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );

// COLOR
var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );

// OPACITY
var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );

// create an animation sequence with the tracks
// If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );

// setup the AnimationMixer
mixer = new THREE.AnimationMixer( mesh );

// create a ClipAction and set it to play
var clipAction = mixer.clipAction( clip );
clipAction.play();

Animation has 3 key frames [0,1,2] = [initial,final,initial]

Position array [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] means (0,0,0) -> (30,0,0) -> (0,0,0)

I find only this one:

https://github./mrdoob/three.js/blob/master/examples/webgl_animation_scene.html

Also, was able to write one myself:

//Let's create a mesh
this.mesh = new THREE.Mesh( geometry, material );
    
this.clock = new THREE.Clock();
    
//Save this mixer somewhere
this.mixer = new THREE.AnimationMixer( this.mesh );
let animation = THREE.AnimationClipCreator.CreateRotationAnimation(100, "y");
this.mixer.clipAction(animation ).play();
    
//In the animation block of your scene:
var delta = 0.75 * clock.getDelta();
this.mixer.update( delta );

This is going to rotate the given mesh around of the y axis.