reactjs - Hvordan gjengi flere scener uten å bruke flere threejs-kontekster

Jeg har sett denne veiledningen om hvordan man kun bruker én threejs-kontekst og renderer for å vise objekter på flere lerret, finnes det en måte å overføre resultatet til react-three-fiber på. Det finnes et eksempel på flere scener på GitHub, men det er ikke det jeg ønsker.

Jeg har kommet opp med noe som:

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;

Men jeg føler at jeg mister oversikten over React og react-three-fiber, og jeg vet ikke hvordan jeg skal rendre barna til scenen min.

Finnes det noen måte jeg kan oppnå dette på uten å bli for skitten?

Relaterte artikler