导入GLSL文件抛出错误 - Vite项目

Question

所以我目前正在使用 Three.js 并使用 vite 来设置文档。 我创建了一个单独的fragment.glsl，因此我不必在着色器材质内编写代码。但在控制台中我收到以下错误：

Uncaught SyntaxError: Unexpected token '{' (at fragment.glsl?import:1:13)

fragment.glsl 文件如下所示：

void main() {
        gl_FragColor = vec4(1., 0., 0., 1.);
};

我尝试使用以下方法从我的 /shaders/ 文件夹导入文件：

import fragment from './shaders/fragment.glsl'

当我在着色器材质中使用它时，希望它能够运行代码：

this.material = new THREE.ShaderMaterial({
            fragmentShader: fragment,
            uniforms: {
                progress: {
                    type: 'f',
                    value: 0,
                },
                side: THREE.DoubleSide,
            },
        })

但我得到的只是控制台中的错误。我似乎无法弄清楚我做错了什么。没想到导入文件这么麻烦。有人看到我做错了什么吗？

Answer 1

我遇到了同样的问题并通过安装vite-plugin-glsl解决了它。它有一个简单的设置说明，安装后导入问题就解决了。

Answer 2

首先安装一个包 npm 我 vite-plugin-glsl --save-dev

然后在 vite.config.js 中做一些修改

从“vite-plugin-glsl”导入 glsl； 从'vite'导入{defineConfig};

在顶部添加，然后在同一个 vite.config.js 的导出默认值中添加另一个内容 插件：[ glsl() ] 然后将其添加到依赖项部分的package.json中 "vite-plugin-glsl": "^1.1.2"

终于你的工作完全完成了