THREE.js Shader Loading from External File

As usual, trying to nicely separate into different files the various application parts in JavaScript is a titanic challenge. This time, I wanted to separate the “.frag” and “.vert” shader programs into different files that I can load at runtime (instead of putting them into the HTML like a savage).

For some reason, there is no easy out-of-the-box way to do that. On the internet, there is a small library, but it depends on JQuery and I think it is insane to load JQuery on top of THREE.js just to load a couple of files. Therefore, I wrote a function to do that using the THREE.js integrated generic loader function.

This is just a convoluted asynchronous function to load the vertex and fragment shader file. Posting this here for future reference.