# Webgl 3d point mouse interaction

**URL:** https://discourse.processing.org/t/webgl-3d-point-mouse-interaction/22526
**Category:** Coding Questions
**Created:** [July 10, 2020, 10:25am UTC](https://discourse.processing.org/t/webgl-3d-point-mouse-interaction/22526 "2020-07-10T10:25:58Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![nomad](https://avatars.discourse-cdn.com/v4/letter/n/ecae2f/32.png) [@nomad](https://discourse.processing.org/u/nomad)
#### Post date: [July 10, 2020, 10:25am UTC](https://discourse.processing.org/t/webgl-3d-point-mouse-interaction/22526/1 "2020-07-10T10:25:58Z")

</div>

Hello there,

I have a collection of points in 3d space. they are rotating around a center. Would like to create a simple mouse interaction where they change color when I hover the mouse on them.  
my code is as follows

```auto
 var w,h,angle,r;
function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  setAttributes('antialias', true);
  w = windowWidth;
  h = windowHeight;

angle =0;

}

function draw() {
  background(0);
angle = angle+1;

if(angle>=360){
  angle=0;
}

push();
translate(0,0,0);

rotateY(radians(angle));

////////////// How do i resolve this mouse interaction with the point

if(mouseX && mouseY ){
  stroke(255,255,0);
  strokeWeight(40);

}
else{
  stroke(255,0,0);
  strokeWeight(20);

}

////////////// How do i resolve this mouse interaction with the point
r =w/2;

beginShape(POINTS);
vertex(10,10,r);
vertex(80,500,r);
endShape();
pop();

}

```

Many thanks in advance  
😄

---

<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: [July 10, 2020, 11:09am UTC](https://discourse.processing.org/t/webgl-3d-point-mouse-interaction/22526/2 "2020-07-10T11:09:50Z")

</div>

You can use this in addition with dist(mouseX , mouseY, …

> [@screenX screenY equivalent in p5.js](https://discourse.processing.org/t/screenx-screeny-equivalent-in-p5-js/10581/5):
>
> I’ve seen that there are many others with the same problem. So I’ve decided to build a small library that adds this functionality to p5js. You’ll find the library here: And an example of how it’s used here: [https://editor.p5js.org/bohnacker/sketches/nUk3bVW7b](https://editor.p5js.org/bohnacker/sketches/nUk3bVW7b)

---

<div class="post-metadata">

### Author: ![nomad](https://avatars.discourse-cdn.com/v4/letter/n/ecae2f/32.png) [@nomad](https://discourse.processing.org/u/nomad)
#### Post date: [July 10, 2020, 4:26pm UTC](https://discourse.processing.org/t/webgl-3d-point-mouse-interaction/22526/3 "2020-07-10T16:26:34Z")

</div>

Thank you @Chrisir !

was going through the shared thread and found the off screen buffer method as an easier solution for my case.