Getting Z coordinate in WEBGL with mouse

p5.js Coding Questions
1

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
2

Hello,

I think you can buy a 3D mouse, I think there is something like this. :wink:

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
3

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