Mixing vanilla js and react questions

Questions
1

hi all

So i have a situation where another developer is building a microsite using react. Im handling the babylonjs part , but im not using react.

Does anyone have experience with this scenario. Obviously when googling babylon and react you get pages of examples of how to use babylon within the react framework , like you are the babylon and react developer.

so basically i want the best means to just include my non react code into the react code. does that make sense?

meaning importing babylon using script tags and my code also via two script tags , then that developer just needs to initiate the code and pass in the target canvas

eg

<head>    
    <script src="https://cdn.babylonjs.com/babylon.js"></script>
    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>    
    <script
      type="text/javascript"
      src="brain3dapplication/js/BabylonScene.js"
    ></script>
    <script
      type="text/javascript"
      src="brain3dapplication/js/Brain3DApplication.js"
    ></script>
  </head>

<script>
window.addEventListener("DOMContentLoaded", function (event) {
        canvas = document.getElementById("render-canvas");
        //create the application
        brain3DApplication = new Brain3DApplication();
        //add a listener to know when the scene is ready
        brain3DApplication.addEventListener(
          EventNames.LOAD_COMPLETE,
          onLoadComplete
        );
        //initialize the application, this will set up the scene and load the 3d model.
        brain3DApplication.initialize(canvas, initializeOptions);
      });
</script>
2

Hey, so in general you want to integrate BabylonJS as any other 3rd party library.

So either you do this in componentDidMount (class component) or in useEffect (function component).

1 Like
3

I wonder if there is any simple (working and not outdated) repo for this somewhere.

4

You could consider mounting the react element yourself to an element in your site:
ie: create-react-app-typescript-babylonjs/index.tsx at master · brianzinn/create-react-app-typescript-babylonjs (github.com)

edit: I think I have it backwards. There is a react site and you want to include your script. What about just having a method like the playground createScene - that’s what babylonjs-hook NPM does essentially. You get a callback with a Scene and Engine - you’d want to have the React site setup your engine constructor options going that route, but you can also just copy the code from that repo and customize as well.

1 Like
5

Thanks for this input gents.

The react developer has a link to this thread and im sure the docs @neu5 shared have the answers this developer should be familiar with. @brianzinn , your edit message points to the correct logic and is what neu5 was correctly addressing. @labris , indeed an example of this would be great , perhaps after this is complete i can look at how to create something like that for other in the future , a codepen perhaps.

I am a vue developer so i have done this in vue before and also moved to using npm version after that. So atleast i do know it is possible to do these things with framworks. :wink:

I know its not ideal , but not all situations are. Same thing with webpack , it’s not always ideal to have local assets managed by webpack and so i put them in the public directory so they are just copied across as is at build time.

3 Likes