Last active
July 22, 2019 18:54
-
-
Save DrewDahlman/c407db7f356160d454950c9dbd732b30 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment