Animating LineSegments in THREE.js

Question

I have a solid MorphBlendMesh that is overlayed with a LineSegments object using EdgesGeometry/LineBasicMaterial in order to create a wireframe look without the "diagonals" that result from the triangle approach in newer versions of three.js. The problem is that I cannot find a way to get LineSegments to animate along with the mesh, presumably because it isn't a mesh, its simply an Object3D.

Is there a way to animate a LineSegments object with AnimationMixer? Or replicate this same look with a mesh setup that works well with AnimationMixer?

For reference, my question is essentially an expansion of this question -- same idea, but it MUST be capable of animation with AnimationMixer.

Rotating? I think you might be misunderstanding, I'm not trying to rotate the mesh, but animate it using AnimationMixer/morphTargets, etc. — psOneOneOne, Mar 13 '18 at 16:59

score 1 · Answer 1 · answered Apr 02 '20 at 15:18

You can attach an arbitrary property to the mixer. This property will hold the vertices.

    const a: any = ((lines.geometry as THREE.BufferGeometry).attributes.position as BufferAttribute)
      .array;
    const p: any = (line.geometry as any).attributes.position.array;
    (lines as any).value = [...a];


    const keyFrame2 = new THREE.NumberKeyframeTrack(
      '.value',
      [0,1],
      [...a, ...p],
      THREE.InterpolateSmooth
    );
    this.lineGeometriesToUpdate.push(lines as THREE.LineSegments);
    const clip2 = new THREE.AnimationClip('lines', 1, [keyFrame2]);
    const mixer2 = new THREE.AnimationMixer(lines);
    const ca2 = mixer2.clipAction(clip2);
    this.mixer.push(mixer2);

Then, in your animation loop, you use this property to update the geometry

this.lineGeometriesToUpdate.forEach(l => {
      const geom = l.geometry as THREE.BufferGeometry;
      const values = (l as any).value;
      geom.setAttribute('position', new THREE.BufferAttribute(new Float32Array(values), 3));
      (geom.attributes.position as BufferAttribute).needsUpdate = true; 
});

this.renderScene();

Animating LineSegments in THREE.js

1 Answers1