小编Nao*_*ADA的帖子

我已经看过这篇关于如何仅使用一个 Threejs 上下文和渲染器在多个画布上显示对象的教程，有没有什么方法可以将结果迁移到 React-Three-Fiber。github上有一个多场景的例子，但这不是我想要的。

我想出了类似的东西：

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 …