[Three.js]shaderBall

<!-- partial:index.partial.html -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

​

    <div id="myCanvas"></div>

​

    <script id="fragmentShader" type="x-shader/x-fragment">

​

      uniform float time;

​

      varying vec2 vUv;

​

      float snow(vec2 uv,float scale)

      {

        float _t = time*0.1;

        uv.x+=_t/scale;

​

        uv*=scale;

        vec2 s=floor(uv);

        vec2 f=fract(uv);

        vec2 p;

        float k=40.;

* {

    margin: 0;

    padding: 0;

  }

  html {

    height: 100%;

    background-color: #000; 

  }

  body {  

    margin: 0;

    height: 100%;

    font-family: 'Noto Sans JP', sans-serif;

  }

​

  #myCanvas {

    overflow: hidden;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;  

  }

// このクラス内に three.js のコードを書いていきます

class Canvas {

  constructor() {

​

    /************************/

    /*インタラクション用*/

    /************************/

​

    //スクロール量

    this.scrollY = 0;

    //マウス座標

    this.mouse = new THREE.Vector2(0, 0);

    //ウィンドウサイズ

    this.w = window.innerWidth;

    this.h = window.innerHeight;

​

​

    /************************/

    /*シーン設定*/

    /************************/

​

    // レンダラー

    this.renderer = new THREE.WebGLRenderer({