solved Trouble loading assets in React

[hcmetal]

Hello, everyone!

Following the docs: https://doc.babylonjs.com/resources/babylonjs_and_reactjs, I ported a simple Babylon project into React.

The project was previously written in plain JavaScript using ES6 modules, and everything was working well.

In React, everything(engine, scene, cam, light...) is working except asset loading, including .babylon files, textures and .env files.

Details:

1. Using create-react-app, dependencies:

"dependencies": {

"babylonjs": "^3.3.0-rc.4",

"babylonjs-gui": "^3.3.0-rc.4",

"babylonjs-loaders": "^3.3.0-rc.4",

"react": "^16.5.2",

"react-dom": "^16.5.2",

"react-scripts": "1.1.5"

},

2. Import necessary Babylon modules:

import * as BABYLON from "babylonjs";

import "babylonjs-loaders";

import * as GUI from "babylonjs-gui";

3. Load .babylon file:

BABYLON.SceneLoader.ImportMesh( "", "./assets/", "hotel-lower.babylon", scene, function( newMeshes ) { });

Error in Chrome console:

index.js:2178 BJS - [10:53:33]: Unable to import meshes from ./assets/hotel-lower.babylon: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse

4. Load .env file:

const hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData( "./assets/day.env", scene );

Error in Chrome console:

index.js:2178 BJS - [10:53:33]: Not a babylon environment map

5. Load texture file:

const iconFly = new BABYLON.GUI.Image( "btnIconFly", "./assets/icons/icon-fly.png" );

The textures (png icons for gui) doesn't report errors in console, they just simply refuse to show up on the screen...

It's basically the same code, loading the same assets, running in the same browser, just not working in React.

Maybe I'm using react in the wrong way, and static assets should be loaded in some other fashion?

I'm pretty new to all these and might be missing something right under my nose, making a fool of myself.

Anyway, hope some wise people can point me to the right direction.

Thanks a lot!

 

[Guest]

Perhaps our React Master? @brianzinn

[brianzinn]

Did you try setting your roorUrl parameter to:

'/assets/'

I am guessing that if you look in network monitor you will see they are not there.  Additionally, if you are using CRA (Create React App), then the assets folder is in /public/ and those folders are available in your http server from '/'.  If you are not publishing to the root folder (ie: github pages) via package.json 'homepage', you can use process.env.PUBLIC_URL

Let us know if that doesn't work.  Send a screenshot of what is in your network tab, as it looks like you may be getting some kind of 404 (ie: content not available)

[hcmetal]

Thanks guys!

Moving the assets folder to /public/ totally solved the problem. I can access all the stuff through '/assets/'. Now everything is working beautifully.

Amazing, I am learning React 101 in Babylon's base camp. That's how great this community is.

Cheers!

[brianzinn]

Thanks for confirming hcmetal.  I have written myself a todo and will add that info to the docs.  Have a nice weekend (and feel free to mark as solved).  Cheers.