Looking for advice on how best to animate a mesh

Questions
,
2

Maybe the following fiddle helps: three.js dev template - module - JSFiddle - Code Playground

The idea is to add data to BufferGeometry.morphAttributes. First, you define what attribute you want to animate e.g. the vertices:

geometry.morphAttributes.position = [];

In the next step you add morph targets to this array. Each morph target is represented as a buffer attribute that requires the same count and item size like the actual position attribute. In the fiddle the code just clones the existing position attribute and applies a random transformation to it:

for ( var i = 2; i <= 8; i ++ ) {

	var morphTarget = positionAttribute.clone();
	morphTarget.name = 'target_' + i;
	
	// generate some random morph data
	
	s.set( 1, 1, 1 ).multiplyScalar( Math.random() );
	morphTarget.applyMatrix4( m.identity().scale( s ) );
	
	// add it to the geometry
	
	geometry.morphAttributes.position.push( morphTarget );

}

You can then generate an animation clip from the defined morph targets:

var clip = THREE.AnimationClip.CreateFromMorphTargetSequence( 'clip', geometry.morphAttributes.position, 4 );

The second step of this workflow (the generation of morph targets) is application specific it will look different in your code.

4 Likes