How do I change an object’s x & y so that z scaling doesn’t change the object’s screen position?

I attached a .c3p file to explain: https://drive.google.com/file/d/1yOEDMwqyTAHCv8PXp8HePV6ddCtQpAll/view?usp=drivesdk

How this program works:

When I click, an “bullet” object is created at the mouse x and y, and z coordinate -100. The created object doesn’t line up with the mouse cursor.

How I want this program to work:

When I click, an “bullet” object is created at the mouse position in screen space— it can have whatever x & y coordinate in world space— and z coordinate -100.

When I click, I want the bullet to appear underneath my cursor.

The working program would look like the image attached.

I’m guessing that the solution involves introducing some constants, and modifying “xpos” and “ypos” in the code:

…
 globalThis.SCREEN_W = 320;
 globalThis.SCREEN_H = 180:
 globalThis.SCREEN_W_HALF = 160;
 globalThis.SCREEN_H_HALF = 90;
…
 if (lMouse) {
 var scalar = …
 var xpos = SCREEN_W_HALF + (lMouseX - SCREEN_W_HALF) * scalar;
 var ypos = SCREEN_H_HALF + (lMouseY - SCREEN_H_HALF) * scalar;
 var zpos = -100;
…

So it’s mostly just a matter of calculating the intersection of the mouse ray (camera to mouse) and the plane at z=-100.

So the long way of calculating the mouse ray would be to consider the mouse position on a 2d layer and make a vector from the center of the screen and camera eye distance ( can be calculated from screen size and fov) to the mouse position. Then you’d need to rotate that by the camera’s orientation matrix and adding the camera position.

The simpler way to get the mouse ray could be to leverage existing c3 features. If you get the mouse position on a 3d layer it will give you the xy of the mouse projected on the z=0 plane. So the ray would be from the camera to that.

So, anyways the generic formulas for a line and plane are:

P=p1+u*(p2-p1)

N dot (P-p3)=0

And the intersection can be found by combining the two formulas and solving for u:

U= (N dot (p3-p1))/(N dot (p2-p1))

And finally plugging that back into the line equation to get the actual point.

However in your case it all can be simplified at lot.

P1 = camera.pos

P2 = vec(mouse.x, mouse.y, 0)

P3 = vec(0,0,-100)

N = vec(0,0,1)

So barring any errors the final equations should be:

PlaneZ =-100

X = lerp(camera.x, mouse.x, -planeZ/camera.z+1)

y = lerp(camera.y, mouse.y, -planeZ/camera.z+1)

Z = planeZ

Just make sure the mouse coordinates are from a 3d layer. You can specify the layer you get the mouse coordinates from with mouse.X(layer)

Looks like your requirements were simpler than I thought after looking at your c3p.

Updated and tested this as working in events. Adapting it to js will require you to convert the fov of 45 to radians.

It takes the height of the viewport, 45 which is the fov, and the center of the screen which can be the scroll center or just half the viewport size if there is no scrolling.

zplane = -100
scale = 1-zplane*tan(45/2)/(Height/2)

x = (mouse.x - center.x)*scale + center.x
y = (mouse.y - center.y)*scale + center.x
z = zplane