JSFiddle - React, Tailwind, and code Playground

by lighty1235

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
			 varying vec2 vUv;
 uniform float time;
 void main() {
 vUv = uv;
 vec3 pos = position.xyz * sin(time);
 gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1.0);
 }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
			#ifdef GL_ES
precision mediump float;
#endif

varying vec2 vUv;
uniform vec2 iResolution;
uniform float iTime;
uniform vec4 iMouse;
uniform sampler2D iChannel0,iChannel1,iChannel2;
uniform vec3 iChannelResolution;
vec2 U;
vec4 O;


void main()
{
 vec2 R = gl_FragCoord.xy / iResolution.xy;
 U *= 7./R;
 O-=O;
 for(float i=0.,v; i++ < 70.; )
 v = 9.-i/6.+2.*cos(U.x + sin(i/6. + iTime ) ) - U.y,
 O = mix(O, vec4(int(i)%2), smoothstep(0.,15./R.y, v) );
}

</script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;

init();
animate();

function init() {

    const camera = new THREE.OrthographicCamera( -1, 1 , 1, -1, 0.1, 100 );
    camera.position.z = 20;

    scene = new THREE.Scene();

   const geometry = new THREE.PlaneGeometry( 2,2 );

   /*  var material = new THREE.ShaderMaterial( {
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
            uniforms: {
               iTime: { value: 0},
               iMouse: { value:{ x:0.0, y:0.0 }},
               iResolution: { value:{ x:innerWidth, y:window.innerHeight }},
          }, 
        } ); */
    
   const material = new  THREE.ShaderMaterial({
         vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
     colorWrite: false,
          uniforms: {
               iTime: { value: 0},
               iMouse: { value:{ x:0.0, y:0.0 }},
               iResolution: { value:{ x:innerWidth, y:window.innerHeight }},
          },
     });
const mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);

   

    renderer = new THREE.WebGLRenderer( );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );
    material.uniforms.iTime.value += 0.02;
    renderer.render( scene, camera );

}