Mouse interaction with 3D objects / objects on 3D plane

p5.js Coding Questions
1

Hi,
I’m looking for a way to interact (preferably mouseOver) with ellipses here: http://dev.furu.studio/sandbox/p5js/ .

I tried using libraries from https://p5js.org/libraries/ but they do not work with 3d. I tried using createGraphics() but it destroys my CPU.

Does anyone have an idea how to implement this interaction?

Cheers,
Stan

1 Like
2

Basically when you draw the ellipses (with all translate and rotate in place) zse screenX and screenY to store its 2D position

check this position against mouse pos

2 Likes
3

Thanks for the fast reply. I will try to implement it right away and let you know about the result. Cheers!

1 Like
4

@Chrisir so I tried to implement the solution you mention but it seems I may be doing it wrong.

As you can see in the editor below the ellipse is positoned correctly relative to the center of canvas but the coordinates it is getting from screenPosition() when checked against mouseX/Y are relative to the 0,0 screen corner (you can trigger the color change by hovering your mouse around the top left corner instead of the object itself).

https://editor.p5js.org/furu-studio/sketches/MKrwttS5I

Can you point out what I am doing wrong?

5

Actually no.

use text() to show the value of b0 - seems always to be of value 0

1 Like
6

Thanks for the tip. screenPosition works great but in my case it required some additional computation which I added in the editor. Thanks again @Chrisir. Marked as resolved.

1 Like