[SOLVED] How to get a smooth transition when changing focusEntity of orbitCamera?

[Gamer_Wael]

The default behaviour is that it just snaps to look at the new entity. Is there any inbuilt way to make that a smooth transition or will I have to code it myself?

[yaustar]

Are you saying the Model Viewer Kit orbit camera? What function are you calling?

[LeXXik]

If you refer to the orbit camera script from the tutorials section, then you would need to code the easing transition yourself, as I believe it does not offer that feature out of the box.

[Leonidas]

Hi @Gamer_Wael,

For the orbit camera you can do so by adding a second pivot Vec3, let’s call it currentPivot.

In your update method instead of using the existing pivot property to set the camera position, first lerp between currentPivot and that pivot (target) using some variation of dt for alpha.

And then set your camera position to the currentPivot. This way you will get animated pivot updates.

[Gamer_Wael]

Also im facing two more issues but didn’t want to create an entire new topic for them, so I hope you don’t mind me asking here.

1. I cant add fog to my scene. I have tried:

app.scene.fog = "pc.FOG_EXP";
app.scene.fogColor = new pc.Color(1, 1, 1);
app.scene.fogDensity = 10;

But I’m not seeing any fog.

The scale of the plane at the bottom is 100x100.

2. Every time my I refresh the page my camera randomly starts at one of two different positions.
   
   

Could this be due to the orbitCamera script sometimes taking longer to load? I’ll try to reduce my code and try and isolate the problem.

[Leonidas]

Definitely open new posts for different subjects, it makes it easy to search for solutions later on.

For the fog, remove the quotes from your first assignment:

@Gamer_Wael

1. I cant add fog to my scene. I have tried:

app.scene.fog = pc.FOG_EXP;
app.scene.fogColor = new pc.Color(1, 1, 1);
app.scene.fogDensity = 10;

For your 2nd question, not sure what’s the issue. I suspect it may be a delay in loading the model. For the camera to find the correct bounding box and position its frame, the focus entity should have all of its models loaded/rendering.

Are your model assets loading before your scene starts? (preload = true)

Try putting your camera entity last in your hierarchy or at least enable after your scene is ready / prepared.

[Gamer_Wael]

@Leonidas

Definitely open new posts for different subjects, it makes it easy to search for solutions later on.

I’ll keep that in mind from now on. And thanks again for the help.

I tried delaying adding the camera

setTimeout(function(){
    app.root.addChild(camera);
},5000);

But that didn’t help.
And I tried preloading like so

var url = "Tambourine.glb";
app.assets.loadFromUrl(url, "container", function(err, asset) {
    Tambourine = new pc.Entity();
    asset.preload = true;
    console.log(asset.preload);
    Tambourine.addComponent("model", {
        type: "asset",
        asset: asset.resource.model,
        castShadows: true
    });
});

But that didn’t help either.

[yaustar]

You could disable the ‘focus on start’ attribute on the orbit camera script and call the function manually after you have added the model to the scene.

[Gamer_Wael]

@yaustar

You could disable the ‘focus on start’ attribute on the orbit camera script and call the function manually after you have added the model to the scene.

Thanks a lot. That seems to have fixed the issue.