function init() {
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
  var renderer = new THREE.WebGLRenderer();

  renderer.setClearColor(new THREE.Color(0x333333, 1.0));
  renderer.setSize(window.innerWidth, window.innerHeight);


  var cube = [];
  var json = [
    {
      "color" : 0xd53a32,
      "x" : -1.5,
      "y" : 1,
      "z" : 0,
      "rotation":0,
      "v" : 1
    },
    {
      "color" : 0xdfdfc4,
      "x" : -0.5,
      "y" : 1,
      "z" : 0,
      "rotation":0,
      "v" : 2
    },
    {
      "color" : 0x1d9099,
      "x" : 0.5,
      "y" : 1,
      "z" : 0,
      "rotation":0,
      "v" : 3
    },
    {
      "color" : 0xe59d12,
      "x" : 1.5,
      "y" : 1,
      "z" : 0,
      "rotation":0,
      "v" : 4
    },

    {
      "color" : 0xe59d12,
      "x" : 0,
      "y" : 2,
      "z" : -1.5,
      "rotation":Math.PI/2,
      "v" : 1
    },
    {
      "color" : 0xd53a32,
      "x" : 0,
      "y" : 2,
      "z" : -0.5,
      "rotation":Math.PI/2,
      "v" : 2
    },
    {
      "color" : 0x1d9099,
      "x" : 0,
      "y" : 2,
      "z" : 0.5,
      "rotation":Math.PI/2,
      "v" : 3
    },
    {
      "color" : 0xdfdfc4,
      "x" : 0,
      "y" : 2,
      "z" : 1.5,
      "rotation":Math.PI/2,
      "v" : 4
    },


    {
      "color" : 0xe59d12,
      "x" : -1.5,
      "y" : 3,
      "z" : 0,
      "rotation":0,
      "v" : -1
    },
    {
      "color" : 0x1d9099,
      "x" : -0.5,
      "y" : 3,
      "z" : 0,
      "rotation":0,
      "v" : -2
    },
    {
      "color" : 0xdfdfc4,
      "x" : 0.5,
      "y" : 3,
      "z" : 0,
      "rotation":0,
      "v" : -3
    },
    {
      "color" : 0xd53a32,
      "x" : 1.5,
      "y" : 3,
      "z" : 0,
      "rotation":0,
      "v" : -4
    },

    {
      "color" : 0xd53a32,
      "x" : 0,
      "y" : 4,
      "z" : -1.5,
      "rotation":Math.PI/2,
      "v" : -1
    },
    {
      "color" : 0xdfdfc4,
      "x" : 0,
      "y" : 4,
      "z" : -0.5,
      "rotation":Math.PI/2,
      "v" : -2
    },
    {
      "color" : 0xe59d12,
      "x" : 0,
      "y" : 4,
      "z" : 0.5,
      "rotation":Math.PI/2,
      "v" : -3
    },
    {
      "color" : 0x1d9099,
      "x" : 0,
      "y" : 4,
      "z" : 1.5,
      "rotation":Math.PI/2,
      "v" : -4
    }
  ] ;
  for(var i=0;i<16;i++){
    var cubeGeometry = new THREE.CubeGeometry(1,1,4);
    var cubeMaterial = new THREE.MeshLambertMaterial({color: json[i].color});
    cube[i] = new THREE.Mesh(cubeGeometry, cubeMaterial);

    cube[i].position.x=json[i].x;
    cube[i].position.y=json[i].y;
    cube[i].position.z=json[i].z;
    cube[i].rotation.y=json[i].rotation;

    scene.add(cube[i]);
  }


  camera.position.x = 20;
  camera.position.y = 20;
  camera.position.z = 20;
  camera.lookAt(scene.position);


  var spotLight = new THREE.SpotLight( 0xffffff );
  spotLight.position.set( 20, 20, 20 );
  scene.add( spotLight );

  document.getElementById("WebGL-output").appendChild(renderer.domElement);

  var step=0;
  render();

  function render() {
    for(var i=0;i<16;i++){
      step+=0.01;
      if(i<4){
        cube[i].position.z = json[i].v/4*Math.sin(step);
      }else if(i>=4&&i<8){
        cube[i].position.x = json[i].v/4*Math.sin(step);
      }else if(i>=8&&i<12){
        cube[i].position.z = json[i].v/4*Math.sin(step);
      }
      else{
        cube[i].position.x = json[i].v/4*Math.sin(step);
      }               
    }  

    requestAnimationFrame(render);
    renderer.render(scene, camera);
  }

}
window.onload = init;