In the last post we talked about a recent optimization to Dasher 360, where we implemented a point cloud rather than individual SVG-based markers for our various sensors. As mentioned, last time, this was pretty straightforward to get working, but did add some complexity: rather than having seperate DOM-resident markers – which can easily have separate tooltips assigned – we now have a single object and need to be able to display tooltips when individual points in the cloud are hovered over.
Here’s the basic algorithm we used to determine when an individual sensor was being hovered over:
- Implement a ‘mousemove’ event listener on the viewer’s container. The rest of this algorithm is executed on mouse move.
- Check whether the cursor is on a UI element (see below for more details on this).
- Fire a ray along the camera direction (there’s code for this you can find in the Forge viewer .js file).
- Check for intersections with our point cloud.
- If there are hits, filter…