GLSL着色器在Live Server及GitHub Pages无法加载的解决咨询

临时快速方案（无需构建，类似CDN思路） #

• 直接内嵌着色器代码到JS文件：把.glsl里的代码复制出来，用JS模板字符串包裹，彻底绕开路径和跨域问题。示例：

  // 顶点着色器代码
  const vertexShader = `
    precision mediump float;
    attribute vec3 position;
    uniform mat4 projectionMatrix;
    uniform mat4 modelViewMatrix;
  
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `;
  
  // 片元着色器代码
  const fragmentShader = `
    precision mediump float;
    void main() {
      gl_FragColor = vec4(0.8, 0.2, 0.4, 1.0);
    }
  `;
  

• 用HTML脚本标签托管着色器：在HTML中添加自定义类型的<script>标签存放着色器代码，再通过JS获取内容，无需加载外部.glsl文件：

  <!-- HTML中添加 -->
  <script id="vertexShader" type="x-shader/x-vertex">
    precision mediump float;
    attribute vec3 position;
    uniform mat4 projectionMatrix;
    uniform mat4 modelViewMatrix;
  
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  </script>
  
  <script id="fragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    void main() {
      gl_FragColor = vec4(0.8, 0.2, 0.4, 1.0);
    }
  </script>
  

  // JS中获取代码
  const vertexShader = document.getElementById('vertexShader').textContent;
  const fragmentShader = document.getElementById('fragmentShader').textContent;
  

永久解决办法（使用构建工具） #

纯静态HTML项目遇到这类文件加载问题，本质是缺少构建工具对资源的处理能力。推荐用Vite，配置简单，完美适配ThreeJS项目：

1. 初始化项目：在项目根目录运行命令

   npm create vite@latest . -- --template vanilla
   

2. 安装ThreeJS依赖

   npm install three
   

3. 把你的.glsl文件放到src/shaders目录下，在JS中直接导入（加?raw后缀告诉Vite以纯文本形式导入）：

   import vertexShader from './shaders/vertex.glsl?raw';
   import fragmentShader from './shaders/fragment.glsl?raw';
   

4. 构建项目：运行命令生成可部署的文件

   npm run build
   

   生成的dist文件夹就是可以直接部署到GitHub Pages的内容。

GitHub Pages部署注意事项 #

如果你的仓库名是my-3d-project，需要在vite.config.js中配置基础路径，避免资源加载路径错误：

export default {
  base: '/my-3d-project/'
}

本地运行正常但线上出错的核心原因是：本地直接打开文件时浏览器允许读取本地资源，但Live Server/GitHub Pages是HTTP服务，直接加载.glsl文件可能存在MIME类型不识别、路径配置错误等问题，构建工具会把着色器代码打包进JS文件，彻底解决这类问题。

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