Jump to content

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


fateriddle
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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/ 

Link to comment
Share on other sites

@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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. ?

Link to comment
Share on other sites

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 :D 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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...