Hello,
I am trying to create a billiards game and I am having trouble with the orbital camera and rotations.
https://codepen.io/foxfairlane/pen/ZEqJdME
I want the user to be able to rotate the cue by dragging with the left mouse button on the 2D window and convert those 2D coordinates to 3D.
I also allow the user to rotate the orbital camera by dragging with the right mouse button on the scene.
I am going to draw a black line inside the 3D scene, so that the line generated by dragging in the 2D window can be seen.
The generated black line (the direction) and the cue (blue) should always be parallel.
If the orbital camera has a polar coordinate of 0 (viewed from above), it works perfectly, regardless of the azimuthal angle that has been set, and the black line and the cue (blue) will always be parallel. But if I rotate the camera by adding more degrees to the polar angle, the black line and the blue cue will no longer be parallel.
The more degrees the polar angle of the orbital camera has, the more separated (less parallel) the black line and the blue cue will be.
How could I fix this so that they are always parallel? It doesn’t seem trivial and ChatGPT hasn’t helped me at all.
The code for the function is at the end in getCueAngle(begX, begY, endX, endY, beg3D, end3D)
Thank you and regards.
Should I be glad or sad that people are asked when ChatGPT fails? Anyway, try with the following code:
function getCueAngle(begX, begY, endX, endY, beg3D, end3D)
{
var dx = end3D.x - beg3D.x;
var dy = end3D.z - beg3D.z;
var angle2D = Math.atan2(-dy, dx);
return angle2D;
}
Note: I kept the same list of arguments, you may keep only the 3D points.
Thank you very much for your response and your time.
But your code doesn’t work. It couldn’t be that simple 
In the screenshot, I’m showing you the error. The blue cue should be parallel to the black line.
New solution:
function getCueAngle(begX, begY, endX, endY, beg3D, end3D)
{
var dx = beg3D.x - end3D.x;
var dy = beg3D.z - end3D.z;
var angle2D = Math.atan2(-dy, dx);
return angle2D + Math.PI;
}
Thank you very much Sushan, but the same error that I was telling PavelBoytchev about is happening.
The blue cue should be parallel to the black line, but it’s not.
Black line is being drawn at y axis, is this expected?
Yes, the idea is for the black line to be drawn in 2D on the computer screen and indicate the direction of the cue, according to the camera view at that moment.
The difficulty lies in aligning the blue cue from the 3D world with the black line from the 2D world to be parallel (even though it has been converted to 3D).
The expected result in your screenshot should look like this:
Here is a video of what I see on my screen:
The lines are always parallel. They are in opposite directions as your initial example had opposite directions. You can add Math.PI to swap direction.
I took a screenshot of your video, and it looks like they are parallel all the time, but they are not.
I have drawn the correction of how it should be.
One possible reason for confusion is this:
- my approach relies on beg3D and end3D to be both on the floor.
- your intersection algorithm will also pick points that are on the vertical walls – in this case the lines will not be parallel
Here is an example of a line that connects side walls:
My proposal is that you make intersection only with the floor (but a much larger floor)
Look at the left and right sides of your board (the black lines). They are parallel in 3D, although they do they look parallel in 2D. This is because of perspective view. Perspectives are famous for this effect.
I’m afraid I do not understand what you want exactly. Maybe someone else would be able to provide more adequate help. I’m sorry.
Yes, that’s the point. The blue cue would need to be rotated in such a way that the perspective is “undone”, so that it is parallel to the black line.
I’ve been struggling with this problem for 3 days and it doesn’t seem easy at all.
Anyway, thank you very much for trying to help me.
Even if you “undo the perspective”, it will work only for this specific camera position. If you change the camera position and keep the lines the same, the lines will not be visually parallel any more.
That wouldn’t be a problem.
Normally, you would fit the camera view with the right mouse button and then move the cue with the left button to give it the desired angle, but not at the same time.
Last attempt to understand. Is this close to what you need:
https://codepen.io/boytchev/full/VwEMKwy
1 Like
Thanks a lot, PavelBoytchev.
You made my day.
That’s exactly the desired result.
ChatGPT 0 - Humans 1
1 Like
Thank you very much to you too, Sushan.
We will see in 5 years
