Rotate Mesh Towards a given point slowly

Questions
1

Hi , I am very new to Babylon and Unity . I want to rotate my character towards a given point where he is supposed to reach while running . I am able to rotate the character towards the direction of movement in unity . But not via BabylonJS.
here is the piece of code that I wrote -

public void moveTowards(Vector3 a , Vector3 b )
{
if(b-a!=Vector3.zero){
Quaternion toRotation = Quaternion.LookRotation(b-a,Vector3.up);
transform.rotation = Quaternion.RotateTowards(transform.rotation,toRotation,rotationSpeed*Time.deltaTime);
}
}

Please help me write the equivalent BabylonJS function or suggest me some other way to do it ? I tried several answers but none helped .

1 Like
2

The simplest is to create an animation instead of interpolating on your own everyframe. You can find a lot of info in the animation doc : Designing Animations | Babylon.js Documentation

basically you would animate your rotationQuaternion property from its current rotation to the desired one.

1 Like
3

Welcome to the Babylon Family!

Wants to provide an additional example of the animation for reference. Fun fact you can stack animations too. For example, you do rotation and movement at the same time. Wrote up this quick example where I just reused the same keyframes for both of my desired movements.

const xRotate = new BABYLON.Animation("xRotate", "rotation.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const xSlide = new BABYLON.Animation("xSlide", "position.x", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const keyFrames = []; 

keyFrames.push({
 frame: startFrame,
 value: 2
});

keyFrames.push({
 frame: endFrame,
 value: -2
});

xSlide.setKeys(keyFrames);

xRotate.setKeys(keyFrames);

box.animations.push(xRotate);
box.animations.push(xSlide); //push a second animation that will happen at the same time.

scene.beginAnimation(box, startFrame, endFrame, false);

https://playground.babylonjs.com/#7V0Y1I#1205

4

@msDestiny14 @sebavan Thanks for answering . I went through the animation docs and was able to gain a lot of information .I know how to stack up the animations and I have the target coordinate for player and its current coordinate but I am unable to rotate him in the desired direction . I tried calculating the angle between the vectors and rotating the mesh by that angle but still it is not working as desired . Can you help me re-write the above unity code in babylon.JS ?

I tried using the “.lookAt” method

let direction =  targetPosition.subtract(PlayerModel.position)
playerModel.lookAt(direction);

I couldn’t find any utility method like lookRotation or rotateTowards which did the same job in unity . If you know the similar alternative for these methods in babylon.js , then please do tell me . Thanks !

1 Like
5

My gut feeling is you might be in the wrong units. Degrees vs radians for example. Let me take a look in the morning :slight_smile:

7

Hi @Anany_Chitranshi and welcome to the community.

No direct Babylon.js function but this PG of a cone chasing a sphere might be useful to help you achieve what you need https://playground.babylonjs.com/#3H1BRD#1

4 Likes
8

Hi folks!
Wouldn’t Quaternion.Slerp help here?

2 Likes
9

I could watch this the whole day :slight_smile:

3 Likes
10

Love this! It’s very mesmerizing :star_struck:

Now here’s a deep question I’m wondering. Every once in a while we get question like this where having a helpful function could be useful, especially if users are coming from other tools that have these built functions.

Should I go ahead and implement this type of function. For example: Mesh.lookAt(targetPosition: vector3) ? We have a couple of frequently repeated question/answers so it begs the question would this be helpful for bloating the engine. :thinking:

Or option 2: Adding these examples to the documentation so its easier for people to find without having to dig.

2 Likes