Question

How would I project 2D coordinates on to 3D?

For example I have an image (represented as a particle) that is 256px wide. If I pretend this image is centered on the origin (0,0) in 2D space then the vertical sides of the square are located at x = 128 and x = -128.

So when this image(particle) is placed in a Three.js scene at the origin(0,0) and the camera is at CamZ distance from the origin, then how do I project the original 2D coordinates to 3D which in tern will tell me the width the image(particle!) appears on screen in three.js units.

Answer 1

An easy to understand way would be creating a geometry with vertices in -128, 128, 0, 128, 128, 0, -128, -128, 0 and 128, -128, 0. Then use Projector for projecting that geometry using the camera. It will give you an array of projected points that should be from -1 to 1. You’ll then need to multiply that to the viewport size.