How to load gltf assets in a webpack (React.js) setup? (With online demos)

[fateriddle]

It is pretty weird I've never be able to load and present .gltf assets in webpack setup.

Using simple html + js, I can do as tutorial to pull it off like in this demo https://codesandbox.io/s/xlox878mwp

But if I'm using a React.js template (basically any webpack setup), there's always erro: the asset can't be find / unexpected token in JSON. Like in this one https://codesandbox.io/s/8l2xlq27x0

Why, and how to solve it? Big thanks!

[ssaket]

Hey ! This happens because of the SceneLoader's asset/resource path finder algorithm, it doesn't check for relative paths and tries to take the index.html's path as the base/root location and based on this locates the assets. { ../ , ./ doesn't work ! }

Possible solutions -

1. Using imports and replacing all the hard coded string values (just like we import images) but problem with this is we might not know how many imports to make !

2. Other solution is to place the assets in the root dir (in this case /public) rather than in /src, but again, it has its own disadvantages like compressing etc. 

 

Feel free to choose any one of above, here are the updated files (https://codesandbox.io/s/1z65177p73)

You also have Webpack copy plugin (https://github.com/webpack-contrib/copy-webpack-plugin)  which copies the resource and dumps it into dist or anywhere else and public path for your envs  https://webpack.js.org/guides/public-path/ 

[Tomek]

You need to keep it as static file somehow (even though it's not imported anywhere in the code), with Create-React-App you do this by putting the model into public/ directory - https://codesandbox.io/s/5vj36805nk

[fateriddle]

@Tomek  @ssaket

Thank both of you! While you were at it, the sword is shiny in sketchfab page https://sketchfab.com/models/b91d50762282401cacbdbf8e563f8a4c, but when I load it to the scene, it looks so dark and ugly... How do I usually fix this kind of problem? Should I just guess what the environment light maybe? 

And also do you usually download assets from sketchfab, or just build your own?

[ssaket]

pinging @Dad72  for help  

[Dad72]

I do not use gltf, I do not know how to help with this subject, sorry.

[bghgary]

I just tried the glTF file downloaded from Sketchfab in the sandbox and it looks shiny.

If you have your own scene code, then you need to add an environment for metallic objects to look shiny. The easiest way to do this is by calling scene.createDefaultEnvironment.

[brianzinn]

here is the sandbox with a shiny sword
https://codesandbox.io/s/91n29pnqko

you should be able to get what you need from the environment helper itself as well:
https://github.com/BabylonJS/Babylon.js/blob/9c256552816a12b51553880905dfab41758b007c/src/Helpers/babylon.environmentHelper.ts

The thing with webpack is that if you import meshes they are created as a module and I think the default for webpack is a base64 encoding.  For webpack loaders check out 'file-loader' and 'url-loader'.  I think the best option is public URL as in the sandbox, especially as the GLTF triggers the loading of the .bin file, otherwise I think you would need to bundle as a .GLB.  I would suggest creating an empty CRA project and ejecting it and having a look at the webpack there, as it can be quite insightful.  Cheers.

[fateriddle]

6 hours ago, Dad72 said:

I do not use gltf, I do not know how to help with this subject, sorry.

What do ppl usually use? .babylon file? 

@brianzinn Thank you! I didn't know you could use

let model = scene.getMeshByName("__root__");

to get the model.

1. Now I want some animation for the whole model (usually consist of more than one mesh), but I couldn't do it, can you help to check this sandbox: https://codesandbox.io/s/91n29pnqko ?

2. Also, I'm wondering if you load more than one assets into the scene, you can't use let model = scene.getMeshByName("__root__"); every time right?

[Dad72]

4 hours ago, fateriddle said:

What do ppl usually use? .babylon file? 

I do not know what you mean by PPL ? Private Pilot Licence (which allows to fly motorized planes) ?  I do not see the relationship with Babylon. I miss something I think, but I just woke up that's probably normal. ?

[fateriddle]

23 minutes ago, Dad72 said:

I do not know what you mean by PPL ? Private Pilot Licence (which allows to fly motorized planes) ?  I do not see the relationship with Babylon. I miss something I think, but I just woke up that's probably normal. ?

Haha, I'm not native speaker, thought ppl meant people... my bad. Thank you for your humor  Just dive in this whole new area, always wonder what experienced developer use, regarding to assets.

Btw, a random question, can you trigger something in the middle of an animation? Like if at the end, there's a callback onAnimationEnd. But say if I want to do something when an animation plays to frame 120, how do I do it?

@Dad72

[Dad72]

Yes you have a callback at the end of the animation, but nothing prevents you from performing another action during an animation.

Just use a setTimeout after triggering an animation to do something.

Knowing that your action should not be in a loop for it to fire only once. Besides, an animation is not in a loop, it is the displacement of the object that must be.

After that depends also if you speak of animation of skeleton or animation of any object.

But with a little bit of code and logic, you can do any action before, during, and after an animation by creating offset with setTimeout.

PS: Yes a bit of humor in the morning does not hurt for the morale