Three.js hotspots

[UI_UNICORN]

Hello wonderful people,
So I am new to three js and I am currently looking into attaching hotspots to my scene
and I am wondering if anyone has ever used this lib:

pablanka/threejs-hotspots

and if there are any demos out there ? as I can’t seem to find any.
or if you have any suggestion about adding hotspots to a scene (the scene is a .gltf)
Thanks alot!

[Mugen87]

Maybe related:

How to create Sketchfab like annotations with Three.js?

Check this example I have created the hotspot/annotation but I can’t find a logic to detect a marker if it goes behind the camera’s field of view So I have tried a couple of methods already Based on distance between hotspot and camera didn’t work Angle between normal of hotspot and camera didn’t work Using raycasters is computationally heavy and hard to work with the scene just has a GLTF and hotspots and camera So I made render of GLTF to 1000 and hotspot to 1100 and set t…

[marquizzo]

I wouldn’t use that library. Three.js already ships with a CSS2DRenderer that’s more streamlined with the rest of the library.

You can see an example of it here, the Earth & Moon labels are just <div>s with CSS transforms. You can easily bind these to .addEventListener() like any other HTMLDom element.