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 https://playcanvas.com/editor/scene/1123542

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)

https://developer.playcanvas.com/en/api/pc.GraphNode.html#lookAt


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(); 

this.entity.lookAt(targetPos);

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!