CODEWITHSUNDEEP
three.jsgeometrytrigonometrycalculus
Kyle
Kyle

Reputation: 4014

Convert screen space X,Y position into perspective projection with a specific z position

I'm using ThreeJS, but this is a general math question.

My end goal is to position an object in my scene using 2D screen space coordinates; however, I want a specific z position in the perspective projection.

As an example, I have a sphere that I want to place towards the bottom left of the screen while having the sphere be 5 units away from the camera. If the camera were to move, the sphere would maintain its perceived size and position.

I can't use an orthographic camera because the sphere needs to be able to move around in the perspective projection. At some point the sphere will be undocked from the screen and interact with the scene using physics.

I'm sure the solution is somewhere in the camera inverse matrix, however, that is beyond my abilities at the current moment.

Any help is greatly appreciated.

Thanks!

Upvotes: 1

Views: 198

Answers (1)

M -
M -

Reputation: 28472

Your post includes too many questions, which is out of scope for StackOverflow. But I’ll try to answer just the main one:

  1. Create a plane Mesh using PlaneGeometry.
  2. Rotate it to face the camera, place it 5 units away from the camera.
  3. Add it as a child with camera.add(plane); so whenever the camera moves, the plane moves with it.
  4. Use a Raycaster’s .setfromCamera(cords, cam)
  5. then .intersectObject(plane) method to convert x, y screen cords into an x, y, z world position where it intersects the plane. You can read about it in the docs.
  6. Once it’s working, make the plane invisible with visible = false

You can see the raycaster working in this official example: https://threejs.org/examples/#webgl_geometry_terrain_raycast

Upvotes: 1

Related Questions