Sign in to follow this  
MikeFrost

Following a moving object with ArcRotateCamera

Recommended Posts

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!

 

 

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.