animate-3d-gradient.js

    // we have two variables that we will use to generate the warp of the sheet
    let t = 0;
    let j = 0;
    // We will set x and y as random integers
    let x = randomInteger(0, 32);
    let y = randomInteger(0, 32);
    const animate = function () {
        // This function is the animation, so lets request a frame
        requestAnimationFrame( animate );
        // And lets re-render the image
        renderer.render( scene, camera );

        // Remember the uniform variables from earlier? Now we will update the randomisePosition
        // variable with the j variable, producing a random z and x position as shown in the shader
        mesh.material.uniforms.u_randomisePosition.value = new THREE.Vector2(j, j);
        
        // We will also generate a random R, G, and B value using R(), G(), and B(). The full code 
        // can be found in the codepen or on the git.
        mesh.material.uniforms.u_color1.value = new THREE.Vector3(R(x,y,t/2), G(x,y,t/2), B(x,y,t/2));

        // And since we have t representing time, we will update time. Again, this will produce another
        // random input for adjusting the animation of the 3D object.
        mesh.material.uniforms.u_time.value = t;
        // Every 2 ticks of t, we will adjust x, so it never goes below 0 or above 32.
        if(t % 0.1 == 0) {         
            if(vCheck == false) {
                x -= 1;
                if(x <= 0) {
                    vCheck = true;
                }
            } else {
                x += 1;
                if(x >= 32) {
                    vCheck = false;
                }

            }
        }
        // Increase t by a certain value every frame
        j = j + 0.01;
        t = t + 0.05;
    };
    // Call the animation function
    animate();