reactjs - چگونه بدون استفاده از چندین کانتکست threejs چندین صحنه را رندر کنیم

من این آموزش را دیدهام که چگونه فقط از یک context و renderer سهجیاس برای نمایش اشیاء در چندین بوم استفاده کنیم، آیا راهی برای منتقل کردن نتیجه به react-three-fiber وجود دارد؟ یک نمونه از چند صحنه در گیتهاب وجود دارد اما این چیزی نیست که من میخواهم.

من چیزی شبیه به این به ذهنم رسید:

import React, { useMemo, useEffect, useRef } from 'react';
import * as THREE from 'three';

function useRenderer() {
  const renderer = useMemo(() => {
    const canvas = document.createElement('canvas');
    return new THREE.WebGLRenderer({canvas, alpha: true})
  }, []);

  return renderer;
}

function Scene({ renderer }: any) {
  const ref = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (ref.current) {
      const {left, right, top, bottom, width, height} = ref.current.getBoundingClientRect();
      const isOffscreen = bottom < 0 || top > window.innerHeight || right < 0 || left > window.innerWidth;
      const ctx = ref.current.getContext('2d');

      if (ctx && !isOffscreen) {
        const rendererCanvas = renderer.domElement;

        if (rendererCanvas.width < width || rendererCanvas.height < height) {
          renderer.setSize(width, height, false);
        }

        // make sure the canvas for this area is the same size as the area
        if (ctx.canvas.width !== width || ctx.canvas.height !== height) {
          ctx.canvas.width = width;
          ctx.canvas.height = height;
        }

        renderer.setScissor(0, 0, width, height);
        renderer.setViewport(0, 0, width, height);

        // copy the rendered scene to this element's canvas
        ctx.globalCompositeOperation = 'copy';
        ctx.drawImage(
            rendererCanvas,
            0, rendererCanvas.height - height, width, height,  // src rect
            0, 0, width, height);                              // dst rect
      }
    }
  }, [ref, renderer])

  return <canvas ref={ref} />;
}

function App() {
  const renderer = useRenderer();

  return (
    <div>
      <Scene renderer={renderer} />
    </div>
  );
}

export default App;

اما احساس میکنم دارم از React و react-three-fiber فاصله میگیرم و نمیدانم چگونه فرزندان صحنهام را رندر کنم.

راهی هست که بدون اینکه زیاد کثیف شود بتوانم این را انجام دهم؟