# Combine rotation XZ (horizontal) with YZ (vertical). Math formula

I'm trying to make a rotation vertically and horizontally around a point at the same time but I'm not able to combine both.

I have this formula for the horizontal rotation:

camera.position.x = x * Math.cos(inc) + z * Math.sin(inc)
camera.position.z = z * Math.cos(inc) - x * Math.sin(inc)


And this one for the vertical:

camera.position.y = y * Math.cos(inc) + z * Math.sin(inc)
camera.position.z = z * Math.cos(inc) - y * Math.sin(inc)


I guess I need to use a Matrix, but not sure how. Here an example with Three.js: https://codepen.io/josema/pen/xyQoga

• Are you just looking to convert a point in spherical coordinates (an azimuth angle in the horizontal plane and an altitude/polar angle off the horizontal) into a vector in Cartesian coordinates? If so, do previous questions about spherical coordinates cover what you need? – DMGregory Oct 25 '18 at 17:14
• I already have the two rotations working individually. I'm just trying to combine them, but don't know how to make the formula. – EnZo Oct 25 '18 at 17:36
• Do the formulas at the link above solve that problem? If not, can you describe in detail what behaviour you need that's not provided by those answers? – DMGregory Oct 25 '18 at 18:01
• Imagine the horizontal rotation is permanent, and the vertical is controlled with the mouse. I just did a small change here codepen.io/josema/pen/xyQoga in case that helps you to understand. – EnZo Oct 26 '18 at 14:02

As @DMGregory mentioned above what I really needed was a way to translate a polar/spherical coordinates into cartesian coordinates.

In other words, I have two angles and one radius and I need to convert it into a Vector3/XYZ.

Here is the code:

function polarToCartesian( angleV, angleH, radius ) {

var phi = ( 90 - angleV ) * DEG2RAD
var theta = ( angleH + 180 ) * DEG2RAD

return {
x: -(radius * Math.sin(phi) * Math.sin(theta)),