Export typescript prototype to use from external script.ts file

Questions
1

Hi,

I’d like to split up my code in multiple files with typescript.
It’s the following function

export const ArcRotateCamera.prototype.moveTargetTo = function (tgtObj) {
    var ease = new CubicEase();
    var cam = this
    ease.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT);

    let parent = tgtObj;
    let halfSize = parent.getBoundingInfo().boundingBox.extendSizeWorld;
    let size = halfSize.scale(2);
    var objSize = size.x * 8;

    // >>> Wait for second animation for x msec
    Animation.CreateAndStartAnimation('camMove', cam, 'radius', 30, 40, cam.radius, objSize, 0, ease);
    setTimeout(function () {
        Animation.CreateAndStartAnimation('camZoom', cam, 'target', 30, 35, cam.target, tgtObj.position, 0, ease);
    }, 50);
    setTimeout(function () {
        // Log(tgtObj.rotationQuaternion.y)
        Animation.CreateAndStartAnimation('camRot', cam, 'alpha', 30, 35, cam.alpha, tgtObj.rotationQuaternion.y, 0, ease);
        // Alpha alignment isn't correct yet
        // Add BetaRotation to same animation
    }, 50);
}

When I use my previously created code (for JS) here in TS, I get the following error:

image
image889×608 42 KB

Thanks a lot

2

you can not export as such.

The way to do so in TS is usually looking like this:

// This part is augmenting the module for the rest of your app
declare module "@babylonjs/core/.../arcRotateCamera" {
    export interface ArcRotateCamera {
        moveTargetTo(tgtObj: any): void;
    }
}

// This part is the related implementation
ArcRotateCamera.prototype.moveTargetTo = function (tgtObj) {
...
};
2 Likes
3

Thanks I’ll make sure to try this out!

2 Likes
4

Hi @sebavan,

I’ve had the time to test with the snippet you provided here.

declare module "@babylonjs/core/cameras/arcRotateCamera" {
    export interface ArcRotateCamera {
        moveTargetTo(tgtObj: any): void;
    }
}

I added /cameras/ instead of /…/ because that gave me an error because the module couldn’t be found.
So with cameras that was resolved.

However in my main.ts file I still get this:
image

I would expect to have something as this in my code file where I’m importing from…

// CODE A
ArcRotateCamera.prototype.moveTargetTo = function (tgtObj: Mesh) {
    console.log(tgtObj.position);
    // camera transition here based on the target object
};

And this in my main file where I import to:

// CODE B
newCam.moveTargetTo(target)

But as it’s not exported in code A, It’s not recognized in code B

image
image1589×321 47.8 KB

main.ts file on the left setup at the right

import * as SETUP from './setup';
5

This should work as long as newCam is of type ArcRotateCamera. Could you share a repro on github for instance ?

This is what we use internally: Babylon.js/engine.externalTexture.ts at master · BabylonJS/Babylon.js · GitHub

1 Like
6

Thanks @sebavan I got it working now :ok_hand:

1 Like