Mouse click event in 3d - WEBGL

yanivasaf

Hi

I created a box out of planes. I'm trying to find a way to click on each plane (creating like a cube navigation).

How do i do it while using translate for location? Thanks

`let moveX; let moveY; let varx; let vary; let varinc;

function setup() { createCanvas(windowWidth, windowHeight, WEBGL);

}

function moveCube(){ moveX= map(mouseX, 0,width, 0,360); moveY= map(mouseY,0,height,0,360); rot(); thebox();

}

function rot(){ rotateX(-moveY * 0.01); rotateY(-moveX * 0.01); rotateZ(frameCount*0.007); }

function cubeNoise(){ varx = map(noise(varinc),0,1,-150,150); vary = map(noise(varinc),0,1,-150,150);

varinc+=0.003;

}

function draw() { background(250); orbitControl();

//cubeNoise(); push(); //translate(varx,vary); moveCube(); pop(); }

function thebox(){ fill(250,0,0);//red plane(250);

push();
translate(-125,0,-125);
rotateY(radians(90));
fill(0,250,0);//green
plane(250);
pop();

push();
translate(125,0,-125);
rotateY(radians(90));
fill(0,0,250);//blue
plane(250);
pop();

push();
translate(0,-125,-125);
rotateX(radians(90));
fill(200,50,200);//pink
plane(250);
pop();

push();
translate(0,-125,-125);
rotateX(radians(90));
fill(200,50,200);//pink
plane(250);
pop();

push(); translate(0,125,-125); rotateX(radians(90)); fill(150,150,150);//gray plane(250); pop();

push(); translate(0,0,-250);

fill(0);//gray
plane(250);
pop();

}

function screens{ var trx; var try; translate(-width/2, -height/2); for (var i = 0; i<9; i++){ push(); translate(

`

nabr

I think you have two options:
- Ray Picking (shooting a Ray and see what it hits)
- Color Picking (see if the MousePostion match with a deserved Color)

I don't think either one is implemented in p5js direcly.

i found this via goole, (if you know what to searing for)

https://gist.github.com/sixhat/5bcf3b8d159e7285e247a96c1cbf055f#file-sketch-js-L137