Following a moving object with ArcRotateCamera

[MikeFrost]

Hi,

I'm having problems with the ArcRotateCamera following a moving object.

I decided to make an example in jsfiddle 

In the demo you can left mouse button click on the ground and the sphere will move towards that position. During the movement you should be able to rotate the camera with right mouse button, this doesn't work for some reason?

 

Now I know what you are thinking, why not make a playground example? Well I did but for some strange reason it works in the playground while using the same version of babylon.

The playground example

 

I might be abusing the camera.setTarget method but why does it work in the playground and not in jsfiddle?

Any other way that could achieve following the object with the ArcRotateCamera is much appreciated!

 

 

 

[GameMonetize]

We are also referencing PEP.js in the playground. this could be the reason

[MikeFrost]

PEP.js could probably be the issue, but I couldn't recreate it.

 

I noticed there is a difference in the way BABYLON renders the following two examples of code:

Example 1:

runRenderLoop(() => {

     var lerp = BABYLON.Vector3.Lerp(startPosition, endPosition, fracDistance);

     sphere.position = lerp;

}

 

Example 2:

runRenderLoop(() => {

     var lerp = BABYLON.Vector3.Lerp(startPosition, endPosition, fracDistance);

     sphere.position.x = lerp.x;

     sphere.position.y = lerp.y;

     sphere.position.z = lerp.z;

}

 

With the second code example the sphere object moves a lot faster. Why is that?

Check the difference between the two examples:

slow: example1

fast: example2

 

[Gijs]

After some searching I found the cause of problem 1:

In the playground you don't need to call scene.render(), so what I think happens in the playground is:

scene.render(); // called in the background
camera.setTarget(sphere.position);
scene.render(); // called by you

This is the playground with your second scene.render() removed, and it behaves just like the jsfiddle scene:

https://www.babylonjs-playground.com/index.html#3ZU9ZU#2

To solve this, you can call camera.update(), which updates for user input, after camera.setTarget():

https://www.babylonjs-playground.com/index.html#3ZU9ZU#3

Your second problem happens because in the "fast" playground, the startPosition is a reference to the position vector of the sphere, so when you do sphere.x, you are changing the startPosition, because they refer to the same Vector3. To fix this, you can do this instead:

startPosition = sphere.position.clone();

Demo:

https://www.babylonjs-playground.com/index.html#U8GDR9#1

[MikeFrost]

Bedankt Gijs for your great detailed answere! I understand now what I did wrong and the problem is solved

[Gijs]

3 hours ago, MikeFrost said:

Bedankt Gijs for your great detailed answere! I understand now what I did wrong and the problem is solved

You're welcome, but problem 1 wasn't caused the way I thought it was, so I've edited my comment accordingly. The solution is unchanged though.

[GameMonetize]

Congrats!