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
// 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;
}