How to make an object point towards the mouse?

[GeekyDud]

I’m attempting to make an object (the main character/avatar) point towards the mouse. I have it facing upright, so the Z axis is the one that I need to rotate appropriately, since this is a 2D Project. After succesfully getting the X and Y mouse positions, I quickly realized that the lookAt command wouldn’t work. So I decided to use the SetEulerAngles.

Right now, I’m using the code below:

Test.prototype.onMouseMove = function(event) {
    var angle = Math.atan2(event.x, event.y);
    this.entity.setLocalEulerAngles(0, 0, angle);
};

I checked the math multiple times, and it seems to be correct. However, when launched, the character just moves SLIGHTLY towards the mouse. Since I’m pretty sure the math is right, I tried this.entity.setRotation and this.entity.setLocalRotation, but both make the sprite disappear instead. If someone could offer a fix for this, that would be wonderful, as I’m completely stumped.

Here’s the link to my editor: https://playcanvas.com/editor/scene/726439

[That_Guy]

This question has been asked, kind of. My understanding is that Euler angles work kinda funny in PlayCanvas.

Understanding Euler rotation

I thought I understand Euler rotation, but I’m learning that it’s doing some things I do not, in fact, understand. Let’s say that I want to rotate an object around its Y axis some degree amount between 0 and 360. I would think that I would do something like this: this.entity.setLocalEulerAngles(0,135,0); But that doesn’t actually set the object to 0, 135, 0. It actually sets the object to 180, 45, 180. Upon further investigation, I learned that these conversions happen on-the-f…

Hopefully this helps!

[yaustar]

You are using the mouse position relative to the screen position, not the object.

Use worldToScreen on the object which will get you the screen position of the object, subject that position from the mouse screen position and then do the atan2.

Inversely, use screenToWorld on the mouse position to get the projected world position, ensure that it is on the same plane as the object and use entity.lookAt (assuming the forward direction of the object is on the -Z).

[GeekyDud]

OK, but how would I do that? I tried this:

Test.prototype.onMouseMove = function(event) {
    var cameraEntity = this.app.root.findByName("Camera");
    cameraEntity.camera.screenToWorld(event.x, event.y, 1, this.pos);
    this.entity.lookAt(0, 0, this.pos);
};

However, it just disappears. I made sure that the front of my object is facing the -Z direction. I also tried putting this.pos in both the X or Y positions instead of Z. The only one that “worked” was X, but it rotated the wrong way.

(sorry that this is late. I’m not too active on here)

[yaustar]

Test.prototype.onMouseMove = function(event) {
    var angle = Math.atan2(event.x, event.y);
    this.entity.setLocalEulerAngles(0, 0, angle);
};

Going back a bit. Using the mouse coords for atan2 doesn’t work as it’s taking the vector from the origin of the screen which is the top left.

What you need is vector from the screen position of object to the mouse cursor.

Below is an example project using the atan2 method as it’s what you were originally used.

https://playcanvas.com/editor/scene/733295

[GeekyDud]

Ah… I didn’t realize that the origin was at the top left.

That really helps. Thank you!