JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.min.js"></script>

<script src='https://threejs.org/examples/js/postprocessing/EffectComposer.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/RenderPass.js'></script>
<script src='https://threejs.org/examples/js/postprocessing/ShaderPass.js'></script>
<script src='https://threejs.org/examples/js/shaders/CopyShader.js'></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/UnrealBloomPass.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<canvas class="webgl"></canvas>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Textures
 */
const textureLoader = new THREE.TextureLoader()
const flagTexture = textureLoader.load('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/142f4c2a-f005-4189-a7b9-6e5ae9cd7e67/d2y7l02-45ac6ec7-9340-4d33-8263-3be483273302.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzE0MmY0YzJhLWYwMDUtNDE4OS1hN2I5LTZlNWFlOWNkN2U2N1wvZDJ5N2wwMi00NWFjNmVjNy05MzQwLTRkMzMtODI2My0zYmU0ODMyNzMzMDIuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.E6aJKNmMZAbMA0EdFhbHPxQmyr14tT8bbGaWuXB1RI4')

/**
 * Test mesh
 */
// Geometry

const geometry = new THREE.PlaneGeometry(1, 1, 500, 500)

const count = geometry.attributes.position.count
const randoms = new Float32Array(count)

for (let i = 0; i < count; i++) {
    randoms[i] = Math.random()
}

geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1))

// Material
const material = new THREE.ShaderMaterial({
    vertexShader: `
uniform float uTime;

varying vec2 vUv;
varying float f;

void main()
{
    vec4 modelPosition = modelMatrix * vec4(position, 1.0);
    vUv = uv;
    float t = 1.6*uTime;
     f = 0.6 + 0.4 * sin(5.0*(vUv.x+1.1*vUv.y+sin(7.0*vUv.x + 12.0*vUv.y)+0.02*t)+sin(20.0*(1.6*vUv.x+1.1*vUv.y-0.1*t)));
    modelPosition.z+=f*0.1;

    vec4 viewPosition = viewMatrix * modelPosition;

    vec4 projectedPosition = projectionMatrix * viewPosition;
    gl_Position = projectedPosition;

}
`,
    fragmentShader: `
uniform sampler2D uTexture;

varying vec2 vUv;
varying float f;

void main()
{
    vec4 textureColor = texture2D(uTexture, vUv);
     gl_FragColor = textureColor*f;
     gl_FragColor*=1.1;
}`,
    uniforms:
    {
        uTime: { value: 0 },
        uTexture: { value: flagTexture }
    }
})



// Mesh
const mesh =...