Typescript coding

Questions
1

Hi,

I’m switching from JS to TS, in which I see a lot of potential.
The only issue I currently have is some variables are quite some type corrections indicated in vscode.
When using the following this gets rid of the type-error indicators for me.
image

Here for example when I declare the const as an ArcRotateCamera, the possible issue here is that there is no scene.activeCamera, which will return null != ArcRotateCamera…

image
image784×163 12.1 KB

Can someone refer us to some guidelines on how to correctly write this code in TS?
Thank you!

2

You could do a type cast:

const camera: ArcRotateCamera = <ArcRotateCamera>scene.activeCamera

Since Camera is part of ArcRotateCamera it should work :slight_smile:

1 Like
3

Thanks!

2 Likes
4

Fwiw using the “as” keyword instead of angle brackets can save future headaches if you decide to use jsx or want to copy/paste into jsx.

const camera = scene.activeCamera as ArcRotateCamera

You can also wrap things in parenthesis to be easier to follow

1 Like
5

Ok, thanks good to know!
So that as ArcRotateCamera, only replaces the instance in the angular brackets?
What about the one after the semicolon? Is that one also replaced by the one after as…?

Thanks!

6

camera is casted to be an ArcRotateCamera. so from now own the variable camera will be an arc rotate. scene.activeCamera does not change and will not change for the rest of the code (it is still an object of type Camera).

7

Great, thanks for the clarification!

1 Like
8

Hi There,

I wanted to share here my snippet I’m using with a followup with a question.

// This part is augmenting the module for the rest of your app
declare module "@babylonjs/core/cameras/arcRotateCamera" {
    export interface ArcRotateCamera {
        moveTargetTo(msh: any): void;
    }
}
ArcRotateCamera.prototype.moveTargetTo = function (msh:Mesh) {
    let rot = msh.rotation;
    const ease = new CubicEase();
    ease.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT);
    const deg360 = Rad2Deg(360);

    if (this.alpha >= deg360) {
        this.alpha -= deg360;
    } else if (this.alpha <= - deg360) {
        this.alpha += deg360;
    }

    Animation.CreateAndStartAnimation('camMove', this, 'alpha', 30, 40, this.alpha, -rot.y, 0, ease);
    Animation.CreateAndStartAnimation('camMove', this, 'target', 30, 40, this.target, msh.position, 0, ease);

    // console.log('transitioning to object', msh.name);
};

Applying the above to a camera does the trick to rotate and translate the camera, like this:

camActive.moveTargetTo(msh)

What happens here which is still not the desired behavior, is that sometimes the rotation takes more than 180°, which makes the travel distance unnecessary long.
Is there anyone that knows how to resolve this?

Here is an screen capture to show what’s happening with the code. (camera will rotate facing the x direction each time)

Thanks

9

A few things -

First, alpha is in radians, but i noticed you convert it to degrees, which might not be the desired behavior. it will probably never be more than 360. make sure to stay in radians.

About the long rotation, maybe check if the target rotation is > 180 degrees and decide if you want to animate to 0 or Math.PI * 2. But a playground reproduction will be much more helpful for us to be able to help.

3 Likes
10

Thanks for the tips, I’ll try those here already. If I can’t figure it out, I’ll make a PG out of it.

3 Likes