How to incorporate project.editorproject (from Babylonjs Editor export) into React project?

In the Babylonjs Editor you can write scripts and attach them to objects. You can export this into a project and it’ll run as Javascript. However, I need to be able to put that into a React app and run those scripts from in there. Not sure how that’s possible 'cos React apps get pre-compiled but this project.editorproject file seems to want to be interpreted during runtime. Is it possible to do this within React?

This code will spit out errors if run from a React app:

 // Load extensions
  Tools.LoadFile("./scene/project.editorproject", (data: string) => {
  // Apply extensions (such as custom code, custom materials etc.)
  Extensions.RoolUrl = "./scene/";
  Extensions.ApplyExtensions(this.scene, JSON.parse(data));

  // Run render loop
  this.engine.runRenderLoop(() => {
    this.scene.render();
  });
});

Duplicate with the other topic?

Probably down to the same problem. When I wrote the other post I thought I could compile the project.editorproject file, then I realised I couldn’t do that and now I have this more significant problem

Ok, the way I got this working was to basically copy the the index.html content (exported from the Babylonjs Editor) into the existing index.html in my React project. Then I copied all the dependencies (babylon.js, editor.extensions.js, etc…). I copied the game.ts script and I make sure that its compiled into JS with a command in my package.json file. All the scene files and dependency files are in a public directory.

I can actually access the scene from the React components by storing the scene using window[“scene”] = scene then using postMessage(“sceneLoaded”,"*") to notify the React app that the scene is ready.

I’m not sure if this is the best way but at least it works.

2 Likes