<body>
      <div id="container"></div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>

      <script id="vertexShader" type="x-shader/x-vertex">
          void main() {
              gl_Position = vec4( position, 1.0 );
          }
      </script>
    
      <script id="fragmentShader" type="x-shader/x-fragment">
          uniform vec2 u_resolution;//画面サイズ
          uniform float u_time;//時間

          void main() {
              vec2 st = gl_FragCoord.xy/u_resolution.xy;
              float r = abs(sin(u_time * 0.1));
              gl_FragColor=vec4(st.x,st.y,r,1.0);
              // gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
          }
       </script>
  </body>
      *{
          padding: 0;
          margin: 0;
      }
body{
  background-image: url(https://dl.dropbox.com/s/lbra2xig1hsbh21/img.jpg?dl=0);
  
}
      var container;
          var camera, scene, renderer;
          var uniforms;

          init();
          animate();

          function init() {
              container = document.getElementById( 'container' );

              camera = new THREE.Camera();
              camera.position.z = 1;

              scene = new THREE.Scene();

              var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

              uniforms = {
                  u_time: { type: "f", value: 1.0 },
                  u_resolution: { type: "v2", value: new THREE.Vector2() },
                  u_mouse: { type: "v2", value: new THREE.Vector2() }
              };

              var material = new THREE.ShaderMaterial( {
                  uniforms: uniforms,
                  vertexShader: document.getElementById( 'vertexShader' ).textContent,
                  fragmentShader: document.getElementById( 'fragmentShader' ).textContent
              } );

              var mesh = new THREE.Mesh( geometry, material );
              scene.add( mesh );

              renderer = new THREE.WebGLRenderer();
              renderer.setPixelRatio( window.devicePixelRatio );

              container.appendChild( renderer.domElement );

              onWindowResize();
              window.addEventListener( 'resize', onWindowResize, false );

              document.onmousemove = function(e){
                uniforms.u_mouse.value.x = e.pageX
                uniforms.u_mouse.value.y = e.pageY
              }
          }

          function onWindowResize( event ) {
              renderer.setSize( window.innerWidth, window.innerHeight );
              uniforms.u_resolution.value.x = renderer.domElement.width;
              uniforms.u_resolution.value.y = renderer.domElement.height;
          }

          function animate() {
              requestAnimationFrame( animate );
              render();
          }

          function render() {
              uniforms.u_time.value += 0.05;
              renderer.render( scene, camera );
          }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.