angular-threejs/angular-three

Displaying tooltips

peternelj opened this issue · 7 comments

peternelj commented

I'm working on a project using Angular-Three and I'm trying to figure out the best way to display tooltips on hover or click. In the react-three-fiber utility library, I saw that there is a component that allows for displaying HTML content and tying it to the object on the scene, but I can't find a similar component in the soba library.

I'm wondering if there is a recommended approach to achieve this in Angular-Three. Should I use THREE.Sprite objects or THREE.CSS3DObject objects to create the tooltips? Or is there another approach that would be better suited to angular-three?

Any advice or guidance would be greatly appreciated. Thank you!

nartc commented

Thank you for opening the issue. HTML is something I'd love to support, but I haven't figured out the best way to handle that just yet.

What would be the suggested way if you were using vanilla THREE.js? That would be my recommendation as of the moment.

peternelj commented

Thanks for the response. If I were to use CSS2DRenderer as in some examples on Three.js, what would be the suggested way of integrating it with angular-three as an additional renderer?

nartc commented

can you share with me a threejs example?

nartc commented

I see, yeah, this is going to be quite tricky to do. In reality, you can write the CSS2DRenderer with imperative style and everything should still work. Here's a couple of services to help

readonly document = inject(DOCUMENT); // the Document object via DI
readonly store = inject(NgtStore): // the NgtCanvas store, with all information about the current SceneGraph. eg: the GLRenderer, Camera, root Scene etc...

I think I'll get to HTML Component sooner than later because it is really easy to add HTML content to the Scene Graph pmndrs/react-three-fiber#1275

  • 👍1
peternelj commented

Thanks for the help and looking forward to future updates.

nartc commented

HTML will be available in v2 (coming soon)

  • 👍1