Three Interaction on small objects

Hi there, I’ve created a threejs set up with lots of small spheres flying around and users being able to click on those to interact.

I’ve used three.interaction to get it to work:
https://jasonchen1982.github.io/three.interaction.js/docs/index.html

It works perfectly fine on a regular desktop using a mouse, but on touch screens it is struggling, I guess the touch screen area events are too large/fuzzy to pick up on the small spheres. I am wondering if there is a way around it, e.g. is it possible to increase the hit area of the spheres beyond their actual visible size?

Haven’t used three.interaction, but you could create larger spheres inside of the smaller ones, and set sphere.visible = false, and listen for touch events on those.

1 Like

Or use THREE.Sphere(). Or modify (scale) the bounding sphere of the object’s geometry (if it’s possible, I haven’t tried it).

Thanks for the tips guys, creating a second larger invisible sphere on top did the trick, simple but effective solution, should have thought of it :slight_smile: visible=false doesn’t work though, but with opacity=0 it will still pick up on ui events.