Mouse click event in 3d - WEBGL

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(

`

Answers

Sign In or Register to comment.