# Getting Z coordinate in WEBGL with mouse

Like we have mouseX and mouseY for x and y coordinate by mouse click.
How can I get for the Z coordinate.
I need to add a box in the 3d blank space, wherever I click on that 3d blank.

1 Like

Hello,

I think you can buy a 3D mouse, I think there is something like this. To work with a 2D mouse is also possible.

Below is an example:

• When you click and hold mouse you can drag the box in the x/y plane.
• When you click and hold a key AND click and hold mouse you can drag in Z plane (mouse up and down). (That’s only Z; you could change Z and x as well here).

You can also use left and right button of the mouse (left button x/y, right button z). Or mouse wheel.

• For your goal of a 3D cursor, you can use the red box as a 3D cursor. When you hit return / enter you would place a box.

Chrisir

``````
float x, y, z;

boolean holdZ=false;
boolean holdXY=false;

void setup() {
size(600, 800, P3D);

x=width/2+167;
y=height/2+225;
z=-120;

//strokeWeight(3);
}

void draw() {
background(0);
lights();

CheckeredFloor();

// box
pushMatrix();
translate(x, y, z);
stroke(111);
fill(255, 0, 0);
box(30);
popMatrix();

// mouse drag :
if (holdZ) {
// only Z (with mouse up and down)
z-=pmouseY-mouseY;
}//if
else if (holdXY) {
// x AND y
x-=pmouseX-mouseX;
y-=pmouseY-mouseY;
}
//
fill(255);
text(y,
21, 21);
}//draw()

//-----------------------------------------------------------

void mousePressed() {
if (keyPressed)
holdZ=true;
else holdXY=true;
}

void mouseReleased() {
holdZ=false;
holdXY=false;
}

//-----------------------------------------------------------

void CheckeredFloor() {

noStroke();

for (int i = 0; i < 40; i = i+1) {
for (int j = 0; j < 40; j = j+1) {

// % is modulo, meaning rest of division
if (i%2 == 0) {
if (j%2 == 0) {
fill (255, 0, 0);
} else
{
fill ( 103 );
}
} else {
if (j%2 == 0) {
fill ( 103 );
} else
{
fill (255, 0, 0);
}
} // if

pushMatrix();
translate ( 80*i-610, height/2+210+30+3.5, 80*j-940 );
box ( 80, 7, 80);  // one cell / tile
popMatrix();
} // for
} // for
} // function
``````

new version

place boxes with return

``````

ArrayList<PVector> list = new ArrayList();

// pos of red box
float x, y, z;

// for mouse dragging
boolean holdZ=false; // or X / Z
boolean holdXY=false;

boolean isRotating=false;
float angle1;

void setup() {
size(1200, 800, P3D);

x=width/2+167;
y=height/2+225;
z=-120;

//strokeWeight(3);
}

void draw() {
background(0);
lights();

pushMatrix();
rotateY(angle1);

if (isRotating) {
angle1+=.0134;
}

showSphereAt000();
CheckeredFloor();

showBox();

mouseDragMy();

for (PVector pv : list) {
fill(0, 0, 255);
// box
pushMatrix();
translate(pv.x, pv.y, pv.z);
stroke(111);
box(30);
popMatrix();
}

popMatrix();
showTextXYZ();
//
}//draw()

//-----------------------------------------------------------
// Inputs

void mousePressed() {
// start dragging
if (mouseButton==RIGHT) {
holdZ=true;
} else if (mouseButton==LEFT) {
holdXY=true;
}
}

void mouseReleased() {
// stop dragging
holdZ=false;
holdXY=false;
}

void mouseDragMy() {
// mouse drag
if (holdZ) {
// drag Z and X     // drag only Z (with mouse up and down)
x-=pmouseX-mouseX;
z-=pmouseY-mouseY;
}//if
else if (holdXY) {
// drag x AND y
x-=pmouseX-mouseX;
y-=pmouseY-mouseY;
}
}

void keyPressed() {
if (key==RETURN||key==ENTER) {
//
list.add(new PVector( x, y, z ));
return;
} //

else if (key=='+') {
z-=30;
} else  if (key=='-') {
z+=30;
}

if (keyCode==LEFT) {
x-=30;
} else  if (keyCode==RIGHT) {
x+=30;
}

if (keyCode==UP) {
y-=30;
} else  if (keyCode==DOWN) {
y+=30;
}

if (key=='r') {
isRotating =
! isRotating;
} else if (key==BACKSPACE) {
list.remove(list.size()-1);
}
}//

//-----------------------------------------------------------

void showBox() {
// box = 3D cursor
pushMatrix();
translate(x, y, z);
stroke(111);
fill(255, 0, 0);
box(30);
box(45, 3, 3);
popMatrix();
}

void showSphereAt000() {
// box
pushMatrix();
translate(0, 0, 0); // not necessary, just to clarify
noStroke();
fill(0, 255, 0);  // green
sphere(30);
popMatrix();
}

void showTextXYZ() {
// text
fill(255);
text(x
+ ", "
+ y
+ ", "
+ z
+ ". Green Sphere is at 0,0,0.\nBoxes: "
+ list.size()
+ ". Red box is your 3D cursor. Place blue box with RETURN, steer also with mouse, cursor keys and + - keys. Use r rotate on/off. Use Backspace. ",
61, 21);
}

//-----------------------------------------------------------

void CheckeredFloor() {
//floor

noStroke();

for (int i = 0; i < 40; i = i+1) {
for (int j = 0; j < 40; j = j+1) {

// % is modulo, meaning rest of division
if (i%2 == 0) {
if (j%2 == 0) {
fill (255, 0, 0);
} else
{
fill ( 103 );
}
} else {
if (j%2 == 0) {
fill ( 103 );
} else
{
fill (255, 0, 0);
}
} // if

pushMatrix();
translate ( 80*i-610, height/2+210+30+3.5, 80*j-940 );
box ( 80, 7, 80);  // one cell / tile
popMatrix();
} // for
} // for
} // function
``````