# 3D Shape picking in p5.js

**URL:** <https://discourse.processing.org/t/3d-shape-picking-in-p5-js/39778>\
**Category:** Gallery\
**Created:** [November 18, 2022, 3:58pm UTC](https://discourse.processing.org/t/3d-shape-picking-in-p5-js/39778 "2022-11-18T15:58:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 18, 2022, 3:58pm UTC](https://discourse.processing.org/t/3d-shape-picking-in-p5-js/39778/1 "2022-11-18T15:58:54Z")

</div>

I needed a 3D shape picker for p5.js so I used what I had learnt from mixing 3D and 2D in canvasGUI to create my own. In the Jetsons sketch the boxes were created with the `box(...)` method and you can select any box by clicking on it. This was limiting so the second sketch allows you to select a face on a poker die. Both sketch use the same class for the 3D picking class.

The source code for both sketches can be found on OpenProcessing  
[Jetsons](https://openprocessing.org/sketch/1744933)  
[Poker Die](https://openprocessing.org/sketch/1745161)  
Although both sketches use instance mode the picking class works in global mode as well.

https://openprocessing.org/sketch/1744933/embed/https://openprocessing.org/sketch/1745161/embed/

---

<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:** [November 18, 2022, 7:41pm UTC](https://discourse.processing.org/t/3d-shape-picking-in-p5-js/39778/2 "2022-11-18T19:41:13Z")

</div>

see also [screenX screenY equivalent in p5.js - #5 by bohnacker](https://discourse.processing.org/t/screenx-screeny-equivalent-in-p5-js/10581/5)

---

<div class="post-metadata">

**Author:** ![markcosmic](https://avatars.discourse-cdn.com/v4/letter/m/ecc23a/32.png) [@markcosmic](https://discourse.processing.org/u/markcosmic)\
**Post date:** [November 22, 2022, 5:46pm UTC](https://discourse.processing.org/t/3d-shape-picking-in-p5-js/39778/3 "2022-11-22T17:46:02Z")

</div>

I had the same difficulty when I created my website. I ended up using ThreeJs. What you are trying to do is called ray casting and P5 just can’t handle it like ThreeJs; yet.

> **[Three.js – JavaScript 3D Library](https://threejs.org)**

Check it out

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [November 22, 2022, 6:32pm UTC](https://discourse.processing.org/t/3d-shape-picking-in-p5-js/39778/4 "2022-11-22T18:32:03Z")

</div>

> [@markcosmic](#):
>
> What you are trying to do is called ray casting

Thanks, I already knew about ray-casting and I am not attempting to use it here.

In these examples I am using a color-picking algorithm because it is simple to implement and does what I need. It also has the advantage that p5.js can handle it with ease.

I also knew of Three.js but I am currently getting to grips with Javascript, Typescript and p5.js so I don’t want learn a new API just yet.