2d-графика в React с three.js

[Alexandroppolus]

ThreeContainer сделан как-то переусложненно и не совсем правильно. Я бы так сделал:

Заголовок спойлера

const ThreeContainer = React.memo(() => {
  const threeRef = useRef(); // Используется для обращения к контейнеру для canvas
  const three = useRef(); // Служит для определения, создан ли объект, чтобы не создавать повторный

  // Создание объекта класса Three, предназначенного для работы с three.js
  useEffect(() => {
    let color = 'blue'
    const colorChangeHandler = () => {
      // Просто поочерёдно меняем цвет с серого на синий и с синего на серый
      color = color === "grey" ? "blue" : "grey";
      three.current.rectColorChange(color);
    };
    three.current = new Three({
      color,
      rectSizes,
      sceneSizes,
      colorChangeHandler,
      canvasContainer: threeRef.current,
    });
  }, []);

  // Данный узел будет контейнером для canvas (который создаст three.js)
  return <div className="container" ref={threeRef} />;
});

color не нужен за пределами Three, потому уехал внутрь.
Итого, никаких перерендеров. Если вдруг надо будет добавить какой-нибудь реквизит, то по нему дополнительные useEffect, чтобы что-то императивно менять в экземпляре Three.

[SimbirSoft_frontend]

Добрый день! Подобный формат мы, конечно, тоже пробовали. Однако, при этом возникают проблемы с производительностью, когда при больших объёмах данных начинают конфликтовать нативный рендеринг js и рендеринг внутри React. По этой причине рендеринг получается совсем не плавным.

[SimbirSoft_frontend]

Спасибо за уточнение)