# Pro-Question: place a point in 3D with mouse

**URL:** <https://discourse.processing.org/t/pro-question-place-a-point-in-3d-with-mouse/6664>\
**Category:** Project Guidance\
**Created:** [December 16, 2018, 6:47pm UTC](https://discourse.processing.org/t/pro-question-place-a-point-in-3d-with-mouse/6664 "2018-12-16T18:47:24Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 21, 2018, 5:36am UTC](https://discourse.processing.org/t/pro-question-place-a-point-in-3d-with-mouse/6664/6 "2018-12-21T05:36:41Z")

</div>

Hope this is helpful – here is a very, very simple example of one method using `screenX()` / `screenY()`.

1. rotate the reference frame into place in the model.
2. sample screen coordinates and model coordinates from a grid of points in the frame
3. compare the mouse location to screen coordinates to look up model coordinates

![Nearest3DPlanePoint--screenshot--small](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/39fbd3041e45ad06c6299888e7f79687d35757fa.png)

```auto
/**
 * find nearby points on a 3D plane
 * 2018-12-20 Jeremy Douglass - Processing 3.4
 * https://discourse.processing.org/t/pro-question-place-a-point-in-3d-with-mouse/6664/4
 */

PVector cam = new PVector();
boolean camMove = true;
PVector[][] modelPoints;
PVector[][] screenPoints;
PVector mouse = new PVector();
PVector mouseCheck = new PVector();

int planeSize = 400;
int gridStep = 10;

void setup() {
  size(600, 600, P3D);
  noFill();
  modelPoints = new PVector[gridStep+1][gridStep+1];
  screenPoints = new PVector[gridStep+1][gridStep+1];
}

void draw() {
  background(0);
  text("Space toggles camera control; mouse over points", 20, 20);
  lights();
  // center drawing
  translate(width/2.0, height/2.0, 0);
  // rotate camera based on mouse
  cam();

  pushMatrix();
  // draw fixed "selected" point
  stroke(200);
  sphere(20);
  // draw reference plane for interactions with that point
  box(planeSize, planeSize, planeSize);
  rect(-planeSize/2.0, -planeSize/2.0, planeSize, planeSize);

  stroke(0, 200, 0);
  for (int y=0; y<=gridStep; y++) {
    int ystep = (y*planeSize/gridStep)-planeSize/2;
    for (int x=0; x<=gridStep; x++) {
      int xstep = (x*planeSize/gridStep)-planeSize/2;
      // update current screen locations of sampled grid coordinates on that plane
      if (camMove) {
        modelPoints[y][x] = new PVector(xstep, ystep, 0);
        screenPoints[y][x] = new PVector(screenX(xstep, ystep, 0), screenY(xstep, ystep, 0));
      }
      pushMatrix();
      translate(xstep, ystep, 0);
      sphere(10);
      popMatrix();
    }
  }
  popMatrix();

  // find spacePoint(s) near mouse and display up corresponding modelPoint(s)
  // this "find all" could be changed to find-first, or closest distance
  mouse.x = mouseX;
  mouse.y = mouseY;
  stroke(200, 0, 0);
  for (int y=0; y<=gridStep; y++) {
    for (int x=0; x<=gridStep; x++) {
      mouseCheck = new PVector(screenPoints[y][x].x, screenPoints[y][x].y, 0);
      if (mouseCheck.dist(mouse)<9) {
        PVector hit = modelPoints[y][x];
        pushMatrix();
        translate(hit.x, hit.y, 0);
        sphere(15);
        popMatrix();
      }
    }
  }
}

void keyReleased() {
  camMove = !camMove;
}

void cam() {
  if (camMove) {
    cam.x = map(mouseY, 0, height, -PI, PI);
    cam.y = map(mouseX, 0, width, -PI, PI);
  }
  rotateX(cam.x);
  rotateY(cam.y);
}

```

This is a _very_ simple example (and really inefficient, especially the call to dist()), but you could get the first matching point, or measure the nearest point.

Or you could ditch the point grid and use a geometric approach based only on the four corners of the grid and the mouse point. The goal is to find the mouse point inside the quadrilateral once you normalize it to a rectangle – this will tell you where your mouse is in model space. For example, try a raycast, or a PMatrix transform, or affine transform.

> **[Affine Transform - OpenProcessing](https://www.openprocessing.org/sketch/7519/#processing)**
>
> Given two triangles (red and blue), map another triangle (green) from one space to the other (purple). All the points, except the resulting triangle, are draggable.
> 
> This technique is regularly used in texture mapping.

or use a third party library like OpenCV which supports homography transformations for a point

- [http://www.corrmap.com/features/homography\_transformation.php](http://www.corrmap.com/features/homography_transformation.php)
- [https://stackoverflow.com/questions/27972703/java-findhomography-transform-image-point-to-ground-plane-point](https://stackoverflow.com/questions/27972703/java-findhomography-transform-image-point-to-ground-plane-point)
- [https://stackoverflow.com/questions/25766543/opencv-what-are-the-parameters-for-the-warpperspective-function](https://stackoverflow.com/questions/25766543/opencv-what-are-the-parameters-for-the-warpperspective-function)
- [http://answers.opencv.org/question/10022/the-homography-tutorial-in-java/](http://answers.opencv.org/question/10022/the-homography-tutorial-in-java/)

…or find the point on the quadrilateral on a corresponding rectangle more directly using either barycentric interpolation on a triangle or bilinear interpolation:

> <https://math.stackexchange.com/questions/13404/mapping-irregular-quadrilateral-to-a-rectangle>

  

> **[UV coordinate on a 2D quadrilateral](https://www.gamedev.net/forums/topic/596392-uv-coordinate-on-a-2d-quadrilateral/?tab=comments#comment-4779066)**
>
> Hey. Given the coordinates a, b, c, d, and p, how would I find the normalized UV coordinates of p? (For example, to sample a texture at that point.) a, b, c, d, and p are 2D (that is, only X,Y coordinates). p will always be inside abcd. I have no...

The point being, there are many ways to move from an approximation based on point sampling to a full geometric solution, and some are probably more efficient, but they are math-intensive rather than just logical.

---

_[View the full topic](https://discourse.processing.org/t/pro-question-place-a-point-in-3d-with-mouse/6664)._