How to draw region of interest with mouse on 3d model?

Questions
, , , , , ,
1

How to draw a region of interest with mouse. Like a labelling some part of my 3d model.
Screenshot from 2022-08-17 19-00-23

2

I’m not sure which is the region of interest in your image: the blue rectangle, the green circle, the text above them or all of them. Anyway, you could approach this in various ways:

  • if it’s about actual drawing with the mouse, having some appropriate event listeners for the pointerdown, pointermove and pointerup coupled with a Three.js Raycaster to determine the point of intersection of the ray from the mouse coordinates along the camera direction with the object could help you establish the “center” of your point of interest and allow you to draw whatever shape you want according to or around that
  • if it’s about placing some “selection” shape at mouse coordinates, you could either try to change the mouse cursor from CSS, or use some of the above listeners to move an image based on the mouse coordinates (not sure if it’s what you’re after, but you can see how CSS tooltips can be made, or just move a div with some dynamic text according to the mouse coordinates on the canvas)
  • if it’s about projecting some shape or similar on the object the mouse is over, the complexity increases, but you could adapt and combine the raycaster / mousemove part with an example like this by @prisoner849 to try to achieve the desired effect

It really depends on what you’re after, how easy or ellaborate you want it to be, and probably on how much effort you want to put into it. Personally, I’d go with some fixed shape and some tooltip text above, or if the objects are somewhat separated, you could try to set the shape’s size based on the geometry’s boundingBox, for more flexibility.