Three.interaction Replacement

Three.interaction ( https://github.com/jasonChen1982/three.interaction.js )
Is really an intuitive solution for touch and click handling.
This lib now fails to install from NPM because of Version conflicts.

Can anyone recommend another library that provides similar convenient event handling?
E.g. myObject3d.on( “click” , …) , myObject.on(“drag”,…)

It would be great to add this library to the /jsm/controls/ collection along with OrbitControls. So intuitive.

( Please comment only if you have suggestion for replacement with similar and convenient lib events: touch, drag, click eventing all handled - not manual ray tracing etc. )

I think it’s better if such abstractions are implemented in third party libraries. It does not make sense to integrate literally every useful third party plugin into the main repository. If we would do that, we would have no time anymore to develop the core. TBH, it’s already hard to do this because too much code exists in examples (which ties up too many resources of the core developers).

might not be what youre looking for but this contains a full implementation of the pointer events spec, stopPropagation, capture and all: GitHub - pmndrs/react-three-fiber: 🇨🇭 A React renderer for Three.js because of that it’s compatible with everything out there that handles vanilla events or gestures. it also has real bubbling implemented and can place events on groups or containers.

a couple of simple demos:

hover and clicks: https://codesandbox.io/s/r3f-basic-demo-rrppl0y8l4

drag using a 3d party gesture lib: React-Three-Fiber Gestures - CodeSandbox

a move involved demo linking interaction to ragdoll physics: https://codesandbox.io/s/use-cannon-ragdolls-skhf8

@Mugen87 thanks , yeah thats a good point, however Three.Controls/ has already integrated: TrackballControls, TransformControls, OrbitControls, FlyControls, DragControls, CameraControls, PointerLockControls, FirstPersonControls… Seems like TouchControls for basic interaction is more fundamental than all of the controls already integrated. Why leave out the most basic building block?

@drcmda that looks really cool thanks, would it work without React?

in order to handle events efficiently three would need a high-level layer, object lifecycles, mount/unmount phases. you may be able to re-use some of the code perhaps: https://github.com/pmndrs/react-three-fiber/blob/fc5d891b337d5781475d5a7d44287394fb263aea/src/canvas.tsx#L303-L568 but i doubt that it will ever be straight forward. most likely you end up hijacking three prototypes again and as you noticed, that’s not gonna work forever.

1 Like

Is there a replacement for this three.interaction library yet? A simple way to handle touch and click input?