Hello, I’m facing an issue with a horizontal plane mesh that covers everything beneath it. This plane allows me to create pipes when I click on it while in “pipeCreation” mode (which activates when I click on one of the blue balls). I’m trying to implement a feature where I can automatically create a pipe by clicking directly on one of the balls to connect them. However, I’m encountering a problem: since the plane covers what’s beneath it, clicking on a ball below triggers the plane’s event, which is undesirable for me when I’m in “pipeCreation” mode. Do you have any ideas on how I can address this issue? Just to clarify: I’m using react-three-fiber.
When not in pipeCréation mode
When in pipeCreation mode
Also, do you know why some things become invisible when my plane appears?
raycaster just shoots a ray through the scene and everything it picks up will get an event, nearest to camera first and then the rest according to distance. you can stop the stack any time with event.stopPropagation().
if you want items below respond but not items near the camera either tell the closer items that you’re in pipe mode or whatever and that they should skip the event (i would prefer that), or give fiber an event filter where you can alter the order of items the raycaster picked up so that calling stopPropagation on the ball will stop the rest from happening.
2 Likes
if you look for transparency issues in threejs you will find solutions. depthWrite, depthTest, polygonOffset, renderOrder, lots of properties that affect how and in which order things render.
1 Like
To my great dismay, when I’m in ‘pipeCreation’ mode and click on the plane, it makes sense, so I can’t just ignore the click because the rest of the time, this is the behavior I want to have. So if I understand correctly, I should be able to manage the raycasting hierarchy to somehow ensure that the balls take priority.
This might not be the best solution nor recommended practice (I’m new to three.js myself), but peharps you could use onPointerEnter and onPointerLeave on the circles to disable the plane whenever the pointer is on top of the circles. Of course in that scenario you shouldn’t have stopPropagation on the plane’s onPointerMove
