Finding closest object to dragged object

I have a horizontal array of boxes, evenly spaced with gaps half the width of each.

Whenever one is dragged (constricted to the horizontal), it parses through a list of the others I create when it’s clicked.

The only other box that recognizes they’re being overlapped is the LAST in the for each loop.

Is there a commonly used method that will give me results for each “other” box, not just the LAST?

Or maybe a three.js built in method?

Possibly JUST finding the CLOSEST “other” square and execute a function for just that one?


Please show what you do with a live example. Or try to visualize your issue with a few screenshots.

Right now, it’s a bit hard to understand what you are looking for.

Sigh, yeah the way I combine my THREE.js code into projects is very difficult to show my work. (I use verge 3d plus lots of JS).

I found I needed to use “LET” in my loops of object arrays as to call a function on each item (outside my loop scope) instead of only the last one, as my for loop and forEach attempts had been doing.

Sorry, didn’t work…I’ll try better to explain…

I have 4 GREEN cubes, draggable on the horizontal axis.

I have all of them set with bounding boxes (Box3).

Whenever any of them are dragged over any other cube, the dragged one should turn RED.

The problem is, the dragged cube ONLY turns RED when dragged over the LAST cube in the for loop that is parsed.

Ie: the cubes are A,B,C,D.

A,B & C only turn red over D.
D only turns Red over C.

An if statement makes sure the loop doesn’t include the dragged cube in its comparisons.

I’ve tried using “LET” and setTimeout, and callbacks…
…all same result.

Driving me mad.
Any help would be seriously appreciated.

This was solved with help in the discord.
I had to break out of the loop and return a Boolean when bbox collision occurred.