JS

//initial setup of scene qualities
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth-4, window.innerHeight-4);
document.getElementById("container").appendChild(renderer.domElement);

/*
global THREE
global AudioContext
global requestAnimationFrame
*/

//audio
var player = document.getElementById('player');
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var source = context.createMediaElementSource(player);
var analyser = context.createAnalyser();
source.connect(analyser);
analyser.connect(context.destination);
// we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)

// frequencyBinCount tells you how many values you'll receive from the analyser
var frequencyData = new Uint8Array(analyser.frequencyBinCount);

//for controls
var yrot = 0;
var it = 0;

//make cube
var magicnumber = 48;
var geometry = new THREE.PlaneGeometry(magicnumber,magicnumber,24,24);
// var material = new THREE.ShaderMaterial( {
//     vertexShader: document.getElementById( 'vertexShader' ).textContent,
//     fragmentShader: document.getElementById( 'fragmentShader' ).textContent
// } );
//var material = new THREE.MeshNormalMaterial();
var material = new THREE.MeshLambertMaterial( { color: 0x009522, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } );
var group = new THREE.Object3D();
var plane = new THREE.Mesh(geometry, material);
group.add(plane);
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;
plane.rotation.x = -Math.PI/2;
var verts = geometry.vertices;
geometry.dynamic = true;
scene.add(group);

//set camera position and direction
camera.position.z = -30;
camera.position.y = 15;
var origin = new THREE.Vector3( 0, 0, 0 );

// create a sun
var pointLight = new THREE.PointLight(0xFFFFFF,1,500,5);
var sungeo = new THREE.SphereGeometry(1,10,10);
var sunmat = new THREE.MeshBasicMaterial({color:0xffffff});
var sun = new THREE.Mesh(sungeo, sunmat);
var lightg = new THREE.Object3D();
lightg.add(pointLight);
lightg.add(sun);
lightg.position.x = 0;
lightg.position.y = 0;
lightg.position.z = 0;
scene.add(lightg);

// create a moon
var moonLight = new THREE.PointLight(0x8888FF,0.85,150);
var moongeo = new THREE.SphereGeometry(1,10,10);
var moonmat = new THREE.MeshBasicMaterial({color:0xaaaaff});
var moon = new THREE.Mesh(moongeo, moonmat);
var moong = new THREE.Object3D();
moong.add(moonLight);
moong.add(moon);
moong.position.x = 0;
moong.position.y = 0;
moong.position.z = 0;
scene.add(moong);

var al = new THREE.AmbientLight(0x222223);
scene.add(al);

///////////////////////////////////////////functions

function wobble(){
    analyser.getByteFrequencyData(frequencyData);
    for(var i=0; i < verts.length; i++){
        verts[i].z = frequencyData[i] / 25;
    }
    geometry.verticesNeedUpdate = true;
    geometry.colorsNeedUpdate = true;
}





//////////////////////////////////////////

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);

    yrot += 0.005;
    camera.position.x = -30*Math.cos(yrot);
    camera.position.z = -30*Math.sin(yrot);
    camera.lookAt(origin);

    it = player.currentTime/9.5;
    lightg.position.x = 30*Math.sin(it);
    lightg.position.y = 20*Math.cos(it);
    moong.position.x = -30*Math.sin(it);
    moong.position.y = -20*Math.cos(it);

    wobble();

    $('#skyday').css({opacity: .5 + Math.sin(it + Math.PI/2)/2});
    $('#skynight').css({opacity: .5-Math.sin(it + Math.PI/2)/2});
}

render();