Loading sketchfab gltf file in a create-react-app

Questions
1

Hi there! Pretty new to WebGL in general but after messing with both three and babylon all weekend I like Babylon way more.

I’m attempting to load a simple gltf model from sketchfab into a React app. After finding other posts and tutorials online I believe I’m doing everything correctly except the model doesn’t want to load textures.
Heres the error I get in the console:

    index.js:1437 BJS - [19:50:54]: Unable to load from tree/scene.gltf: loadAssets of unknown
	Materials:
		Name: 02_-_Default
		Name: 03_-_Default
		Name: 07_-_Default
console.<computed> @ index.js:1437

index.js:1437 BJS - [19:50:54]: Unable to load from tree/scene.gltf: Error in onSuccess callback

However the assets are there in the /public folder called tree, including my textures. I can’t seem to figure this out. The file loads just fine in the Bablyon Playground viewer. Any hints?

2

Hi @geeberry,

Welcome to the community!

A bit more information might be needed for us to help you.

Are you able to successfully load the gltf file without React? I don’t think this is a problem with React

Could you create a Play Ground example?
https://doc.babylonjs.com/features/playground

To load external assets:
https://doc.babylonjs.com/resources/external_pg_assets

Or maybe you can share that gltf file so I can examine it?

Cheers

1 Like
3

Hi there! Thank you

I’m following this example pretty much: https://codesandbox.io/s/91n29pnqko

With the assets being in the /public folder.

The only difference between that example is mine is my /public/sword folder contains the textures in a texture folder. The example I provided doesn’t have a textures folder.

My files are here in the componets/organisms/tree folder and the gltf in the public folder

4

Please try putting the textures in the same folder of gltf file, instead of having its own subfolder.

Let me know if this works :slight_smile:

5

Ok, did that, and now getting a new error

BJS - [22:04:28]: Unable to find a plugin to load .gltf files. Trying to use .babylon default plugin. To load 
from a specific filetype (eg. gltf) see: http://doc.babylonjs.com/how_to/load_from_any_file_type

So I think I need to hunt down a plugin! Thanks for your help

6

:+1:
Hope things work out soon. Let me know if you run into any more problems.

7

Got it to work! Heres my solution for anyone searching for a similar problem in the future:

Just be sure to import the npm loader module fromthis link and import it into your scene file :slight_smile:

1 Like