Use Animation Clip to Move the End-point of a Line

Questions
,
1

Hello,

Is it possible to use an animation clip to move the end-point of a line?

I create a line:

	let points = [];
	points.push( new THREE.Vector3(0, 0, 0) );
	points.push( new THREE.Vector3(0.5, 0.5, 0.5) );
	const geometry = new THREE.BufferGeometry().setFromPoints( points );
	const line = new THREE.Line( geometry, material );
	scene.add( line );

then later in code, I add a KeyFrame to an existing animation clip:

	let times = [ 0, 2 ];
	let values = [ 0.5, 0.5, 0.5 , 1.0, 1.0, 1.0 ];
	let name = line.uuid + '.geometry.attributes.position.array[3]';
	const moveKF = new VectorKeyframeTrack(name, times, values);
	existing_animation.tracks.push(moveKF);

But when I play the animation, the ‘bind’ code uses the scene group in place of the Line (via uuid) and fails to resolve the ‘property’ properly.

Is there a proper way to do this?

Thanks.

2

Try it with morph targets instead. Meaning you create a morph attribute of your final line state and then use the animation system to animate between the base and morphed geometry.

3

Mugen87 thank you for the lead (and necessary keyword) to find it.

My now working code looks like this…

I create a line:

	let begPos = [];
	begPos[0] = 0; // beginning point-0-x
	begPos[1] = 0; // beginning point-0-y
	begPos[2] = 0; // beginning point-0-z
	begPos[3] = .5; // beginning point-1-x
	begPos[4] = .5; // beginning point-1-y
	begPos[5] = .5; // beginning point-1-z
	let begAttr = new THREE.Float32BufferAttribute( begPos, 3 );
	const geometry = new THREE.BufferGeometry();
	geometry.setAttribute( 'position', begAttr, 3 );
	let endPos = [];
	endPos[0] = 0; // beginning point-0-x
	endPos[1] = 0; // beginning point-0-y
	endPos[2] = 0; // beginning point-0-z
	endPos[3] = 1; // beginning point-1-x
	endPos[4] = 1; // beginning point-1-y
	endPos[5] = 1; // beginning point-1-z
	let endAttr = new THREE.Float32BufferAttribute( endPos, 3 );
	geometry.morphAttributes.position = [ endAttr ];
	const line = new THREE.Line( geometry, material );
	line.morphTargetInfluences = [ 0 ]; // 1 entry array, values 0 - no influence to start
	scene.add( line );

then later in my code, I add a keyFrame to an existing animation clip that changes the morphTargetInfluences:

	let times = [ 0, 2 ];
	let values = [ 0, 1 ];
	let name = line.uuid + '.morphTargetInfluences[0]';
	const morphKF = new NumberKeyframeTrack(name, times, values);
	existing_animation.tracks.push(morphKF);

The animation morphs the line from P1 (0,0,0) - P2 (.5,.5,.5) into
the line P1 (0,0,0) - P2 (1,1,1) over a 2 second time period.

Things I learned along the way:

  1. the items you are morphing between MUST match!!! A 6 entry array of 1 item each DOES NOT match up with a 2 entry array of 3 items each.

  2. the morph entries are all arrays (even if there is only 1 entry).

  3. the morphTargetInfluences goes on the object (in this case the Line) that hold the geometry.

Hopefully someone else finds this example and notes helpful.

  • Happy Coding!