What is the best way to pass information from react to babylon

Questions
1

I have react application where user can edit game settings. For exapmle user want to change speed of ball from 10 to 15. I want to transfer this settings in my babylon app. In Game component I have only build of my babylon project.
It’s the way how I import it:

const Game = () => {

useEffect(() => {
    const script = document.createElement("script");
    script.type = 'text/javascript';
    script.src = "js/bundleName.js";
    script.defer = true;
    document.head.appendChild(script);
    return () => {
        document.head.removeChild(script);
    }
}, []);

return (
    <div className="canvasField">

    </div>
);
};

Can you give me any suggestions how to tranfer data. My solution is using global varaibles, but I think it’s not cool

2

I found eventbus to be the best way. Been down the road of tying Babylon to Redux/React state tightly and was a bad idea with it becoming quite unmanageable.

I keep my components pretty encapsulated and not much props passing, instead choosing to use the events a lot between Babylon and React, both directions.

1 Like
3

You should look into using Redux with connect and reselect library and immer.js for automated unidirectional data flow. I have this working very well for 3Designer.app, with custom channel undo/redo actions - i.e. full time traveling - which should be very useful for games.

All user interactions with your game then becomes an action (Flux Standard Action is recommended).
Demo code of how easy and elegant it is to enable/disable undo/redo:

import produce from 'immer'
import { handleActions } from 'redux-actions'

// HOC to make any action undoable
const undoable = undoHandler(`${PROJECT}.${MATERIAL}`)

export default handleActions({
  // reuse common logic
  ...commonActions(MATERIAL),

  // this is undoable action
  [actionType(MATERIAL, APPLY)]: undoable(applyMaterial),

  // this action is not undoable
  [actionType(TEXTURE, SELECT)]: produce(setActiveEntry),
}, initState)
1 Like