Show Text During Model Rotation

Hi everyone,

I’m trying to figure out how can I achieve something like this on Three.JS?

When the user rotates the soccer ball, let’s say from left to right, and when the camera hits a certain part of the soccer ball, it will show the text assign there and hide the other texts. Same thing if the user rotates on a opposite side, it will open the text there.

The idea is something like this ( Earth 2050: A glimpse into the future | Kaspersky) but the difference is, the text will open once the camera hits the certain spot of the text. e.g. if it’s text 1, then it will be visible, if the user rotates the ball on the left and go to the section of text 2, then it will be visible and the text 1 will be hidden. I hope it does make sense.

So far, this is what I tried.

Maybe this topic and its examples will be helpful: Globe with markers and label: thoughts, ideas, approaches, solutions

I tried that kind of approach before but for me, wrapping a glb model caused a performance issue that it ended up being glitchy and the performance is poor.