# Rotation to xyz coordinates

**URL:** <https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729>\
**Category:** Questions\
**Tags:** rotation, quaternion, math, geometry\
**Created:** [March 6, 2023, 9:45am UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729 "2023-03-06T09:45:43Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Asfan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asfan/32/24435_2.png) [@Asfan](https://discourse.threejs.org/u/Asfan)\
**Post date:** [March 6, 2023, 9:45am UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/1 "2023-03-06T09:45:43Z")

</div>

Hello,

_note: I know my issue is more of a mathematical problem than a threejs problem, but I would appreciate the help._

I have this sphere, the blue pins were placed by rotation only (the center is at 0,0,0 and I just rotate along the Y-axis and the Z-axis), the pin (p1) starts at rotation (y=0, z=0), the angles between them are 45 degree. The red spheres are placed using location (XYZ ) _ **the issue is here** _.

 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/e/4e331116919e7b516bb4a762ae62146837cf3b66.png)

As you can see the sphere of p4 is misplaced, I’m using this method for converting rotation to coordinates:

```javascript
const rad = Math.PI / 180;
const lat = 45 * rad; // here I change the angle from 45 to what ever I want
const lon = 45 * rad; // same here

// 5 is the radius
const x_ = 5 * Math.cos(lat) * Math.cos(lon);
const y_ = 5 * Math.cos(lat) * Math.sin(lon);
const z_ = 5 * Math.sin(lat);

p4.position.set(x_,y_,z_);
//is this method correct?

```

p1 → (0, 0) … correct  
p2 → (0,45) … correct  
p1 → (45,0) … correct  
p1 → (45,45) … wrong

My problem boils to is how do I get the XYZ position of an object with YZ rotation only?  
Thanks

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 6, 2023, 10:00am UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/2 "2023-03-06T10:00:55Z")

</div>

Is the using of [Spherical](https://threejs.org/docs/index.html?q=spherical#api/en/math/Spherical) an option?

---

<div class="post-metadata">

**Author:** ![Asfan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asfan/32/24435_2.png) [@Asfan](https://discourse.threejs.org/u/Asfan)\
**Post date:** [March 6, 2023, 10:04am UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/3 "2023-03-06T10:04:52Z")

</div>

@prisoner849  
just for the quick replay, I have no idea what this is, and I’m looking it up right now!

---

<div class="post-metadata">

**Author:** ![Asfan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asfan/32/24435_2.png) [@Asfan](https://discourse.threejs.org/u/Asfan)\
**Post date:** [March 6, 2023, 10:23am UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/4 "2023-03-06T10:23:04Z")

</div>

just for clarification, the blue pin model’s pivot located at 0,0,0 and the geometry lay flat at the X-axis.  
to move the pin I just use:

```javascript
pin.rotation.set(0, yR, zR); // where yR and Zr are the angles in radians 

```

---

<div class="post-metadata">

**Author:** ![Asfan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asfan/32/24435_2.png) [@Asfan](https://discourse.threejs.org/u/Asfan)\
**Post date:** [March 6, 2023, 11:05am UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/5 "2023-03-06T11:05:54Z")

</div>

@prisoner849 ok, so Spherical uses the Spherical coordinate system. to be honest, I have no idea how this can help me … I went through the documentation and I didn’t see anything useful! Am I missing something? can it returns XYZ coordinate?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 6, 2023, 11:13am UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/6 "2023-03-06T11:13:16Z")

</div>

You can set Vector3 from that object: [three.js docs](https://threejs.org/docs/index.html?q=Vector3#api/en/math/Vector3.setFromSpherical)  
Or use these coords: [three.js docs](https://threejs.org/docs/index.html?q=Vector3#api/en/math/Vector3.setFromSphericalCoords)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 6, 2023, 12:36pm UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/7 "2023-03-06T12:36:20Z")

</div>

Edit:

I managed to resolve the manual calculation of coordinates (with `sin` and `cos`). However, the exact formula set for conversion from spherical to Cartesian coordinates depends on how axes are chosen. So, @Asfan, could draw how your X, Y and Z axes are, as well as what are your `lat` and `lon` angles (where is their 0 and what is their positive direction).

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/e/ce9db0989b477d6d7f5d949b53763977c1d5c47c.jpeg)

---

<div class="post-metadata">

**Author:** ![Asfan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asfan/32/24435_2.png) [@Asfan](https://discourse.threejs.org/u/Asfan)\
**Post date:** [March 6, 2023, 12:55pm UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/8 "2023-03-06T12:55:58Z")

</div>

@prisoner849 what do you mean by set vector3? I am looking for vector3 aka XYZ, I have (r,θ,φ) … sorry if I didn’t understand you nor the docs!

---

<div class="post-metadata">

**Author:** ![Asfan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asfan/32/24435_2.png) [@Asfan](https://discourse.threejs.org/u/Asfan)\
**Post date:** [March 6, 2023, 12:57pm UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/9 "2023-03-06T12:57:39Z")

</div>

@PavelBoytchev I’ve seen your first replay and it might have something to do with it as I’m trying to align the wrong orientation order with the formal or set that I’ve used!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 6, 2023, 1:01pm UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/10 "2023-03-06T13:01:36Z")

</div>

Vector3 is a set of coords for x, y and z.  
`.setFromSphericalCoords(radius, phi, theta);` does all the job for you for casting the spherical coordinates into a vector of x, y, z 🤔

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [March 6, 2023, 1:14pm UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/11 "2023-03-06T13:14:58Z")

</div>

I tried to use your orientation of axes. In order to fix the positions, I had to replace Y and Z coordinates of the points. See lines 91-92. This is because in Three.js (by default) the Y axis points up.

Here is with swapped YZ coordinates:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/2/828afda9b1087fe92ed8d4dbdccfbdb09ca0419a.jpeg)

With your original order, I get the same result as you:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/a/5a460dad2334ad50ce9028c83c1cdafbb1bdc0d7.jpeg)

---

<div class="post-metadata">

**Author:** ![Asfan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asfan/32/24435_2.png) [@Asfan](https://discourse.threejs.org/u/Asfan)\
**Post date:** [March 6, 2023, 1:22pm UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/12 "2023-03-06T13:22:13Z")

</div>

ooo oo I get it now, I thought the [Spherical](https://threejs.org/docs/index.html?q=spherical#api/en/math/Spherical) has a method that calculates xyz and I was missing it somehow! thank you. I’ll try it instead of using manual calculation and see if that can fix my issue.

Though as @PavelBoytchev said, I might have a problem with the rotation order!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 6, 2023, 1:36pm UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/13 "2023-03-06T13:36:01Z")

</div>

Tried it with spherical coords: [https://codepen.io/prisoner849/pen/gOdxMWM?editors=0010](https://codepen.io/prisoner849/pen/gOdxMWM?editors=0010)

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/c/a/ca125eaf10c1ae241ffe3e308aaae622368ee7d3.png)

---

<div class="post-metadata">

**Author:** ![Asfan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/asfan/32/24435_2.png) [@Asfan](https://discourse.threejs.org/u/Asfan)\
**Post date:** [March 7, 2023, 5:29am UTC](https://discourse.threejs.org/t/rotation-to-xyz-coordinates/48729/14 "2023-03-07T05:29:58Z")

</div>

@PavelBoytchev @prisoner849 thank you all for the help \<3