给自己的网站装上一块玻璃(事故现场)

2022-2-21 14:52:52

#前端

60

前言

老早就给自己挖了一个坑,想要给自己的网站加上一个带有雨滴特效的背景,但是因为懒癌发作,到现在才开始动手。

起因

看着自己网站光秃秃的背景感觉实在是有点难看,因此我就开始寻思着整一个好看的背景,最好还是个动态的。 这时候跃入我脑子的是以前在小红车(Wallpaper Engine)里用过的一款动态壁纸 Description 这款动态壁纸的雨滴效果很棒,很快我就在下面的简介中找到了源代码的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看看有没有解决方法