Hey people, is there any way to make lookAt as smooth as possible?
2 Likes
You can use lerping to smoothing it out.
1 Like
Hey, dont you have any examples of using lerp with look at function? i have curren position and target position ready but i cant summarize it somehow:)
this.currentPosition = this.entity.getPosition();
this.targetPosition = this.app.root.findByName('Point ' + this.Point.toString()).getLocalPosition();
is it something like :
this.smoothLookAt = pc.math.lerp(this.currentPosition, this.targetPosition, this.speedOfLookAt);
this.entity.lookAt(this.smoothLookAt);
or is it a getRotation()?It will be something like the first one, you will be lerping a position to use in your lookAt() method.
Ive got it like this, there is no error but my player doesnt rotate at all, this.point is targeted object, and player position is startng object. when i only put this.point in lookat it is rotating but not smooth, do i have my lerp function correctly set up ?
also when i try to output my smoothlookat variable, it shows Vector 3 so my lookat function should know where to rotate, instead he doesnt rotate at all
Both playerPosition and this.point are instances of the pc.Vec3 class. You can not use pc.math.lerp() with anything other than numbers (check the docs when using a Playcanvas API method).
For that you need to use the lerp() method of the pc.Vec3 class, check the example here on how it’s used:
so there should be
var r = new pc.Vec3();
var smoothLookAt = r.lerp(playerPosition, this.point, 0.5);
something like this ?
1 Like
still nothing happens
What value do you use for alpha? Observe lerp() has a third parameter which you need to increment in your update loop to get a position that is smoothly animated from pointA to pointB.
// e.g. inside your script update(dt) method
var smoothLookAt = r.lerp(playerPosition, this.point, dt * 5);
Its rotating the same way it rotated without lerp 
for better visualisation here is a game to play: https://launch.playcanvas.com/1025730?debug=true use UP ARROW key to move
I think I see the problem here. Instead of using the variable playerPosition for the first increment, try replacing it with this.entity.getPosition() instead. It would also help if we could see the editor for the game.
lookAt seems to be a bit of an issue here. Instead of using that, you can try to do something else, like try and change the player’s y rotation directly instead and then use lerp on that.
1 Like
Yeah well, i dont really know how to calculate rotations so the player will rotate towards my waypoint is there any example?
But it doesnt sound bad, just need the calculation
My idea is to have points set out and then get the point’s y rotation, and use that as the point b. and the point a is the player’s y rotation. the alpha is whatever you want it to be. it’ll look something like this:
this.entity.setLocalEulerAngles(0, pc.math.lerp(this.entity.getLocalEulerAngles().y, this.point, 0.5), 0);
Sounds like really great idea… however, i cant get it working somehow; i tried to change a code a little bit bit it still rotates toward sky and all i can see is black screen 
I like to see the result of this:
console.log(this.app.root.findByName('Point ' + this.Point.toString()).getLocalPosition());
