search

angular-threejs / angular-three

Angular Renderer for THREE.js
MIT License
184 stars 23 forks source link

Displaying tooltips #14

Closed peternelj closed 1 month ago

peternelj commented 1 year ago

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 1 year ago

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 1 year ago

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 1 year ago

can you share with me a threejs example?

peternelj commented 1 year ago

Sure, here is one from the Three.js: https://github.com/mrdoob/three.js/blob/70cc4e192fe2ebd0bf8542a81c8c513d61984c58/examples/css2d_label.html#L162-L184

nartc commented 1 year ago

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 https://github.com/pmndrs/react-three-fiber/discussions/1275

peternelj commented 1 year ago

Thanks for the help and looking forward to future updates.

nartc commented 1 month ago

HTML will be available in v2 (coming soon)