如何将GLSL着色器代码存放至独立文件而非主HTML文件中？

我正逐步摸透着色器编写的技巧，不得不说，用THREE.js搭建OpenGL场景来调试GLSL写的着色器真的超方便！

到目前为止，我一直是把GLSL代码直接放在主HTML文件的script标签里的，给你看一段实际的代码示例：

<html>
<head>
    <meta charset=utf-8>
    <title>Babby's first three.js app</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script>
        // 这里可以嵌入GLSL代码片段或者Three.js的核心逻辑
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Makkasu