vite导入glsl文件时报错问题处理

最新推荐文章于 2024-01-20 17:22:17 发布
最新推荐文章于 2024-01-20 17:22:17 发布
阅读量732 收藏 5
点赞数 9
文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59994452/article/details/130381292
版权

最近学threeJs的时候踩到的坑，跟着视频老师学习着色器的时候，当我导入glsl文件时，一直在报语法错误，类似于

Uncaught SyntaxError: Unexpected identifier 'vec3' (at vertexShader.glsl?t=1682477010496&import:1:11)

Uncaught SyntaxError: Unexpected token '{' (at vertexShader.glsl?t=1682477313589&import:2:12)

因为才刚刚学习，寻思是哪里代码写的有问题，我都照着视频一个字母一个字母去的敲代码，发现还是这些报错，由于才学到着色器入门，心态差点崩溃了，怎么去搜索都是说语法错误，然后转变思路去搜索导入glsl文件报语法错误，好家伙原来是vite导致的，只需要在导入的时候，加上这个?raw

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

就OK了

困扰我一天一夜的问题，终于解决了 ，

附上原文截图，

 

倔强的HandLei
关注
  • 9
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
vite+vue3动态模块化导入并使用pinia
03-25
vite+vue3动态模块化导入并使用pinia
ElementPlus按需自动导入VITE配置
03-08
自动导入使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 这里导入的ElementPlus 使用格式： <i-ep-名称 /> 例子： <el-icon :size="size" :color="color"> <i-ep-Edit /> </el-icon> 图标名称，直接看官网https://element-plus.org/zh-CN/component/icon.html
vite-plugin-components:V自动导入Vite的按需组件
03-14
vite-plugin-components 按需组件自动导入Vite 用法 :information: 从v0.6.x支持Vite 2， v0.6.x支持Vite 1。 安装 npm i vite-plugin-components -D # yarn add vite-plugin-components -D 将其添加到vite.config.js // vite.config.js import Vue from '@vitejs/plugin-vue' import ViteComponents from 'vite-plugin-components' export default { plugins : [ Vue ( ) , ViteComponents ( ) ] , } ; 就这样。 照常使用模板中的组件，但是不再需要import和component re
glslify-import:glslify的转换流向着色器添加了“ import”指令
05-22
glslify-import 的转换流向着色器添加了import指令。 用法 给定一个基本的着色器： // main.frag #pragma glslify : import('./common.glsl') void main() { gl_FragColor = vec4 (color, 1.0 ); } 您可以导入./common.glsl ： // common.glsl varying vec3 color; 并将内容内联到您的着色器中： varying vec3 color; void main() { gl_FragColor = vec4 (color, 1.0 ); } 您也可以从导入的文件中使用glslify编译指示等。 当您希望在着色器中包含一组通用的“基本”定义而又不失去glslify的精致效果时，此选项很有用。
vite-plugin-restart:自定义文件组重新启动Vite服务器
03-25
vite-plugin-restart 自定义文件/全局文件以重新启动Vite服务器 用法 安装 npm i vite-plugin-restart -D # yarn add vite-plugin-restart -D 将其添加到vite.config.js // vite.config.js import ViteRestart from 'vite-plugin-restart' export default { plugins : [ ViteRestart ( { restart : [ 'my.config.[jt]s' , ] } ) ] , } ; 现在，对my.config.js或my.config.ts更改将自动重新启动服务器。 动机 Byebye nodemon -w my.config.js
解决vue3 vite导入glsl文件时不识别该文件
u012425087的博客
06-25 868
用Vite带来的实际好处就是我们可以更快更高效的开发应用。快速的启动和构建意味着更快的调试反馈循环和更快的部署上线。简单的配置和原生的开发体验使我们可以更专注在产品实现上,而不会被各种工程化的问题所耽误。Vite正是专注于此而生的工具,所以对工作中前端工程的优化有很大帮助。当然,Webpack也有其独特的优势,如生态更丰富以及对旧浏览器更友好的兼容性等。然而小在下在开发threejs时候使用vite配置导入glsl着色器文件的时候却出错了，提示找不到glsl模块。
vue+vite+ts 引入glsl文件报错问题
m0_73495473的博客
01-20 626
当vue界面引入.glsl文件时，报错不能正常运行。
vite 基于vite额外功能
weixin_43294560的博客
03-04 688
基于vite打包,将会提供如下额外功能 1、css .module.css为后缀名的CSS文件都被认为是一个 CSS modules 文件 import classes from './example.module.css' document.getElementById('foo').className = classes.red 2、静态资源处理 (1)导入一个静态资源会返回解析后的 URL： import imgUrl from './img.png' document.get
着色器GLSL运行时报错： ERROR: 0:40: ‘gl_FragColor‘ : undeclared identifier
mkbbreak的博客
08-21 1186
将 gl es 2.0代码升级为gl es 3.0代码时遇到一下报错。
syntax error: unexpected newline, expecting comma or }在go学习中出现的问题
lcl1079104484的博客
09-12 9710
syntax error: unexpected newline, expecting comma or }在go学习中出现的问题 可能是因为在{}中定义变量时最后一个忘记加一个***逗号***
vite5+vue3+ import.meta.glob动态导入vue组件
最新发布
03-25
vite5+vue3+ import.meta.glob动态导入vue组件
Day3 vite的特点(上)
m0_73653709的博客
01-01 1080
vite的特点:NPM 依赖关系解析和预捆绑,模块热更换,TypeScript,Client Types 客户类型,Vue,JSX,CSS,Static Assets 静态资源,JSON等特性
vite和rollup打包开发环境
qq_21476953的博客
06-30 469
vite和rollup打包开发环境
Cesium 实现可视域分析
qq_24155097的博客
08-24 1317
glsl2.js 文件我找了两个， 我测试都是可以实现的，只是效果问题，可以切换了尝试一下。此示例基于vue3上实现，
vite 插件和常用配置
qq_42463315的博客
03-30 3389
插件 1、vite提供的vitejs/plugin-vue import vue from '@vitejs/plugin-vue' plugins: [ vue() ] 2、打包文件压缩插件 npm install vite-plugin-compression -D import compressPlugin from 'vite-plugin-compression' plugins: [ compressPlugin({ deleteOriginFi.
vue3报错SyntaxError: Unexpected identifier和Cannot destructure property `default` of ‘undefined‘ or ‘nu
qq_39528534的博客
12-28 3644
昨天报了这个错误，当时还同时报了其它错误，Cannot destructure property `default` of 'undefined' or 'null'。我的代码是用v-on绑定了一个click函数，在method中编写这个函数就报错，也不知道怎么的我就盯着这个错误Cannot destructure property `default` of 'undefined' or 'null'鼓捣了一个小时，越看越觉得不可思议，我一度以为我的函数逻辑出错了，我检查了我的代码，没任何问题，然后我将在m
glslc 编写 glsl 允许使用 #include 指令
ONE_SIX_MIX的专栏
01-17 3198
最佳工具就在我的 vulkan sdk 里面，我居然没发现！小丑竟是我自己！ 其实情有可原，百度基本没找到该工具的相关信息。因为属于vulkan时代的新东西，还很少人用把。 可以同时用于vulkan和opengl 4.6，其他opengl版本可以开启相关的spirv扩展以获得支持。 该工具名为 glslc 位于 vulkan sdk 中 vulkan sdk 地址：https://vulkan.lunarg.com/sdk/home 这个工具可以让你像编译c文件一样编译glsl文件到spirv字节码文件，同
【我的OpenGL学习进阶之旅】解决着色器语法错误：ERROR: 0:36: ‘*‘ : wrong operand types no operation ‘*‘ exists
字节卷动
12-21 2367
一、错误描述 今天在学习OpenGL ES的时候，编写一个片段着色器，然后运行的时候，出现了黑屏，并且查看日志报错，如下所示： 黑屏 错误日志 2021-12-21 14:26:41.736 20716-21430/com.oyp.openglesdemo E/NDK_JNI_LOG_TAG: [GLUtils.cpp][loadShader][98]: [GLUtils::loadShader] func start 2021-12-21 14:26:41.737 20716-21430/
cocoscreator shader常见错误
springleaf2的专栏
12-15 1121
1： '' : No precision specified for (float): 加上 precision highp float;
vue3项目里怎么使用vite导入glb文件
06-02
在Vite中导入glb文件可以使用原生的import语法，然后在Vue组件中引用该文件。具体操作步骤如下： 1. 在Vue组件中导入glb文件。例如，将glb文件放在src/assets/models文件夹中，然后在Vue组件中导入该文件，代码如下： ``` import myModel from '@/assets/models/MyModel.glb'; ``` 2. 在Vue组件中使用导入的glb文件。例如，在Cesium加载器中使用导入的glb文件，代码如下： ``` <template> <div id="cesiumContainer"></div> </template> <script> import Cesium from 'cesium/Cesium'; import 'cesium/Widgets/widgets.css'; import myModel from '@/assets/models/MyModel.glb'; export default { mounted() { const viewer = new Cesium.Viewer('cesiumContainer'); const entity = viewer.entities.add({ name: 'model', position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883), model: { uri: myModel } }); viewer.zoomTo(entity); } } </script> ``` 这样，就可以在Vue组件中使用Vite导入glb文件并引用该文件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值