Vite修改GLSL代码后页面无法自动更新的问题求助

以下是针对你遇到的GLSL文件修改后Vite页面无法自动更新问题的具体解决步骤：

1. 修正vite-plugin-glsl的路径匹配配置 #

你当前vite.config.js中的include配置存在语法错误，模板字符串内的多余引号和换行导致路径匹配失效。修改为如下数组形式：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import glsl from 'vite-plugin-glsl'

export default defineConfig({
  plugins: [
    react(),
    glsl({ 
      include: ['**/*.glsl', '**/*.wgsl', '**/*.vert', '**/*.frag', '**/*.vs', '**/*.fs'],
      exclude: undefined,
      warnDuplicatedImports: true,
      defaultExtension: 'glsl',
      compress: false,
      watch: true,
      root: '/'
    })
  ],
})

2. 让React组件监听GLSL文件变化 #

React Three Fiber原生的shaderMaterial不会自动监听外部导入的GLSL字符串变化，需通过useMemo绑定依赖触发更新：

import { useRef, useMemo } from 'react'
import { Canvas } from '@react-three/fiber'
import * as THREE from 'three'
import Fragmentjsx from './Fragment.glsl'
import Vertextjsx from './Vertex.glsl'

function App() {
  const mesh = useRef()
  // 用useMemo包裹shader配置，依赖GLSL文件内容
  const shaderProps = useMemo(() => ({
    fragmentShader: Fragmentjsx,
    vertexShader: Vertextjsx,
    uniforms: { u_time: { value: 0 } } // 补充GLSL中用到的uniform
  }), [Fragmentjsx, Vertextjsx])

  return (
    <>
      <Canvas camera={{ position: [0.0, 0.0, 1.0] }}>
        <mesh ref={mesh} position={[0, 0, 0]} scale={1.0}>
          <planeGeometry args={[1, 1, 32, 32]} />
          <pointLight args={[1,1]}/>
          <shaderMaterial attach="material" {...shaderProps} />
        </mesh>
      </Canvas>
    </>
  )
}

export default App

3. 强制Vite监听GLSL文件 #

在vite.config.js中添加server配置，确保GLSL文件被纳入监听范围：

export default defineConfig({
  // ...其他配置
  server: {
    watch: {
      ignored: ['!**/*.glsl'] // 明确不忽略GLSL文件
    }
  }
})

4. 替换为@react-three/drei的ShaderMaterial组件 #

@react-three/drei提供的ShaderMaterial对HMR支持更完善，可直接替换原生组件：

1. 安装依赖：

npm install @react-three/drei

2. 修改组件代码：

import { useRef } from 'react'
import { Canvas } from '@react-three/fiber'
import { ShaderMaterial } from '@react-three/drei'
import Fragmentjsx from './Fragment.glsl'
import Vertextjsx from './Vertex.glsl'

function App() {
  const mesh = useRef()
  return (
    <>
      <Canvas camera={{ position: [0.0, 0.0, 1.0] }}>
        <mesh ref={mesh} position={[0, 0, 0]} scale={1.0}>
          <planeGeometry args={[1, 1, 32, 32]} />
          <pointLight args={[1,1]}/>
          <ShaderMaterial
            fragmentShader={Fragmentjsx}
            vertexShader={Vertextjsx}
            uniforms={{ u_time: { value: 0 } }}
          />
        </mesh>
      </Canvas>
    </>
  )
}

export default App

5. 验证GLSL文件解析正确性 #

在App.jsx中打印导入的GLSL字符串，确认插件是否正确解析文件：

console.log('Fragment shader content:', Fragmentjsx)

若打印结果为原始GLSL代码则解析正常；若异常，重新安装vite-plugin-glsl：

npm uninstall vite-plugin-glsl && npm install vite-plugin-glsl --save-dev

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