doob | : deciduous_tree : Smart immutable state for React | Frontend Framework library

I am using Mr Doob's periodic table code in my web app:

https://threejs.org/examples/css3d_periodictable.html

I am using it in Helix view. When I rotate the object left, I shift the camera's Y position by a certain amount too. My desire is to give the impression that the Helix is corkscrewing vertically up and down as you rotate the camera. This is the code I'm using, where angle and panAmount are constants that control how much rotation and vertical pan takes place per second:

I am looking to understand how external shader files can be used inside a-frame without copying the shader code. I know that we can define custom shaders using aframe's registershader but is there a way to point the vertex and fragment shader code to an external URL?

For example, if I want to use the shader defined here - Mr. Doob's water shader within a-frame, how can I do so without copying the shader code to my local file?

I managed to translate an old OO Processing sketch to HTML5 Canvas: https://gist.github.com/sindiploma/ce1bb3b8424c32fb8d9e094f8944a789

I added mr.Doob's Stats library to record the canvas performance.

It performs as expected on document load, but when trying to resize the window. framerate drops dramatically.

Any tips on how to boost the performance on resize event?

You can also check this live demo: