Jump to content

Combine rotation XZ (horizontal) with YZ (vertical)


Recommended Posts

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)

Here an example with Three.js: https://codepen.io/josema/pen/xyQoga. The idea is to make the vertical rotation with de mouse.

Link to comment
Share on other sites

  • 3 weeks later...

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 a 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)),
    y: radius * Math.cos(phi),
    z: radius * Math.sin(phi) * Math.cos(theta),


Source: https://gist.github.com/jhermsmeier/72626d5fd79c5875248fd2c1e8162489

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...