sardinefish / raindrop-fx Goto Github PK

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

'default' is not exported by *******
2: import { normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
3: 
4: import RaindropFX from "raindrop-fx";
          ^
5: import { onBeforeUnmount, onMounted, ref } from "vue";

11 WebGL: INVALID_OPERATION: uniform1i: location not for current program
122 WebGL: INVALID_OPERATION: uniform4fv: location is not from current program
30 WebGL: INVALID_OPERATION: uniform1f: location not for current program
93 WebGL: INVALID_OPERATION: uniform2fv: location is not from current program

uploadUniform material.ts:431
upload material.ts:134
drawMesh  renderer.ts:451
blit renderer.ts:317
downSample| blur.ts:73
blurBackground  renderer.ts:388
reloadBackground renderer.ts:329

        if (!GlobalContext())
            this.use();

bind  RainDrop.vue_vue_typ…3.js:formatted:7577
drawMeshProceduralInstance  RainDrop.vue_vue_typ…3.js:formatted:8057
drawDroplet   RainDrop.vue_vue_typ…3.js:formatted:9333
render   RainDrop.vue_vue_typ…3.js:formatted:9256
update  RainDrop.vue_vue_typ…3.js:formatted:9642

<template>
    <div class="App">

        <div id="root">
            <canvas id="canvas"></canvas>
        </div>

    </div>
</template>

<script>
import sal from "sal.js";
const RaindropFX = require("raindrop-fx");

export default {
    name: "App",
    mounted() {
        const canvas = document.querySelector("#canvas");
        const rect = canvas.getBoundingClientRect();
        canvas.width = rect.width;
        canvas.height = rect.height;
        const raindropFx = new RaindropFX({
            canvas: canvas,
            background: "./assets/background.jpg",
        });
        console.log(raindropFx);
        raindropFx.start();

        sal({
            once: false,
        });
    },
};
</script>

<style lang="less" scoped>
    #root{
        width: 100vw;
        height: 100vh;
        position: absolute;
        #canvas {
            width: 100%;
            height: 100%;
        }
    }
</style>

const path = require('path')
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('thejs')
      .test(/\.js$/)
      .use('babel-loader')
      .loader('babel-loader')
      .end()
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, "./src/theme/index.less")
      ],
    }
  },
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  },
}