Multiple canvas multiple scene, each controllable

Hello, I am new to BabylonJS and still trying to learn.
Currently I am trying to do following task:

  • Have an array of mesh
  • Iterate through mesh and create a scene for each mesh on a different canvas. And each scene is controllable independently. (Drang, zoom, translation, etc)
  • Want to use react-babylonjs (If too tricky, i’m willing to switch to non-react syntax(?)… in such case, example code would be super helpful)

btw, if there is a way to write react-babylonjs style code into a PG, please let me know.

I have referred to multiple posts in the forum and documentation as well as react-babylonjs issues. Haven’t been able to figure out best solution yet.

I expect to see something similar to this page. But each canvas holding different scene with different mesh. And all canvas controllable.

Here is where I am so far.

{isLoaded ? (
              canvasStyle={{ width: '100%', height: '100%' }}
                fileInfos={[...commonFiles, uniqueFiles[0]]}
                fileInfos={[...commonFiles, uniqueFiles[1]]}
        ) : null}
        <div className="grid">
            className={`relative rounded h-40 w-80`}
            <canvas ref={canvasOneRef} />
            className={`relative rounded h-40 w-80`}
            <canvas ref={canvasOneRef} />

Inside BabylonViewer component:

     <Scene clearColor={new Color4(1, 1, 1, 1)}>
        <Suspense fallback={<box name="tmp"></box>}>
          alpha={0} //{Math.PI / 2}
          beta={0} //{Math.PI / 2}
          target={Vector3.Zero()} //{new Vector3(0, 0.5, 0)}
          direction={new Vector3(0, 0, -1)}
        {canvasRef && canvasRef.current !== null && (
            camera={cameraRef.current as Camera}

I referred to Support for multiple views rendering multiple scenes · Issue #136 · brianzinn/react-babylonjs · GitHub this issue to write above code.

Issue with the codes above is that I only want canvasOneRef canvasTwoRef to render but the <BabylonViewer> also renders on its own canvas. → Meaning I get total four screens. Two from <BabylonViewer> which I can control, and the other two on <canvas> where I add view.

Can someone help please… Would really appreciate y’all’s help :pray:

Adding @brianzinn the wizard behind babylonjs-react to see it it is supported ?

1 Like

About where to post the code, I have used to ask questions about babylon react before, and it works great :smiley:

1 Like

There are a few different ways to approach. Easiest way is to have an Engine for each Scene and loop your models to make scene + engine. That will perform OK with 2 models, but degrade as you add more. You can use a prop where the scene will only render if it is visible on the screen (ie: if you scroll out of view it’s not rendered) to make it perform better.

I have a new PR this morning that may be useful if you want to render multiple engines on-screen simultaneously:
Render on Demand by dennemark · Pull Request #253 · brianzinn/react-babylonjs (

You can use EngineView component like how your linked example and react-native Babylon.js:
Babylon Basic - Engine View ⋅ Storybook (

But I think the example doesn’t refer to what you actually want to do, because you also said you want different scenes.

You can also use views like here:
Babylon Basic - Viewport ⋅ Storybook (

You can share scenes on an Engine and show one at a time:
Babylon Basic - Toggle Scene ⋅ Storybook (

You can register more canvases on the Engine like this:
kencyke/react-babylon-multicanvas (

There are a few ways to go about it - even portals to other canvases, etc. I think it’s better to get a working PG or repo even imperative (but I haven’t seen PGs with multiple Scenes)… and then work backwards.