Hi everyone I am trying to configure webpack with typescript and babylon.js, this is project source code.
The issue is that I can’t load GLTF files or I don’t know how to do it.
I tried installing with “webpack” “file-loader”, but I can’t get it to work.
I saw in the forum that babylon.js already brings the babylonLoaders library, however I do not understand how it works or how to refer to the files that are in the project folder.
Hi @Ariel_Gimenez, you shouldn’t need to modify webpack to load gltf files.
Babylon comes with default loaders, but they do not natively support GLTF and GLB files. The line:
import 'babylonjs-loaders';
which, notably, doesn’t actually import a module (“purely” causes side-effects), patches the default loaders to handle GLTF and GLB.
Can you describe your errors in more detail?
Do you have a tutorial on how to use babylonloaders when using webpack?
There is no info in the official documentation about it.
I mean, I want to compile the assets to the main project folder but it seems that babylon.js was not designed to do things so easily with “webpack” or I can’t find info on how to do it, I’ve been looking for info for days, but there’s no way to do it function.
In my case I also tried “file-loader” but it doesn’t work.
Do you understand what I mean?
Look at this video
I don’t know how to use babylonLoaders, but look, I import the library and nothing happens.
Look here is the source code.
To compile:
npm run build
To run server:
npm run server
If I understand…
You are using import “@ babylonjs / loaders / glTF”.
Download the source code for that project, I’ve actually been trying to get the assets working for days.
I see that in your case you made it work this way.
But in my case I want to use:
In the documentation it is clarified that this syntax is to use external assets and compile them with webpak, however there are no examples of how to use it.
add this to your project - babylonjs-webpack-es6/externalFileTypes.d.ts at master · RaananW/babylonjs-webpack-es6 · GitHub
Look it doesn’t work.
I can also do this, but I can’t find the .glb extension and I can’t find the .babylon extension either
Look, the error you showed before had nothing to do with babylon loaders. If you want to import a file type that is not .ts you will need to declare it. You can remove everything apart from the *.glb (if you want to load .glb), and it does work because you can see it working in the project i linked before.
Try compiling and see what the error is. IDEs are sometimes not loading correctly or only partly loading the project. restart the ts server. anything to make the project reload. Make sure your tsconfig is configured correctly.
And maybe show the actual error you get when trying to compile/build the project. otherwise we can only guess what the issue is.
OK, thank you very much, for the moment I’m going to leave these 2 images showing that I have the imported library just like you do, but I don’t do it with @ babylon, however it doesn’t work.
The tsconfig.json is exactly the same as in the official documentation.
I really can’t understand why it is so difficult to load assets, it would have to be the simplest, it can’t be that it takes 1 week to find information about it and in the end I don’t have a concrete solution … I spent 3 months with babylon.js From morning to night, I was excited about the engine, but I see that it fails in basic things … Possibly it is also due to my lack of knowledge. This reminds me of Godot Engine when many say free software is the best, but at the same time When exporting a game it becomes a nightmare, the final floor of the files is extremely large and has many bugs that if you report them on github they literally mistreat you.
As you will see, my comments are not 2 lines, they are well founded with many images and videos. I am not playing.
A pity, I had a lot of faith with babylon.js, but I will have to continue my path with UNITY, I will return here when things are a little more mature … Thank you very much for your time …
If I may - this is not a babylon issue. This is an issue with understanding how typescript is working and how import is working, and how es6 is working, and how npm is working. And how webpack is working. And how to combine them all. Notice that I asked - what is the error you get during the build process. What do you get when you are actually trying to compile the project.
Here is my recommendation. You can take it or leave it. You are trying to jump head down into a very deep pool from the 10m board (again - all of these are not (!) babylon related). Try jumping from the 3 meters (or maybe the 1 meter) and master it. Try a webpack project with javascript only. Understand how import works. Understand how webpack loaders work. Then move to es6. Understand how tree shaking works. Understand how javascript modules are loaded. Move to typescript. Understand what the different tsconfig parameters are doing, and why the heck can’t you manage to compile. We’ve all been there. I still am too!
The project I linked before is a ready-to-use project, with everything you need. But you insist on using different methods, and wonder why they don’t work, even when we explain it.
I created the linked project exactly for that reason - there was a confusion as to how to use the latest and greatest, how to combine all of those goodies the web offer us into one working project.
A 7 years old project, being used on production websites all over the web is mature. Or at least this is my opinion.
OK thank you very much.
I’m totally agree with @RaananW.
I start using babylonjs 4 months ago, dreaming of making my own 3D web game. I started with very basic and outdated knowledge in javascript/npm/vscode, and no knowledge in typescript, webpack and babylonjs (and many others technologies 
). So, after many days working on babylonjs I realized that working with babylonjs or any other web technologies requires understanding and learning a lot about web ecosystem. Without these knowledge, everything is painful, even the “easy” and “basic” features (like managing assets 
).
In my opinion, if you want to go further with babylonjs, you have to follow @RaananW’s advice.
But if you want to quickly start a typescript project with babylonjs without a deep knowledge of the web ecosystem, you just need to use the @RaananW’s project as a starting project for your game (but when your project will be more advanced you’ll probably need to learn more about these technologies).
Sometime it’s very frustrating to spend a week to learn things which are not directly related with your game or app, but conversely it’s very rewarding to learn how to use new tools and understand how they work. And in one way or another you don’t have the choice if you work alone on your web project.
Hope you won’t give up on your babylonjs based project: it’s a powerful 3D framework followed by an amazing community always ready to help beginners like me.
Look, I use several engines and I have an overview of how things work. This engine is missing a lot because it fails in basic things, for example not explaining in the documentation how to load 3D models “gltf” using webpack. I spent 3 years with godot to realize that it is not useful to produce games because it is a tool that is still in development and even if they say that it is STABLE it is not. I can tell you many things to show you that sometimes free software is not so nice as they paint it, godot for example exports the complete engine and the games are extremely heavy. I know that there is a very great complexity and I have to go in small steps, but the error is in not commenting on how to solve these problems … You look at the documentation and although they explain basic concepts they do not explain how to build a serious project with webpack and they do not have examples, I know that the other user gave me a project and everything, but I want to see the documentation and understand why they develop those tools and why they do make it work that way … I also want to say that babylon.js is among the best engines for web, with three.js you can’t even access objects using tags, when I saw that I said bye … If there are no criticisms of an engine, the creators will think that everything is fine and it is not like that … They will continue to do tutorials on things that are not so essential … I thank you very much for your advice and I assure you that I will have it. The knowledge is always developing so when I have more knowledge and see that the tool and the documentation are better developed I will return. I am not paid to use the tool, nor develop it, so I am free to give my opinion and say what I want … Let everyone take it as they want … Here on Godot’s github or wherever.
I understand why you say it but this is not really related with BJS but more with webpack. We could obviously add doc for it, but then we need to do it for all features right? Why just loading an asset? Why not also how to use particles, etc…
Again the point is about learning web tech first and honestly Raanan did a very good job going with the basics: GitHub - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely.
Like us 
OK thank you very much
Neat idea of using webpack to load models. I figured my project I’d just use the network and show some sort of progress bar. Some for a few models reused for every scene this could be useful like the avatar… I do get frustration as someone who also is playing with Typescript, React, Webpack even without touching the Babylon part it seems like somethings that should be simple aren’t, and then I noticed sometimes I’d edit config files or install @types/packages and my code editor would still complain unless I restarted it. So I agree not a Babylon issue in itself, but more of the way the current ecosystem is I guess.
I think I understand the OP’s frustration a little bit…
I joined in the rant, it was pretty funny, but also it was a bit hot. Maybe that’s not the best way to ask for changes from developers that are giving you stuff for free. It’s awesome that this is all offered for free and clearly there’s a lot of fantastic stuff.
I’ll just say that I certainly would appreciate more in depth documentation on getting a project started. I get that in general you don’t want to explain the inner workings of every third party tool or borrowed functionality, like where would it end and all. However, I think that if there are plugins and third party things that are basically fundamental in getting a basic project started then ya, it would be nice to have some more in depth explanations of their importance and functionality in respect to the engine. I know I can grab RaananW’s starter kit from github, and that’s great and all, but I’ll probably change one thing and break the whole thing and have no idea why.
Also I get the 10m diving analogy, but at the same time the Babylon promotional material really makes it sound like you are walking into a kiddy pool. It’s all about the playground and the word “simple” appearing every other line… and almost no mention of npm or webpack or dependencies anywhere. So, that’s the answer to why OP and myself are diving into waters we can’t yet handle.
