world point to screen coordinates

[stephanschulz]

Thanks for making this library. It works very well.

Would anyone have advice on how to implement point picking with easycam?

In openframeworks i can use worldToScreen and then check the distance to the mouse to find the nearest 3d object. But i have no idea how to do this conversion from 3d to 2d here?

Thanks a bunch.

[jwdunn1]

This sketch was implemented by easyCam's original author. I'm not familiar with the inner mechanics, but there is a worldToScreen defined on line 351. Maybe this will help.

[stephanschulz]

Thank you for taking the time to respond.

I solved it by using this screen position code: https://github.com/bohnacker/p5js-screenPosition

I collect the 3d points in function draw():

 screenPositions = [];
  for (let i = 0; i < layoutPoints.length; i++) {
    // get the screen positions of the ends of the line:
    screenPositions.push(
      screenPosition(layoutPoints[i].x, layoutPoints[i].y, layoutPoints[i].z)
    );
  }

Then draw within function displayHUD() :

push();
  translate(width / 2, height / 2);
  fill(255, 255, 255);
  stroke(255);
  for (let i = 0; i < screenPositions.length; i++) {
    circle(screenPositions[i].x, screenPositions[i].y, 10);
  }
  pop();

The circles on top of the 3D boxes are drawing in 2D.

[jwdunn1]

Excellent! Thanks for sharing the snippets. I'm going to do some experimenting with this [when I find some time].

[stephanschulz]

Just because, here an animation drawing a line between mouse and the closest 3D object.

[Bobingstern]

Can you share the code to this demo? For some reason i cant get my own to work

[jwdunn1]

I did something similar here