lookAt only 2 axis

Help & Support
1

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.

1.PNG
1.PNG789×622 29.7 KB

when I look from front its rotation is fine.

2
2743×395 61.9 KB

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

here is a project link PlayCanvas | HTML5 Game Engine

2

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

3

3
3789×622 82.4 KB

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

4

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

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
6

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