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

**URL:** https://discourse.processing.org/t/mouse-interaction-with-3d-objects-objects-on-3d-plane/19499
**Category:** Coding Questions
**Created:** [April 7, 2020, 10:55am UTC](https://discourse.processing.org/t/mouse-interaction-with-3d-objects-objects-on-3d-plane/19499 "2020-04-07T10:55:10Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Furu](https://avatars.discourse-cdn.com/v4/letter/f/ee7513/32.png) [@Furu](https://discourse.processing.org/u/Furu)
#### Post date: [April 7, 2020, 10:55am UTC](https://discourse.processing.org/t/mouse-interaction-with-3d-objects-objects-on-3d-plane/19499/1 "2020-04-07T10:55:10Z")

</div>

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

I tried using libraries from [https://p5js.org/libraries/](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

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 7, 2020, 11:25am UTC](https://discourse.processing.org/t/mouse-interaction-with-3d-objects-objects-on-3d-plane/19499/2 "2020-04-07T11:25:48Z")

</div>

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

> **[bohnacker/p5js-screenPosition](https://github.com/bohnacker/p5js-screenPosition)**
>
> This function provides a solution to the missing screenX and screenY functions in p5.js. See https://github.com/processing/p5.js/issues/1553 for the discussion. - bohnacker/p5js-screenPosition

---

<div class="post-metadata">

### Author: ![Furu](https://avatars.discourse-cdn.com/v4/letter/f/ee7513/32.png) [@Furu](https://discourse.processing.org/u/Furu)
#### Post date: [April 7, 2020, 12:08pm UTC](https://discourse.processing.org/t/mouse-interaction-with-3d-objects-objects-on-3d-plane/19499/3 "2020-04-07T12:08:04Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Furu](https://avatars.discourse-cdn.com/v4/letter/f/ee7513/32.png) [@Furu](https://discourse.processing.org/u/Furu)
#### Post date: [April 7, 2020, 1:10pm UTC](https://discourse.processing.org/t/mouse-interaction-with-3d-objects-objects-on-3d-plane/19499/4 "2020-04-07T13:10:58Z")

</div>

@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](https://editor.p5js.org/furu-studio/sketches/MKrwttS5I)

Can you point out what I am doing wrong?

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [April 7, 2020, 3:51pm UTC](https://discourse.processing.org/t/mouse-interaction-with-3d-objects-objects-on-3d-plane/19499/5 "2020-04-07T15:51:25Z")

</div>

Actually no.

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

---

<div class="post-metadata">

### Author: ![Furu](https://avatars.discourse-cdn.com/v4/letter/f/ee7513/32.png) [@Furu](https://discourse.processing.org/u/Furu)
#### Post date: [April 7, 2020, 7:16pm UTC](https://discourse.processing.org/t/mouse-interaction-with-3d-objects-objects-on-3d-plane/19499/6 "2020-04-07T19:16:52Z")

</div>

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.
