前言
老早就给自己挖了一个坑,想要给自己的网站加上一个带有雨滴特效的背景,但是因为懒癌发作,到现在才开始动手。
起因
看着自己网站光秃秃的背景感觉实在是有点难看,因此我就开始寻思着整一个好看的背景,最好还是个动态的。 这时候跃入我脑子的是以前在小红车(Wallpaper Engine)里用过的一款动态壁纸 这款动态壁纸的雨滴效果很棒,很快我就在下面的简介中找到了源代码的github地址。
- 动态壁纸
- github源代码 接着我便又去了知乎搜索了一下web雨滴效果,发现已经有人研究过这个雨滴效果的源代码,并且对其进行了相关改进。既然有人已经造过轮子,那我也就不必再去造一遍轮子了。
- 知乎文章:用WebGL实现雨打屏幕
- 跟着去看了看这位大佬,发现这个大佬也有自己博客网站,更是意外惊喜了
- 大佬博客网站
- 咳咳,废话说了这么多了,也是时候撸起袖子,给自己的博文网站加上一个好看的背景了。
正文
- 使用环境
- vue3 + typescript
- 执行
npm install raindrop-fx
安装相应依赖 - 创建一个Background.vue组件,用于封装背景
事故出现
- 安装完raindrop-fx,并将其导入项目再进行运行时却出现了如下错误
error in ./node_modules/raindrop-fx/dist/index.js
Module parse failed: Unexpected token (396:4320)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| vWorldPos = (uTransformM * vec4(aPos, 1)).xyz;\\r
| vSize = aSize;\\r`
······
| /*! *****************************************************************************
| Copyright (C) Microsoft. All rights reserved.
@ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/background/Background.vue?vue&type=script&lang=ts 6:0-37 35:25-35
- 去网上找了一整天资料没搞懂(丢人😂),为啥导入js文件也会报错并表示现有的loader无法解析
- 没办法试着向作者提了一个issue看看有没有解决方法