Implement ThreeJS Interactive + multiple NFT

[vincenzobologna]

Hallo @kalwalt,

i moved to this package from your ARnft wonderfull kit because i need to load multiple NFT markers and with this one the performance are better. Very powerfull!

Now i moving interactions for each marker here with this package and i pretty done the task, attaching the following event listener to each geometry i linked to each target:

geometry.addEventListener('mousedown', (e) => {
        e.stopPropagation()
        if(marker.name === e.target.name && e.intersected === true) console.log('[found!]', marker.name, e)
})

Where geometry is the object where i setup the geometry (a simple PlaneGeometry with a texture) and marker is the object where i store metadata linked to the target. In this case, with the interaction simply log the name of object.

The issue: when i add more than one marker in scene. Sometimes fired mousedown event intersect the wrong geometry and respond with a log of another marker and not the clicked one. I tried to compare wrong fired event with the right one, but the only differences between them are in "distance" property, but the float number cant help me to filter events, because i haven't a usefull comparing range number.

The question: how can i filter the wrong fired events? Becaues it seems the InteractionManager can't perform well clicked geometries appeared in scene. Anyone encounter this issue? How you resolved it?

My configuration is:

• jsartoolkit v. 1.7.0
• Three Interactive (https://github.com/markuslerner/THREE.Interactive) v. 1.7.0

Thanks in advance