Please supply info for module imports on page for babylon object

Questions
1

Hi All

So I am using the es6 modules in a vue project , I want to try the importing the individual classes to benefit from enhanced tree shaking as the documents state , but now how to know what the import path is for each thing you need?

So I thought open the docs , search the object , in this case “CubeTexture” and get the needed info …

this actual object page is just documentation on the methods and fields etc… also all other pages showning example code do not show any imports of the object.

So to me this is info I expected to be able to get instantly when searching the object in the docs.

Unless im doing something wrong here , how else are we supposed to find the import path for every babylon object in a logical manner? ( without having to go manually dig in the modules folder and figure it out the long way )

thanks

edit again , tried for searching “GlowLayer”

same problem , GlowLayer page only has info on methods and fields , and how to page for GlowLayer has code examples that dont show the import path.

2 Likes
2

The tree shaking import path is same as the path in babylon.js source code. Need to remove src from the path. So searching in babylon github repo helps. E.g.

https://github.com/BabylonJS/Babylon.js/blob/76c7589bad76742942be66d157a297fc64ceb697/packages/dev/core/src/Materials/Textures/cubeTexture.ts

https://github.com/BabylonJS/Babylon.js/blob/fdbf393d1d7699dc7cc69cec1dca0819ebd2622a/packages/dev/core/src/Layers/glowLayer.ts

But yes, it would be more helpful if the path is available in documentation.

3

yup , i soved it by just looking in the modules folder , but yeah , in the docs would be neat :wink:

4

cc @RaananW :slight_smile:

5

@sebavan

there might be a bug somewhere in these imports ,

if I try :

import “@babylonjs/core/Materials/Textures/Loaders/envTextureLoader”;

VSC is underlining it in red saying :

‘c:/wamp64/www/configurator_vue/node_modules/@babylonjs/core/materials/Textures/Loaders/envTextureLoader.d.ts’ only in casing.

the issue being the word

materials

the actual directory on disk is uppercase , so i use that and it compliles , but why is it marking it as an error in the codeview with the above description?

obviously if I try make it lowercase , I then gen a compile error.

So something is not correct here. looking at package json i now see :

“dependencies”: {
“@babylonjs/materials”: “^5.17.1”,
“@babylonjs/post-processes”: “^5.17.1”,
“axios”: “^0.26.1”,
“bootstrap”: “^5.1.3”,
“bootstrap-vue”: “^2.21.2”,
“bootstrap-vue-3”: “^0.1.10”,
“core-js”: “^3.8.3”,
“gsap”: “^3.10.3”,
“latest-version”: “^6.0.0”,
“pinia”: “^2.0.13”,
“vue”: “^3.2.32”,
“vue-router”: “^4.0.14”,
“vue-screen”: “^2.1.0-beta.1”,
“xml-js”: “^1.6.11”
},
“devDependencies”: {
“@babel/core”: “^7.12.16”,
“@babel/eslint-parser”: “^7.12.16”,
“@babylonjs/core”: “^5.17.1”,
“@babylonjs/inspector”: “^5.17.1”,
“@babylonjs/loaders”: “^5.17.1”,
“@vue/cli-plugin-babel”: “~5.0.0”,
“@vue/cli-plugin-eslint”: “~5.0.0”,
“@vue/cli-plugin-router”: “~5.0.0”,
“@vue/cli-service”: “~5.0.0”,
“css-loader”: “^6.7.1”,
“dotenv-webpack”: “^7.1.1”,
“eslint”: “^7.32.0”,
“eslint-plugin-vue”: “^8.0.3”,
“file-loader”: “^6.2.0”,
“raw-loader”: “^4.0.2”,
“style-loader”: “^3.3.1”
},

notice the lowercase materials in dev dependancies.

The thing here is this is a fresh project and I used the documentation links to install everything you see here ( babylon related of course )

this page :

anyway i dont know if it is related , but looking at the modules folder Im wondering how/why you have inconsistancies with upper and lower case directory names? you do in fact have a directory at root level named “materials” and one in core named “Materials” , same for loaders etc…

6

the minor case one is for the npm module as restricted by npm namings. the upperCase one is for directories :slight_smile:

I can not understand why vsc is showing the error except if smthg is importing from materials/Textures and I cannot find this in the code.

@RaananW might have an idea ?

7

yes something is clashing somewhere , here is a screenshot :

image
image1920×1040 108 KB

again as noted , VSC is showing the file in red and the red underline BUT it is compiling ;). If I change the materials word to lowercase , VSC removes the red underline and red file name like there is no error , but then it does infact bomb when compiling due to the name being wrong… bizarre

8

solved the issue above atleast , it is a VSC bug, i must have had the import statement with lowercase in the file before , and when I changed it I also renamed my file extention from .js to .vue.

I looked into the error properly and saw it was reporting the conflict from the .js version of the file - which didnt even exist anymore. So this is a VSC bug , rebooting VSC resolved it.

anyway I guess this drives the original concern of the thread to need a easy access documentation of object import paths :wink:

9

Thanks for the update :slight_smile:

Yes, but there should not be an issue or a clash in any way. One is in @babylonjs/core, and the other one IS @babylonjs/materials. These are two different packages. The fact the core has a Materials directory won’t prevent you from using the materials package.

Not sure what exactly is expected here. The full path of every file? Will you as a developer use such a page? VS Code provides auto-complete that works in 99.9% of the times. Ok… maybe 95%? But it does work when the setup is correct. You just need to make sure to load the files correctly.

10

Thanks Raanan

yeah I guess it was the outlook of a day 1 first time properly building using es6 and per object importing and just not being familiar with the framework structure. Obviously autocomplete requires some understand of the expected path , like spell check :wink: If you have no cooking clue how to start spelling the word , it cant help you either haha.

Anyway that does soon dissapear after a day or two because you become familiar with the paths.

So actually to say what I expected when I made this post ( which is probably unreasonable ) was not a single resource with all paths in one place, but rather, on the page for each object in the docs , eg say TransformNode :

to then show the es6 import path on that page , like :

“@babylonjs/core/Meshes/transformNode”

Ive used such pages of the doc plenty before when looking at the objects fields and methods but never thought about the need for the es6 path info until I was wanting that info and kind of then expected to logically find it here? Maybe a blond moment i agree but maybe something to consider for devs like me who have blond moments :wink:

11

That’s the file’s path in the repository.

I agree with you - it would make sense to have some connection between the api docs and the code. And I will be really happy to work on doing that :slight_smile:

I’ll assign myself, but this will take a little while till I have the time for this.

The es6 package structure is the same as the github source structure. So that might be helpful until then.

2 Likes
14

Here I am in Feb. 2025, wishing that the es6 import path was listed in the api docs. Guess that’s not gonna happen. Not being a vscode user, I’m just out of luck. find -exec grep it is