Currently, I am working on creating custom vertex and fragment shader programs for a three.js project. My focus is on implementing a specific feature (custom clipping plane), which requires me to modify the shaders already provided by three.js. However, these shader programs are quite lengthy, with the fragment shader alone spanning over 700 lines of code.
I am looking for a way to store these shaders and access them whenever I declare a new ShaderMaterial. While using an HTML element and accessing it via .textContent works well for shorter shader programs, the size of my shaders would make my HTML file extremely long if I were to follow that approach. I have also experimented with JavaScript's FileReader, but most examples I found involve reading user-input files rather than local files within the website's package.
Ideally, I would like to utilize a .txt file to store my shader programs, but I am struggling to determine how to access them in this format. Any guidance or assistance on this matter would be greatly appreciated.