首页 > 建站教程 > 前端框架 >  vite加载导入glsl文件报错正文

vite加载导入glsl文件报错

vite速度快,node_modules里的文件比webpack少太多太多,而且,对很多文件,如js、css等都内置了解析方式,不像webpack需要配置很多loader和plugins。

今天,我爱模板网用vite导入.glsl文件时,却报错了:

导入代码如下:

import basicVertextShader from './shader/basic/vertex.glsl'
import basicFragmentShader from './shader/basic/fragment.glsl'


报错:

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


应该是vite尝试解析glsl文件,遇到了不理解的语法,报错了。


其实.glsl是着色器语法,并不需要去解析它,只要将它的内容作为字符串传给threejs,threejs自然会调用相关方法去解析它。


所以,在导入时,告诉vite,以字符串形式加载.glsl文件即可,即在文件后面加上“raw”参数即可:

import basicVertextShader from './shader/basic/vertex.glsl?raw'
import basicFragmentShader from './shader/basic/fragment.glsl?raw'


不得不说,vite真的太牛了!

下一篇: 最后一页