I am currently trying to implment interactions in my scene. I am not sure on whether to roll my own Raycaster OR use the interaction library https://github.com/jasonChen1982/three.interaction.js (I realise these libs can get a bit out of date…)
Can anyone advise on the latest recommendation for new projects?
Third party plugins can provide nice shortcuts but as you say they can quickly get out of date. In the worst case, you can’t even use it with the latest version of three.js.
I personally would recommend to directly work with Raycaster. The official demos provide a lot of sample code in this context that can be used to implement interaction in your own application. Just search for new THREE.Raycaster() in the examples folder to find the relevant demos. The following are especially important:
1 Like
Thanks I can’t get the interaction lib to work anyway so will try Raycaster now…
The problem with raycasting is that you’re still a long way from proper interaction. There is no bubbling at all, you can’t raycast groups, and so many other issues (touch, resize, nested canvas, scroll areas, etc). It’s the hardest part to get right.
I have written a full pointer events implementation for react. I don’t think you will find an easier way to interact with three. It’s also compatible with any lib that works with pointer events in general, so you can bind it to gestures, drag n drop etc. It will also not outdate, ever, since it’s not tied to a particular three version.
If you roll your own, you could use the source, the complete event part is marked in canvas.tsx, it’s one relatively self contained blob.
Nice, sounds comprehensive. At the moment I just need a click on the right mesh and trigger some actions. I’ve just got Raycasting to work I think, but I’ll take a look at your link when I surely realise that isnt enough!