# Getting Z coordinate in WEBGL with mouse

**URL:** <https://discourse.processing.org/t/getting-z-coordinate-in-webgl-with-mouse/21476>\
**Category:** Coding Questions\
**Created:** [June 1, 2020, 1:40pm UTC](https://discourse.processing.org/t/getting-z-coordinate-in-webgl-with-mouse/21476 "2020-06-01T13:40:38Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nis](https://avatars.discourse-cdn.com/v4/letter/n/3ab097/32.png) [@Nis](https://discourse.processing.org/u/Nis)\
**Post date:** [June 1, 2020, 1:40pm UTC](https://discourse.processing.org/t/getting-z-coordinate-in-webgl-with-mouse/21476/1 "2020-06-01T13:40:38Z")

</div>

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.

---

<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:** [June 1, 2020, 2:22pm UTC](https://discourse.processing.org/t/getting-z-coordinate-in-webgl-with-mouse/21476/2 "2020-06-01T14:22:24Z")

</div>

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

```auto

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

```

---

<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:** [June 3, 2020, 9:40pm UTC](https://discourse.processing.org/t/getting-z-coordinate-in-webgl-with-mouse/21476/3 "2020-06-03T21:40:17Z")

</div>

new version

place boxes with **return**

```auto

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

```