Jump to content

Trouble loading assets in React


Recommended Posts

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.


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"scenefunctionnewMeshes ) { });

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

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

Thanks a lot!


Link to comment
Share on other sites

Did you try setting your roorUrl parameter to:


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)

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.

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.


  • Recently Browsing   0 members

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