# Multiple canvas multiple scene, each controllable

**URL:** <https://forum.babylonjs.com/t/multiple-canvas-multiple-scene-each-controllable/35568>\
**Category:** Questions\
**Created:** [November 10, 2022, 5:58am UTC](https://forum.babylonjs.com/t/multiple-canvas-multiple-scene-each-controllable/35568 "2022-11-10T05:58:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ne1114](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/ne1114/32/27869_2.png) [@ne1114](https://forum.babylonjs.com/u/ne1114)\
**Post date:** [November 10, 2022, 5:58am UTC](https://forum.babylonjs.com/t/multiple-canvas-multiple-scene-each-controllable/35568/1 "2022-11-10T05:58:02Z")

</div>

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](https://www.babylonjs.com/demos/views/) page. But each canvas holding different scene with different mesh. And all canvas controllable.

Here is where I am so far.

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

```

Inside BabylonViewer component:

```auto
return(
     <Scene clearColor={new Color4(1, 1, 1, 1)}>
        <Suspense fallback={<box name="tmp"></box>}>
          <MeshLoader
            name={`meshLoader`}
            fileInfos={fileInfos}
            onLoadHandler={setMeshLoaded}
          />
        </Suspense>
        <arcRotateCamera
          ref={cameraRef}
          name={`camera`}
          alpha={0} //{Math.PI / 2}
          beta={0} //{Math.PI / 2}
          radius={10}
          target={Vector3.Zero()} //{new Vector3(0, 0.5, 0)}
          minZ={0.1}
          lowerBetaLimit={-Number.MAX_VALUE}
          upperBetaLimit={Number.MAX_VALUE}
          allowUpsideDown={true}
        />
        <pointLight
          name={`light`}
          intensity={0.9}
          position={Vector3.Zero()}
          direction={new Vector3(0, 0, -1)}
          specular={Color3.Black()}
        />
        {canvasRef && canvasRef.current !== null && (
          <engineView
            target={canvasRef.current}
            camera={cameraRef.current as Camera}
          />
        )}
      </Scene>
)

```

I referred to [Support for multiple views rendering multiple scenes · Issue #136 · brianzinn/react-babylonjs · GitHub](https://github.com/brianzinn/react-babylonjs/issues/136#issuecomment-855612053) 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 🙏

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 10, 2022, 8:37am UTC](https://forum.babylonjs.com/t/multiple-canvas-multiple-scene-each-controllable/35568/2 "2022-11-10T08:37:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [November 10, 2022, 10:27am UTC](https://forum.babylonjs.com/t/multiple-canvas-multiple-scene-each-controllable/35568/3 "2022-11-10T10:27:21Z")

</div>

About where to post the code, I have used [https://codesandbox.io](https://codesandbox.io) to ask questions about babylon react before, and it works great 😃

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [November 10, 2022, 5:27pm UTC](https://forum.babylonjs.com/t/multiple-canvas-multiple-scene-each-controllable/35568/4 "2022-11-10T17:27:05Z")

</div>

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 (github.com)](https://github.com/brianzinn/react-babylonjs/pull/253)

You can use EngineView component like how your linked example and react-native Babylon.js:  
[Babylon Basic - Engine View ⋅ Storybook (brianzinn.github.io)](https://brianzinn.github.io/react-babylonjs/?path=/story/babylon-basic--engine-view)

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 (brianzinn.github.io)](https://brianzinn.github.io/react-babylonjs/?path=/story/babylon-basic--viewport)

You can share scenes on an Engine and show one at a time:  
[Babylon Basic - Toggle Scene ⋅ Storybook (brianzinn.github.io)](https://brianzinn.github.io/react-babylonjs/?path=/story/babylon-basic--toggle-scene)

You can register more canvases on the Engine like this:  
[kencyke/react-babylon-multicanvas (github.com)](https://github.com/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.