Problem:
I need to translate an object from one point to another in 3D space, taking into account all three axes, as well as distance, using no additional libraries-- just plain vanilla JavaScript.
Background:
I've written a VR viewer using HTML, CSS, and JS. I am in-process of re-building from scratch for various reasons-- one being it the physics work great so long as the 3D world stays basically along vertically upright objects (in particular, the POV).
This means it does not work for flight (unless you are a helicopter or something that never turns upside-down).
The world coordinates are oriented such:
+z is UP +y is NORTH +x is EAST
An objects rotational axes are:
x-axis is PITCH y-axis is ROLL z-axis is YAW
Currently, I can accurately calculate forward movement position for next frame using the following calculations:
xmov = vel * cos(xrot) * sin(zrot) * -1
ymov = vel * cos(xrot) * cos(zrot)
zmov = vel * sin(xrot)
--where vel is distance per frame, and xmov, ymov, and zmov are relative number of css pixels to translate along the world-axes described above.
This works perfectly so long as there is no roll involved along the object's local y-axis, since these equations only take into account yaw and pitch, along with distance (velocity/frame).
Obviously, I can still rotate objects in all three axes, but roll does not affect the next set of coordinates.
Where this is particularly problematic is moving the avatar's POV, and therefor the "camera view", which simply uses the exact values for translations and rotations as whatever object acts as avatar, only multiplied by -1.
That last part is perfectly effective and results in the camera view being perfectly in-sync with the avatar object's location and rotational movement.
However the above calculations are directly connected to yaw and pitch (z,y,x axes) relative to the world-- net effect being, if your avatar flies like an airplane then the controls for pitch and yaw are only relative to the world's flat x\y plane (i.e. "the ground", not to the avatar's x\y plane (it's body).
This means if you bank left or right, pulling up has a completely different effect than it should be-- rotating the angle of the world along straight up and down z-axis and flat x-axis rather than along the relative z-axis and x-axis to the y-axis of the object.
So if you are rolled to 90 degrees, pulling up makes the world effectively angle sideways, and positioning for next frame calculated according. So there is no roll to the physics-- it is only a visual effect.
Question:
How do I adjust the above calculations for the object's local y-axis roll angle?
Please, no workarounds-- I'm looking for the actual calculations.
It appears to me that the effective yaw and pitch need to be mathematically "rotated" before being fed to the above equations.
Input is basically a pointer (mouse or whatever) with typical cartesian horizontal and vertical coordinates, (0,0) at center. Up and left being negative quadrant.
Ideally, would like to use horizontal pointer movement to control roll and relative local pitch, keyboard input for relative yaw. Think flight-simulator.
There are ways I could manipulate to give the appearance, but this would diverge from using coordinates solidly grounded to the... well, ground. lol
The coordinates for all objects need to be relative the world or collision-detection will be a mess, among other things.
If you have an answer, please translate-- please keep it in English and JavaScript. I am not a mathematician.
If you explain well in English, I can translate to code.