请问这种代码如何做的

[gtq65912]

一点头绪都没有,看代码不懂怎么看

代码链接

//JS 代码
/*
    @Author:
    @Date:
*/

var container;
var camera, scene, renderer;
var uniforms;

init();
animate();

function init() {
    container = document.getElementById( 'container' );
    camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
    scene = new THREE.Scene();
    var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
    
    /*
        material, video
        more about video material, see
        https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_video.html
    */
    
    var loader = new THREE.TextureLoader();
  	loader.crossOrigin = true;
  
    uniforms = {
        u_time: { value: 1.0 },
        u_resolution: { type:'v2',value: new THREE.Vector2() },
        u_mouse: { type:'v2',value: new THREE.Vector2() },
        //u_map:{ value:loader.load( '/disturb.jpg' ) },
      	//u_map:{ value:loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/141228/earthmap1k.jpg' ) }
    };
    
    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 );
    window.addEventListener( 'mousemove', onMouseMove, false );
}

function onWindowResize( event ) {
    uniforms.u_resolution.value.x = window.innerWidth;
    uniforms.u_resolution.value.y = window.innerHeight;

    renderer.setSize( window.innerWidth, window.innerHeight );
}

function onMouseMove( event ) {
    uniforms.u_mouse.value.x = event.clientX;
    uniforms.u_mouse.value.y = event.clientY;
}

function updateFPS(){
    var current_time, dt;
    if(!window.last_time){
        window.last_time = (new Date).getTime();
    }
    current_time = (new Date).getTime();
    dt = (current_time - last_time) / 1000;
    last_time = current_time;
    window.fps = 1 / dt;
    fps = ~~(window.fps);
    document.getElementById('showfps').innerHTML = 'FPS:'+fps;
}

//
function animate( timestamp ) {
    window.fps = 0;
    requestAnimationFrame( animate );
    uniforms.u_time.value = timestamp / 1000;
    renderer.render( scene, camera );
    updateFPS();
}

实在搞不清楚怎么做的