# loookAt method gives incorrect rotation

**URL:** <https://discourse.threejs.org/t/loookat-method-gives-incorrect-rotation/75559>\
**Category:** Questions\
**Created:** [December 23, 2024, 2:55pm UTC](https://discourse.threejs.org/t/loookat-method-gives-incorrect-rotation/75559 "2024-12-23T14:55:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mattias\_98](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mattias_98/32/37470_2.png) [@mattias\_98](https://discourse.threejs.org/u/mattias_98)\
**Post date:** [December 23, 2024, 2:55pm UTC](https://discourse.threejs.org/t/loookat-method-gives-incorrect-rotation/75559/1 "2024-12-23T14:55:14Z")

</div>

There seems to be an issue when I try to orient this object towards my target object. It seems to be always misrotated to look further down than its supposed to on the y-axis, but as you can see the target position is correct, so I dont know what’s going on.

Debugging in the code and image + console attached.

Green arrow = correct direction  
Red arrow = current direction

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/0/60d80547d9e2e8cd83f2140151ff6e1b1feaf5a8.png)

```javascript
// Loop that creates multiple light objects (the light object is a custom class, that returns a group of three elements)
for (let i = 0; i < count; i++) {
const light = new VolumetricSpotLight('white', 2.8, coneLength, 10);

// Each light group positioned on a circle
light.position.x = Math.cos(THREE.MathUtils.degToRad(gap * i)) * radius;
light.position.z = Math.sin(THREE.MathUtils.degToRad(gap * i)) * radius;
light.position.y = height;

// Calculate the lookAt object's world position
const localPosition = new THREE.Vector3();
object.localToWorld(localPosition);

// Add the lookAt object's position to the light group's position (ensuring the circle is around the object)
light.position.x += localPosition.x;
light.position.y += localPosition.y;    
light.position.z += localPosition.z;

// Ensure no pre-applied rotation on the light group is messing with the lookAt method
console.log('Rotation before:', light.rotation);

// LookAt method towards the target object
light.lookAt(localPosition);

// Debug
console.log('Rotation after:', light.rotation);
console.log('Position light:', light.position);
console.log('Position lookAt object:', localPosition);

// Invert axes to ensure correct orientation
light.rotation.x *= -1;
light.rotation.z *= -1;
}

```

---

<div class="post-metadata">

**Author:** ![manthrax](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/manthrax/32/2596_2.png) [@manthrax](https://discourse.threejs.org/u/manthrax)\
**Post date:** [December 23, 2024, 4:33pm UTC](https://discourse.threejs.org/t/loookat-method-gives-incorrect-rotation/75559/2 "2024-12-23T16:33:05Z")

</div>

Hard to say without seeing the guts of your light class… but spotlights/directionallights have a .target object that they orient towards by default…

[https://threejs.org/docs/#api/en/lights/SpotLight.target](https://threejs.org/docs/#api/en/lights/SpotLight.target)

I suspect this is interfering with your custom logic.

---

<div class="post-metadata">

**Author:** ![mattias\_98](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mattias_98/32/37470_2.png) [@mattias\_98](https://discourse.threejs.org/u/mattias_98)\
**Post date:** [December 24, 2024, 9:17am UTC](https://discourse.threejs.org/t/loookat-method-gives-incorrect-rotation/75559/4 "2024-12-24T09:17:02Z")

</div>

_ **update: lmao, I just figured it out after spending days on it, sorry and merry xmas** _

I made a sandbox:)  
[https://codesandbox.io/p/sandbox/szx5nx?file=%2Fsrc%2Fscript.js%3A77%2C27](https://codesandbox.io/p/sandbox/szx5nx?file=%2Fsrc%2Fscript.js%3A77%2C27)

The debug GUI updates the lookAt method when changing height, it’s clear that the lights are not looking correctly at the sphere:(