Trying to rotate points within 3 dimensional space.

[SilicateWielder]

So, for the purpose of learning, I've been writing a 3D renderer, and I've been running into some issues involving what I can only guess is my math.

 

The issue I'm having is with a function I've written called rotate3d, I can rotate on two axis at the same time, however for some reason whenever I rotate along both X and Y simultaneously, I run into a weird issue where the polygon or object being rotated will stretch or distort. I'm not sure what it is I'm doing wrong here, and I've been trying for days to figure out what is wrong with my math.

 

Here is a screenshot of a wireframe cube rotated by 45 degrees on both the X and Y axis (Yes, I know the FOV of 600 is ridiculous but it actually produces a result comparable to an FOV of 70 on a standard game):

 

And here is the function:

	function rotate3d(x, y, z, rx, ry, rz)
{
    // Calculate the ratio for degrees to radians
    var ratio = (3.1415 / 180);
    var rxa = rx * ratio;
    var rya = ry * ratio;
    var rza = rz * ratio;
    
    // Rotate around the Y axis.
    var x1 = (Math.cos(rya) * x) - (Math.sin(rya) * z);
    var y1 = y;
    var z1 = (Math.sin(rya) * x) + (Math.cos(rya) * z);
    
    // Rotate around the X axis.
    var x2 = x1;
    var y2 = (Math.cos(rxa) * y) - (Math.sin(rxa) * z);
    var z2 = (Math.sin(rxa) * y) + (Math.cos(rxa) * z);
    
    // Rotate around the Z axis.
    var x3 = (Math.cos(rza) * x1) - (Math.sin(rza) * y2);
    var y3 = (Math.sin(rza) * x1) + (Math.cos(rza) * y2);
    var z3 = z2;
    
    //system.pushEvent("grapler3d", "Rotated X: " + x + " Y: " + y + " Z: " + z + " to X: " + x3 + " Y: " + y3 + " Z: " + z3);
    
    return([x3, y3, z3]);
};
	

 

If anyone knows what it is I'm doing wrong here, any help would be greatly apreciated.

[Sauron]

Use a rotation matrix instead of trying to invent the math:

function rotateX(x,y,z,angle){	//x,y,z are the coordinates of the point
  var y1 = y*Math.cos(angle) - z*Math.sin(angle);
  var z1 = y*Math.sin(angle) + z*Math.cos(angle);
  return([x, y1, z1])
}

I don't have time right now to write the other two rotations for you but you can easily make them from my x rotation and the wikipedia article. Simply use them in succession to get the rotation you want.

[SilicateWielder]

3 minutes ago, Sauron said:

Use a rotation matrix instead of trying to invent the math:

function rotateX(x,y,z,angle){	//x,y,z are the coordinates of the point
  var y1 = y*Math.cos(angle) - z*Math.sin(angle);
  var z1 = y*Math.sin(angle) + z*Math.cos(angle);
  return([x, y1, z1])
}

I don't have time right now to write the other two rotations for you but you can easily make them from my x rotation and the wikipedia article. Simply use them in succession to get the rotation you want.

If you look at my original post I'm doing this same math for all three axis of rotation. the problem is that I'm getting a weird result when I rotate around the X and Y axis simultaneously.

[Dash Lambda]

Each rotation should use the coordinates produced by the previous, the code you gave is mismatching them.

[SilicateWielder]

11 minutes ago, Dash Lambda said:

Each rotation should use the coordinates produced by the previous, the code you gave is mismatching them.

I don't know how I managed to miss that, thanks!

[Beskamir]

If I were you I'd just use the correct rotation matrix rather than trying to make functions that rotate things along a set axis. https://learnopengl.com/#!Getting-started/Transformations

 

Also I'd use a better language than JavaScript...

[Blade of Grass]

On 2017-10-25 at 2:33 AM, ElfFriend said:

If I were you I'd just use the correct rotation matrix rather than trying to make functions that rotate things along a set axis. https://learnopengl.com/#!Getting-started/Transformations

 

Also I'd use a better language than JavaScript...

What if he's trying to make a browser game?