var ww = window.innerWidth,
  wh = window.innerHeight;

function init() {

  /* WEBGL RENDERER */
  renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('scene')
  });
  renderer.setClearColor(0x3F3F3F);
  renderer.setSize(ww, wh);

  /* SCENE */
  scene = new THREE.Scene();

  /* CAMERA */
  camera = new THREE.PerspectiveCamera(50, ww / wh, 1, 10000);
  camera.position.set(0, 0, 700);
  scene.add(camera);

  /* LIGHT */
  light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(0, 250, 700);
  scene.add(light);

  createBox();

  renderer.render(scene, camera);

  //Create a variable that contains the time when the animation start
  previousTime = Date.now();
  animate();
};

function createBox() {

  elements = new THREE.Object3D();

  //Create a geometry for a cube
  geometry = new THREE.BoxGeometry(150, 150, 150);

  //Create a Texture Loader object
  var loader = new THREE.TextureLoader();
  loader.crossOrigin = 'anonymous';
  var texture = loader.load("https://mamboleoo.be/learnThree/img/box.jpg");

  material = new THREE.MeshLambertMaterial({
    map: texture
  });
  //Create a mesh for the first box with a basic texture
  box1 = new THREE.Mesh(geometry, material);
  box1.rotation.z = Math.PI / 8;
  box1.position.x = -340;
  //Add it into our group
  elements.add(box1);

  //Create another box with a green color on the material
  material = new THREE.MeshLambertMaterial({
    map: texture,
    color: 0x00ff00
  });
  box2 = new THREE.Mesh(geometry, material);
  box2.rotation.z = Math.PI / 8;
  box2.position.x = -120;
  elements.add(box2);

  //Textures = pictures of the box
  textures = [
    new THREE.MeshBasicMaterial({
      map: loader.load("https://mamboleoo.be/learnThree/img/dice1.png")
    }),
    new THREE.MeshBasicMaterial({
      map: loader.load("https://mamboleoo.be/learnThree/img/dice2.png")
    }),
    new THREE.MeshBasicMaterial({
      map: loader.load("https://mamboleoo.be/learnThree/img/dice3.png")
    }),
    new THREE.MeshBasicMaterial({
      map: loader.load("https://mamboleoo.be/learnThree/img/dice4.png")
    }),
    new THREE.MeshBasicMaterial({
      map: loader.load("https://mamboleoo.be/learnThree/img/dice5.png")
    }),
    new THREE.MeshBasicMaterial({
      map: loader.load("https://mamboleoo.be/learnThree/img/dice6.png")
    })
  ];
  //Create a material with the picture as the 'map'
  material = new THREE.MeshFaceMaterial(textures);
  //Create a new cube so I can apply differents pictures
  geometry2 = new THREE.BoxGeometry(150, 150, 150);
  box3 = new THREE.Mesh(geometry2, material);
  box3.rotation.z = Math.PI / 8;
  box3.position.x = 120;
  elements.add(box3);

  //Texture = sprite of the nyan cat
  sprite = loader.load("https://mamboleoo.be/learnThree/img/nyan.png");
  //I set my texture to be repeated 1/4 horizontally and a 1/3 vertically
  //Those values are depending of your sprite (mine is a grid of 4*3 so 12 pictures)
  sprite.repeat.set(1 / 4, 1 / 3);
  //Create a material with the sprite as the 'map'
  material = new THREE.MeshLambertMaterial({
    map: sprite
  });
  box4 = new THREE.Mesh(geometry, material);
  box4.rotation.z = Math.PI / 8;
  box4.position.x = 340;
  elements.add(box4);

  scene.add(elements);

};

//Counter will be used to animate the sprite
var counter = 0;
var animate = function(a) {

  requestAnimationFrame(animate);

  //Make my cubes turning
  box1.rotation.y = box2.rotation.y = box3.rotation.y = box4.rotation.y += .01;

  /* Make my sprite looks like a gif */

  //We get the current time
  var frameTime = Date.now();
  //Calculate the difference between the previous frame and the new one
  var delta = frameTime - previousTime;
  //If the difference is higher than 1/20 of a second, I want a new frame
  if (delta > 50) {
    //We set the previous frame with new time
    previousTime = frameTime;

    //We move our sprite to the right depending of the counter
    //The first frame will be 0/4, the second one 1/4, then 2/4, 3/4, 4/4 and then back to 0/4
    sprite.offset.x = (counter % 4) / 4;
    //We move our sprite to the bottom
    //The first four frame will have 0 as value.
    //This calcul has two part :
    //We divide the counter by 4 and round it, so the first 4 frames will have 0, then 1 and the four last will have 2
    //After that we divide by 3 (because of our grid 4*3)
    sprite.offset.y = Math.floor(counter / 4) / 3;
    //We increment our counter
    counter++;
    //If the counter equal 12, we start again to 0
    if (counter == 12) {
      counter = 0;
    }
  }

  renderer.render(scene, camera);
};

init();