Implementing Babylonjs in typescript

Questions
1

Hi,
I’m trying implementing Babilonjs with Typescript. I’m following this playground to understand how Babylonjs works, but I don’t understand which library I should import.

I installed the following packages (from package.json):

  • "babylonjs": "^4.1.0-beta.18",

  • "babylonjs-gui": "^4.0.3",

  • "babylonjs-loaders": "^4.0.3",

  • "babylonjs-materials": "^4.0.3",

  • "babylonjs-post-process": "^4.0.3",

  • "babylonjs-procedural-textures": "^4.0.3",

  • "babylonjs-serializers": "^4.0.3",

  • "babylonjs-viewer": "^4.0.3",

In my component I defined the following import:

    import * as BABYLON from 'babylonjs';

I get lots of errors as you can see in the following image. I have read the documentation of Solid Particle and the property “direction” (like the others) does not exists in “SolidParticle”. I’m pretty sure I have to include something else but I don’t understand what is it.

screenshot2
screenshot21514×966 138 KB

In the zip file there are: component, html and css files.

testBJS.component.zip (3.7 KB)

Can you please help me to understand what I’m doing wrong?

Thanks

2

Hi,

you will soon find out you made the right decision using babylon AND typescript, but it takes some getting used to and a bit of change in the way you develop.

I would recommend following this page:

https://doc.babylonjs.com/features/es6_support

Also, note that babylon versions are the same throughout all packages, so if you install a specific version for the core, install the same version to all others.

1 Like
3

Thanks @RaananW for your answer, I have read the documentation and I have added the following imports but the property “direction” is still not recognized:

     import * as BABYLON from '@babylonjs/core/Legacy/legacy';
     import { SolidParticle } from '@babylonjs/core/Legacy/legacy';
4

that’s because a solid particle doesnt have a directrion property. nor centre or axis.

If you are trying to add properties to the class, you will need to store them outside of this class or extend the solid particle class, but that would require extending the solid particle system as well.

BTW - you dont have to use the legacy mode if you want specific classes (it is better not to use the legacy load)

5

I have taken this playground as example where the property “direction” is defined.

So basically, the javascript and typescript versions of Babylonjs are different?

6

yeah, javascript is more permissive, with the downside that you cannot track what you did 4 lines ago :slight_smile:

the direction in this example is just used to update other properties of the particle. i would use external data objects for that.

4 Likes