Mandala-3D | Dynamically drawing 3D Mandala patterns | Animation library

I"m not exactly sure how I can do this. I read a lot about raycasting and that seems to be good for finding points that intersect with something, but in this case I just want it to interpolate the 2d mouse coordinates to the 3d point exactly where the mouse clicks, regardless of scale, rotation, whether or not there's an object there, etc.

One method I've thought of but not approached would be making an invisible plane that is parallel to the camera, always oriented upright and always intersecting the y axis. Then use a raycaster to hit the plane, draw as needed, then delete the plane. Seems like a silly way to do this though.

At the moment I have a method that works pretty well but it has some issues when the line gets further away from the origin, or the camera gets zoomed

In this photo I drew two lines from two different perspectives. The vertical line what it looks like when the camera is level with the x and z axis, and I draw a straight line down the y axis, while the horizontal line is what happens when i scribble with the camera facing down. https://i.imgur.com/f8qw5xV.png

As you can see, it seems to use the distance to the camera to make this calculation, so the further the distance from the camera, the more distortion is in the calculation. How can get rid of this distortion?

source: https://github.com/AskAlice/mandala-3d-threejs live demo: https://askalice.me/mandala/

Here is the relevant code:

js/content.js@112