lookAt only 2 axis

while using lookAt function I want to stop the rotation at x axis, when I look at entity from above angle its rotation is quite disturbed maybe because of the rotation of x axis.

when I look from front its rotation is fine.

by manually changing x axis using euler angles the entity just disappears.

here is a project link PlayCanvas | HTML5 Game Engine

The lookAt function takes target position as well as up vector … perhaps this is the control you need? (sorry, I’m not entirely sure what you need from the description)


the button should be at that position but since its the child entity of that hotspot and that hotspot is rotating in x axis too, I want to stop the rotation at x axis or if there is a better way

Hi @AnasRahim,

You can copy the angles of the entity, before using lookAt(), and then reset any value to the previous one.

// --- example lookAt code rotating only on Y axis
const anglesBefore = this.entity.getEulerAngles().clone(); 


const anglesAfter = this.entity.getEulerAngles(); 

this.entity.setEulerAngles(anglesBefore.x, anglesAfter.y, anglesBefore.z);

Looks like glimbal lock where the look at direction is the same as the default up axis (world up).

Fixed in this project where I always use the camera’s up axis: https://playcanvas.com/editor/scene/1126634

1 Like

Thank you very much , it’s working fine now!