Contribution : update times and values of KeyframeTrack on the fly

Questions
1

Hi community :slight_smile:
At the moment, I’m working on animation system of three js.
In my case, I want to move an object on the plane to the “click” position and it working :wink:
For that, I created a new KeyframeTrack called “moveTo”.
But I don’t see a solution to update values and times properties because interpolants need to be updated too.
This is my code to do that :

  var moveAction = this.moveAction, // type : THREE.AnimationAction
      mixer = moveAction.getMixer(), // type : THREE.AnimationMixer
      moveClip = moveAction.getClip(), // type : THREE.AnimationClip
      moveKeyTrack = moveClip.tracks[0], // type : THREE.KeyframeTrack
      times = [0,duration], // new times : 0 to duration
      values = [prevPos.x, prevPos.y, prevPos.z, newPos.x, newPos.y, newPos.z]; // new values : previous position to new.


  // update KeyframeTrack :
  moveKeyTrack.times = THREE.AnimationUtils.convertArray(times, moveKeyTrack.TimeBufferType)
  moveKeyTrack.values = THREE.AnimationUtils.convertArray(values, moveKeyTrack.TimeBufferType)
  moveKeyTrack.validate(); // validate it


  // update clip :
  moveClip.duration = duration;
  moveClip.optimize();

  // update action
  var tracks = moveClip.tracks,
  		nTracks = tracks.length,
  		interpolants = new Array( nTracks );

	var interpolantSettings = {
		endingStart: THREE.ZeroCurvatureEnding,
		endingEnd: THREE.ZeroCurvatureEnding
	};

	for ( var i = 0; i !== nTracks; ++ i ) {

		var interpolant = tracks[ i ].createInterpolant( null );
		interpolants[ i ] = interpolant;
		interpolant.settings = interpolantSettings;

	}

	moveAction._interpolantSettings = interpolantSettings;

	moveAction._interpolants = interpolants;	// bound by the mixer

  mixer._bindAction(moveAction); // bind to mixer
  moveAction.reset();

With this, we don’t need to remove action, clip and keyTrack to recreate it each time.
Of course, we need to adapt this to threeJs.
If a way already exist, say me :wink:

What do you think ?

Have a nice day,
Pierre.

2

For a movement like this you shouldn’t use a timeline, you rather just interpolate the motion procedurally. Keyframes are supposed to be used for non-dyanmic animations like skeletal animation or cutscenes.

3

Thanks for your answer :slight_smile:
You mean directly move it in render loop like this :
startPos + ( (endPos - startPos) * time / duration ).