# False raycaster rotation

**URL:** <https://discourse.threejs.org/t/false-raycaster-rotation/8594>\
**Category:** Questions\
**Tags:** transform, math\
**Created:** [July 19, 2019, 8:19am UTC](https://discourse.threejs.org/t/false-raycaster-rotation/8594 "2019-07-19T08:19:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [July 19, 2019, 8:19am UTC](https://discourse.threejs.org/t/false-raycaster-rotation/8594/1 "2019-07-19T08:19:32Z")

</div>

Hey Im having a object3D with 4 raycasters in each direction. The object is draggable and when the raycaster hits, it applies the rotation of the hit object to itself.

```
this.obj.rotation.set(0, 0, 0)
console.log(wall.controller.rotation) // logs: 3.141592653589793
this.obj.rotateY(wall.controller.rotation)

```

When updating the raycasters origin and direction, which always applies the rotation of the object3D to itself, I get a false rotation.

```
this.direction.set(0, 0, 1)
console.log(this.obj.rotation.y) // logs: 1.2246467991473532e-16
this.direction = this.direction.applyAxisAngle(this.axesRotation, this.obj.rotation.y)
this.frontRaycaster.set(this.center, this.direction)

```

So `1.2246467991473532e-16` should be `Math.PI`. Is there a work around?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 19, 2019, 9:17am UTC](https://discourse.threejs.org/t/false-raycaster-rotation/8594/2 "2019-07-19T09:17:49Z")

</div>

> [@Fluqz](#):
>
> this.direction.set(0, 0, -1)

What is the reason for setting the value to `(0,0,-1)` ?

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [July 19, 2019, 10:28am UTC](https://discourse.threejs.org/t/false-raycaster-rotation/8594/3 "2019-07-19T10:28:31Z")

</div>

Reason for that was a false init rotation, but I already corrected it. Front is now (0, 0, 1). Still getting the same values.

 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/1/14ed1703d39b64002bcdfaa3c92f5b20e6b19597.png)

Dragging it down against the bottom wall rotates the obj, but the raycasters wont rotate. All other directions work fine.

 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/62677de1521021875c0d5b2e036b1621c9812e4b.png)

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [July 22, 2019, 11:05am UTC](https://discourse.threejs.org/t/false-raycaster-rotation/8594/4 "2019-07-22T11:05:17Z")

</div>

Why am I getting this false value?! `1.2246467991473532e-16` should be `Math.PI` .

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 22, 2019, 11:20am UTC](https://discourse.threejs.org/t/false-raycaster-rotation/8594/5 "2019-07-22T11:20:00Z")

</div>

Sry, it’s not possible to help you with what you’ve provided so far. Can you pelase demonstrate the issue in a small, isolated [live example](https://jsfiddle.net/f2Lommf5/)?

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [July 22, 2019, 11:44am UTC](https://discourse.threejs.org/t/false-raycaster-rotation/8594/6 "2019-07-22T11:44:20Z")

</div>

[Here is a fiddle](https://jsfiddle.net/830a4hng/) which just rotates a object3D container and alerts its Y rotation after updating matrix world. The rotation value (-3.141592653589793) is an angle calculated from 3 2d points like so:

```
let r = Math.atan2(p3.z - p1.z, p3.x - p1.x) - Math.atan2(p2.z - p1.z, p2.x - p1.x)
```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 22, 2019, 12:29pm UTC](https://discourse.threejs.org/t/false-raycaster-rotation/8594/7 "2019-07-22T12:29:02Z")

</div>

The problem is that multiple euler angles can represent the same rotation. So just evaluating the `y` angle does not work. If you inspect the other two angles (`x` and `z`), you will see a difference compared to the initial values.

I suggest you avoid to work with euler angles and focus on quaternions instead. Transform your direction vector like so:

```auto
this.direction.applyQuaternion( this.obj.quaternion );

```