Three Interaction on small objects

Questions
, ,
1

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?

2

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
3

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

4

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.