CSS2DRenderer with morphTargets - is this possible?

I’m using CSS2DRenderer to render labels above Points in an example here which works great (thanks to this answer).

https://jsfiddle.net/shashank2104/9dc5eq8o/5/

But now if the model has morphTargets which are animated using THREE.AnimationMixer, is there a way these labels animate along with the vertices update? And as the AnimationMixer’s update function is called in the render function, I don’t see any way to notice the current vertices of the Geometry that are being rendered as it looks like the AnimationTracks take care of that stuff.

If there’s any example, I’d appreciate if I could get a reference to the link and I can look at the code. Thanks.

I got this working.

  1. Get the active morph target based on the morphTargetInfluences

  2. Loop over the vertices and accordingly positon the labels:

    activeMorphTarget.vertices.forEach(function (v, idx) {
           
    // animation mixer's root's children will be the labels added using the CSS2DRenderer (check fiddle)`
        AnimationMixerInstance.getRoot().children[idx].position.copy(v);
    });
    

I’ll update my fiddle with a few morphTargets and this animation fix soon.

Thanks for the help @mjurczyk .

1 Like