Attaching text to Points as annotations which animate

How do I assign texts to every points in this example (the reference billiards example)? Basically I’m trying to add annotations to every point right above them which move along with the points as they animate.

https://jsfiddle.net/shashank2104/vtbcqh31/11/

I couldn’t find a single example where a Text was meshed up with a Point.

In my project, I have similar set of points which also have morphTargets and usage of AnimationMixer and so the ShaderMaterial I tried referring to one of the other examples didn’t work out.

Can someone please help me out here with examples that I can look into or any kind of approaches that I can carry out to get this done? Thanks.

You can attach text labels to any position - it doesn’t have to be necessarily a model or a mesh, like it’s done in the examples. Each vertex you generate is a position itself, so it’s enough to attach a label to that position:

Something like this:

https://jsfiddle.net/731L6crq/

It is understandably a bit hard to see how the geometries are constructed right now, because console logs are absolutely crowded with unnecessary warnings and deprecations, but we have an open issue that is definitely going to be finally fixed and merged soon instead of just acknowledging the problem and moving on without a solution, so be sure to pop a :+1: on this github issue, thx! :’)

Great. Thanks a lot. I’ll use that CSS2DRenderer to implement labels in my project as well. Appreciate the quick response. And yes, will do that. :slight_smile:

Also if you have a quick minute, is there a way I can make those points look more 3D? I mean I tried used SphereGeometry for all the points but couldn’t get the morphtargets working with any type of material.
I mean the texture disc.png looks good but can we make them look more 3D by any chance?

Thanks again.

You may need to use spheres for that, instead of points. For what I know, it’s not possible to apply normal or displacement maps to PointsMaterial, and they are always rendered just flat.

If you have 1000s of points you can mix using spheres, billboards, and LOD to get the best performance (at some distance it wouldn’t really matter if you render a point as a 3D sphere or a flat image, since they look the same, so you may save some performance with that.)

Okay thanks. I’ll try to come up with an example of how I use spheres in my project with at least a couple of morphTargets and post it as a fiddle and create a new question. Thanks a lot for your help.

Sorry to bother you again @mjurczyk but I used the CSS2DRenderer logic in my project and it works great with dragging/zooming etc. But for some reason the labels doesn’t work/animate while the points use the morphTargets to animate. Can you please direct me to where I should look at and get this working?

I mean there are 2000+ morphTargets in one of the models so would I be adding the labels in each morphTarget separately? If yes, how do I remove the old labels?

Also the labels are offset for some reason (maybe because I rotate the mesh of points):