WebGLRenderer.js

class WebGLRenderer extends React.PureComponent {
  static contextType = EffectContext;
  constructor(props) {
    super(props);
    this.scene = new Scene();
  }

  componentDidMount() {
    
    // Initialize the scene
    this.scene.init(this.canvasRef, this.context);

    // Load an effect here - this will be where we implement our shaders

    // Listen for events & set scene
    window.addEventListener("scroll", this.onScroll);
    window.addEventListener("resize", this.onResize);

    // Set the scene and we're ready to roll
    this.context.setScene(this.scene);
  }

  // onScroll
  onScroll = () => {
    
    // Update your effect class
    
  };

  // onResize
  // Resize our webgl elements to match their DOM counterparts
  onResize = () => {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.scene.resize(this.width, this.height);
  };

  render() {
    return (
      <div>
        <canvas
          ref={r => {
            this.canvasRef = r;
          }}
        />
      </div>
    );
  }
}