console.clear();
let scene,camera,renderer,controls;
let canvas = document.querySelector("canvas");
let width = window.innerWidth;
let height = window.innerHeight;
let fov = 75; 
let aspectRatio = width / height; 
let near = 0.001;
let far = 100;
let mainGroup = new THREE.Group();
let colors = {
  blue: 0x71b6f7,
  brown: 0x744436,
  brown2:0xC88247,
  red : 0xfd4d50,
  green: 0xa4d740,
  green2: 0x66b888,
  green3 : 0x2C9D3E,
  house : 0xfce3ad,
  purple : 0x6e5370,
  gold:0xFFF09C,
  grey:0xB7B398,
  greyBrown : 0xB7B398
};

const setup = () => {
  // scene
  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2(0x9ac2fe, 0.14);
  // camera
  camera = new THREE.PerspectiveCamera(fov, aspectRatio, near, far);
  scene.add( camera );  
  // renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true,
    canvas: canvas
  });
  renderer.setSize(width, height);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setClearColor(0x9ac2fe);
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap
  renderer.shadowMapSoft = true;
  // controls
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.autoRotate = true;
controls.autoRotateSpeed = 1.6;
  camera.position.set(3.56, 2, 3.4);
  // lights 
  let light = new THREE.HemisphereLight(0xffffff, 0x5c9cfe, 1.1);
  scene.add(light);
  //
  let spot = new THREE.SpotLight(0xF6FAFD,0.06)
  spot.castShadow = true;
  spot.shadow.camera.left = -1;
  spot.shadow.camera.right = -1;
  spot.shadow.camera.top = -1;
  spot.shadow.camera.bottom = -1;
  spot.shadow.camera.near = 1;
  spot.shadow.camera.far = 100;
  spot.shadow.mapSize.width = 2048;
  spot.shadow.mapSize.height = 2048;
  spot.shadow.camera.fov = 100;
  spot.position.set(-3,3,0);
  camera.add(spot);
  // group for all other groups
  mainGroup = new THREE.Group();
  scene.add(mainGroup)
  camera.lookAt(0,0,0)
}

// objects
let islandGroup = new THREE.Group();
const createIsland = () => {
  // earth
  let coneGeo = new THREE.ConeBufferGeometry(2, 3, 8);
  let mat = new THREE.MeshLambertMaterial({
    color: colors.brown
  });
  let cone = new THREE.Mesh(coneGeo, mat);
  cone.rotation.x = THREE.Math.degToRad(180)
  cone.position.set(0, -1.75, 0);
  islandGroup.add(cone);
  // grass
  let boxGeo = new THREE.BoxBufferGeometry();
  let mat2 = new THREE.MeshLambertMaterial({
    color: colors.green
  });
  let grass = new THREE.Mesh(boxGeo, mat2);
  grass.scale.set(4, 0.5, 4);
  grass.receiveShadow = true;
  islandGroup.add(grass);
  // water
  let mat3 = new THREE.MeshLambertMaterial({
    color: colors.blue
  });
  let water = new THREE.Mesh(boxGeo, mat3);
  water.receiveShadow = true;
  islandGroup.add(water);
  water.scale.set(0.5, 0.5, 4);
  water.position.set(0.75, 0.005, 0.005);
  mainGroup.add(islandGroup);
}

// waterfall particles
let dropCount = 100;
let drops = [];
// water details
let detailCount = 24;
let dets = [];
let detailCount2 = 8;
let dets2 = [];

// creating particles function
let particleGeo,particleMat,particle;
const createParticles = (color,particleAmount,particleArray,scaleX,scaleY,scaleZ,posX,posX2,posY,posY2,posZ,posZ2,opacity,rotX,rotY,rotZ) => {
    particleGeo = new THREE.BoxBufferGeometry();
    particleMat = new THREE.MeshLambertMaterial({
        color:color,
        transparent:true
    });
    for (let i = 0; i< particleAmount;i++) {
        particle = new THREE.Mesh(particleGeo,particleMat);
        islandGroup.add(particle);
        particleArray.push(particle);
        particle.scale.set(scaleX,scaleY,scaleZ);
        particle.position.set(THREE.Math.randFloat(posX,posX2), THREE.Math.randFloat(posY,posY2),THREE.Math.randFloat(posZ,posZ2))
        particle.material.opacity = opacity;
        particle.rotation.set(rotX,THREE.Math.degToRad(rotY),rotZ);
    }
}

// function to create various box like shapes of the house and the mailbox
const createBoxShape =  (x,y,z,xPos,yPos,zPos,color,rShadow,cShadow,group) => {
  let geo = new THREE.BoxBufferGeometry(x,y,z);
  let mat = new THREE.MeshLambertMaterial({color:color});
  let mesh = new THREE.Mesh(geo,mat);
  mesh.position.set(xPos,yPos,zPos);
  mesh.receiveShadow = rShadow
  mesh.castShadow = cShadow
  group.add(mesh);  
}

let treeGroup = new THREE.Group();
const createTree = (trunkX, trunkY, trunkZ, leavesX, leavesY, leavesZ) => {
  // trunk
  let geo = new THREE.CylinderBufferGeometry(0.1, 0.1, 1, 10);
  let mat = new THREE.MeshLambertMaterial({
    color: colors.brown
  });
  let trunk = new THREE.Mesh(geo, mat);
  treeGroup.add(trunk);
  trunk.position.set(trunkX, trunkY, trunkZ);
  trunk.castShadow = true;
  trunk.receiveShadow = true;
  // leaves
  let geo2 = new THREE.SphereBufferGeometry(0.25, 12, 12);
  let mat2 = new THREE.MeshLambertMaterial({
    color: colors.green2
  });
  let treeLeaves = new THREE.Mesh(geo2, mat2);
  treeLeaves.position.set(leavesX, leavesY, leavesZ);
  treeLeaves.castShadow = true;
  treeLeaves.receiveShadow = true;
  treeGroup.add(treeLeaves);
  mainGroup.add(treeGroup);
};

const createBush = (x,y,z) => {
  let geo = new THREE.SphereBufferGeometry(0.15,8,8);
  let mat = new THREE.MeshLambertMaterial({color:colors.green3});
  let bush = new THREE.Mesh(geo,mat);
  bush.position.set(x,y,z);
  bush.receiveShadow = true;
  treeGroup.add(bush)
}

// house
let houseGroup = new THREE.Group();

// roof window function
const createRoofWindow = (x,y,z,color,radB,radT,height,segments) => {
  let geo = new THREE.CylinderBufferGeometry(radB,radT,height,segments);
  let mat = new THREE.MeshLambertMaterial({ color: color });
  let window = new THREE.Mesh(geo, mat);
  window.rotation.z = THREE.Math.degToRad(90);
  window.position.set(x,y,z);
  houseGroup.add(window);
}

const createHouse = () => {
  let boxGeo = new THREE.BoxBufferGeometry();
  // house
  let houseMat = new THREE.MeshLambertMaterial({ color: colors.house });
  let house = new THREE.Mesh(boxGeo, houseMat);
  house.position.set(-1, 0.75, 1);
  house.scale.set(1.2,1,1.5);
  house.receiveShadow = true;
  house.castShadow = true;
  houseGroup.add(house);
  // roof
  let roofGeo = new THREE.ConeBufferGeometry(1.1, 0.7, 4);
  let roofMat = new THREE.MeshLambertMaterial({ color: colors.red });
  let roof = new THREE.Mesh(roofGeo, roofMat);
  roof.position.set(-1, 1.6, 1);
  roof.rotation.y = THREE.Math.degToRad(45);
  roof.castShadow = true;
  roof.receiveShadow = true
  houseGroup.add(roof);
  // roof chimney
  let chimneyMat = new THREE.MeshLambertMaterial({ color:colors.house });
  let chimney = new THREE.Mesh(boxGeo,chimneyMat);
  chimney.position.set(-1,1.6,0.6);
  chimney.scale.set(0.2,0.3,0.2)
  chimney.receiveShadow = true;
  houseGroup.add(chimney);
  // door
  let doorMat = new THREE.MeshLambertMaterial({ color: colors.purple });
  let door = new THREE.Mesh(boxGeo, doorMat);
  door.scale.set(0.2,0.5,0.35);
  door.position.set(-0.49, 0.545, 1);
  houseGroup.add(door);
  // doorknob
  let knobG = new THREE.SphereBufferGeometry(0.025,8,8)
  let knobMat = new THREE.MeshLambertMaterial({color:colors.gold})
  let knob = new THREE.Mesh(knobG,knobMat);
  houseGroup.add(knob)
  knob.position.set(-0.39,0.5,1.14)
  // doorstep 
  createBoxShape(0.05,0.05,0.35,-0.38,0.27,1,colors.grey,false,false,houseGroup);
  createBoxShape(0.05,0.05,0.35,-0.34,0.25,1,colors.grey,false,false,houseGroup);  
  // windows 
  createRoofWindow(-0.65,1.6,1,colors.blue,0.1,0.1,0.2,12);
  createRoofWindow(-0.67,1.60,1,colors.red,0.12,0.12,0.22,12);
  // roof window bars
  createBoxShape(0.02,0.24,0.025,-0.55,1.6,1,colors.red,false,false,houseGroup);
  createBoxShape(0.02,0.02,0.2,-0.55,1.62,1,colors.red,false,false,houseGroup);
  // left window
  createBoxShape(0.05,0.3,0.3,-0.41,0.65,1.45,colors.blue,false,false,houseGroup);
  // vertical bars
  createBoxShape(0.05,0.3,0.025,-0.40,0.65,1.45,colors.brown2,false,false,houseGroup);
  createBoxShape(0.05,0.3,0.025,-0.40,0.65,1.60,colors.brown2,false,false,houseGroup);
  createBoxShape(0.05,0.3,0.025,-0.40,0.65,1.30,colors.brown2,false,false,houseGroup);
  // horizontal bars
  createBoxShape(0.05,0.025,0.325,-0.40,0.8,1.45,colors.brown2,false,false,houseGroup);
  createBoxShape(0.05,0.025,0.325,-0.40,0.65,1.45,colors.brown2,false,false,houseGroup);
  createBoxShape(0.05,0.025,0.325,-0.40,0.5,1.45,colors.brown2,false,false,houseGroup);
  // right window
  createBoxShape(0.05,0.3,0.3,-0.41,0.65,0.55,colors.blue,false,false,houseGroup);  
  // vertical bars
  createBoxShape(0.05,0.3,0.025,-0.40,0.65,0.55,colors.brown2,false,false,houseGroup);
  createBoxShape(0.05,0.3,0.025,-0.40,0.65,0.70,colors.brown2,false,false,houseGroup);
  createBoxShape(0.05,0.3,0.025,-0.40,0.65,0.40,colors.brown2,false,false,houseGroup);
  // horizontal bars
  createBoxShape(0.05,0.025,0.325,-0.40,0.8,0.55,colors.brown2,false,false,houseGroup);
  createBoxShape(0.05,0.025,0.325,-0.40,0.65,0.55,colors.brown2,false,false,houseGroup);
  createBoxShape(0.05,0.025,0.325,-0.40,0.5,0.55,colors.brown2,false,false,houseGroup);
  mainGroup.add(houseGroup);
}

// chimney smoke
const puffCount = 2;
let puffs = [];
let puff;
const createPuffs = () => {
  for (let i = 0; i < puffCount; i++) {
    const geo = new THREE.SphereBufferGeometry(0.1,6, 6);
    const mat = new THREE.MeshLambertMaterial({color:0xffffff,transparent:true});
    puff = new THREE.Mesh(geo,mat);
    puffs.push(puff);
    houseGroup.add(puff); 
    puff.position.set(-1,1.74,0.6);
    puff.scale.set(0,0,0);
  }
}

// mailbox
let mailBoxGroup = new THREE.Group();

const createMailBoxRoof = () => {
  let mailRoofG = new THREE.ConeBufferGeometry(0.16, 0.1, 4);
  let mailRoofMat = new THREE.MeshLambertMaterial({color:colors.brown2});
  let mailRoofMesh = new THREE.Mesh(mailRoofG,mailRoofMat);
  mailRoofMesh.position.set(0,0.34,0)
  mailRoofMesh.rotation.y = THREE.Math.degToRad(45);
  mailRoofMesh.receiveShadow = true;
  mailRoofMesh.castShadow = true;
  mailBoxGroup.add(mailRoofMesh);
}

const createMailbox = () => {
  createMailBoxRoof();
  // pole
  createBoxShape(0.05,0.3,0.05,0,0,0,colors.brown2,true,true,mailBoxGroup);
  // box
  createBoxShape(0.2,0.2,0.2,0,0.2,0,colors.brown2,true,true,mailBoxGroup);
  // hole
  createBoxShape(0.05,0.05,0.16,0.085,0.22,0,0x634326,false,false,mailBoxGroup);
  mainGroup.add(mailBoxGroup);
  mailBoxGroup.position.set(1.5,0.4,1.5);
}

// Bunny
let pivot1 = new THREE.Group();
let pivot2 = new THREE.Group();
let pivot3 = new THREE.Group();
let bunnyGroup1 = new THREE.Group();
let bunnyGroup2 = new THREE.Group();
let bunnyGroup3 = new THREE.Group();
const createBunnyShape = (group,x,y,z,color,xPos,yPos,zPos) => {
  let geo = new THREE.BoxBufferGeometry(x,y,z);
  let mat = new THREE.MeshLambertMaterial({color:color,transparent:true});
  let mesh = new THREE.Mesh(geo,mat);
  mesh.position.set(xPos,yPos,zPos);
  mesh.receiveShadow = true;
  mesh.castShadow = true;
  group.add(mesh);
}

const bunnyColors = [0xFFFFFF,0xEAEAEA,0xCFAF8E];
const createBunny = (group,pivotPositionX,pivotPositionY,pivotPositionZ,pivot) => {
  bunnyColor = bunnyColors[Math.round(Math.random() * 2)] 
  // head
  createBunnyShape(group,0.1,0.1,0.1,bunnyColor,0,0,0.2);
  // ears
  createBunnyShape(group,0.025,0.14,0.025,bunnyColor,0.025,0.05,0.23);
  createBunnyShape(group,0.025,0.14,0.025,bunnyColor,-0.025,0.05,0.23);
  // eyes
  createBunnyShape(group,0.02,0.02,0.02,"black",0.025,0.02,0.25);
  createBunnyShape(group,0.02,0.02,0.02,"black",-0.025,0.02,0.25);
  mainGroup.add(group); 
  // https://stackoverflow.com/questions/28848863/threejs-how-to-rotate-around-objects-own-center-instead-of-world-center
  let box = new THREE.Box3().setFromObject( group );
  box.getCenter( group.position ); // this re-sets the mesh position
  group.position.multiplyScalar( - 1 );
  pivot.add( group );
  pivot.position.set(pivotPositionX,pivotPositionY,pivotPositionZ);
  mainGroup.add( pivot );
  
}

// GSAP ANIMATIONS 
// make island floaty
const animateIsland = () => {
  gsap.to(mainGroup.position,{y:'+=0.065',repeat:-1,yoyo:true,ease:"sine.in",duration:2,yoyoEase:"sine.inOut"})
}
// animate single waterfall particle
const animateDrop = (drop) => {
  const tl = gsap.timeline({
    onStart: () => {
      gsap.set(drop.position,{ y: gsap.utils.random(-0.17,0,0.01) })
      gsap.set(drop.scale,{x:0.1,y:0.1,z:0.1})
    },
    onComplete: animateDrop,
    onCompleteParams: [drop]
  });

  tl.to(drop.position, {
    y: "-=1",
    ease: "linear",
    delay: gsap.utils.random(0, 2, 0.2),
    duration:1,
    onStart:() => {
      gsap.to(drop.scale,{x:0,y:0,z:0,delay:0.14,duration:0.86})
    }
  });
  return tl;
};
// animate single water detail
const animateDet = (det) => {
  const tl = gsap.timeline(
    {defaults:{duration:1,ease:"sine.in"},
     onStart:() => {
       gsap.set(det.position,{x:gsap.utils.random(0.60,0.92),z:gsap.utils.random(-1.8,1.8)});
       gsap.set(det.rotation,{y:0,z:0});
       gsap.set(det.material,{opacity:0});
     },
     onComplete:animateDet,
     onCompleteParams:[det]}
  )
  tl.to(det.material,{keyframes:[{opacity:0.7},{opacity:0}]},'in')
  .to(det.position,{keyframes:[{z:"+=0.025"},{z:"-=0.025"}]},'in')
  .to(det.rotation,{keyframes:[{y:"-=0.2"},{z:"+=0.2"}]},'in')

  return tl;
}

const animateDet2 = (det) => {
  const tl = gsap.timeline(
    {defaults:{duration:1,ease:"sine.in"},
     onStart:() => {
       gsap.set(det.position,{x:gsap.utils.random(0.60,0.92),y:gsap.utils.random(-0.18,0.20)});
       gsap.set(det.rotation,{y:0,z:0});
       gsap.set(det.material,{opacity:0});
     },
     onComplete:animateDet2,
     onCompleteParams:[det]}
  )
  tl.to(det.material,{keyframes:[{opacity:0.7},{opacity:0}]},'in')
  .to(det.position,{keyframes:[{y:"-=0.025"},{y:"+=0.025"}]},'in')
  .to(det.rotation,{keyframes:[{y:"-=0.2"},{z:"+=0.2"}]},'in')

  return tl;
}


// animate single puff
const animatePuff = (puff) => {
  const tl = gsap.timeline({onComplete:animatePuff,onCompleteParams:[puff],onStart:() => {
    gsap.set(puff.material,{opacity:1})
    gsap.set(puff.scale,{x:0,y:0,z:0})
    gsap.set(puff.position,{y:1.74})
  }})
  tl.to(puff.position,{y:'+=0.6',duration:2,delay:0.6,ease:"sine.inOut",onStart:() => {
    gsap.to(puff.scale,{keyframes:[{x:1,y:1.4,z:1},{z:1.4,duration:0.24},{y:0.8,delay:-0.44,duration:0.24},{x:1,y:1}]})
    gsap.to(puff.material,{opacity:0,duration:1.32,delay:0.68})
  }})
}
// function to loop over particles
const animateParticles = (fn,array) => {
  for (let i =0; i < array.length; i++) {
    fn(array[i])
  }
}

// animate the bunny
// eye blink
const animateBunnyEyes = (group,delay) => {
  const tl = gsap.timeline({repeat:-1,repeatDelay:1,defaults:{duration:0.2},delay:delay})
  const eyes = [group.children[3].material,group.children[4].material]
  tl.to(eyes,{keyframes:[{opacity:0},{opacity:1}]},'blink')
  return tl;
}

// hop and move
const animateBunny = (pivot,delay) => {
    const tl = gsap.timeline({repeat:-1,defaults:{duration:0.32},delay:delay})
  tl.to(pivot.position,{keyframes:[{y:'+=0.1',z:'+=0.1'},{y:'-=0.1'},{y:'+=0.1',z:'+=0.1'},{y:'-=0.1'}]})
    .to(pivot.rotation,{y:3,duration:0.6,delay:0.16})
    .to(pivot.position,{keyframes:[{y:'+=0.1',z:'-=0.1'},{y:'-=0.1'},{y:'+=0.1',z:'-=0.1'},{y:'-=0.1'}]})
    .to(pivot.rotation,{y:0,duration:0.6,delay:0.16})
  return tl;
}

// render
const render = () => {
  
  controls.update()
  requestAnimationFrame(render);
  renderer.render(scene, camera);
};

// resize
const resizeHandler = () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
};

window.addEventListener("resize", () => {
  resizeHandler();
});

window.addEventListener('load',() => {
  setup();
  createIsland();
  animateIsland();
  // waterfall particles creation
  createParticles(
    colors.blue,
    dropCount,
    drops,
    0.1,0.1,0.1,
    0.56,0.95,0,-0.19,1.95,1.95,
    1,
    0,0,0
  );
  // animate waterfall particles 
  animateParticles(animateDrop,drops);
  // water details creation
  createParticles(
    "white",
    detailCount,
    dets,
    0.025,0.025,0.025,
    0.60,0.92,0.25,0.26,1.8,-1.8,
    0,
    0,0,0
  );
  createParticles(
    "white",
    detailCount2,
    dets2,
    0.025,0.025,0.025,
    0.60,0.92,-0.2,0.23,2,2,
    0,
    0,0,0
  );
  // animate water details
  animateParticles(animateDet,dets);
  animateParticles(animateDet2,dets2);
  // trees
  // trees next to house
  createTree(0, 0.75, -0.1, 0, 1.2, -0.1);
  createTree(-1.50, 0.75, -0.1, -1.50, 1.2, -0.1);
  createTree(-0.75, 0.75, -0.5, -0.75, 1.2, -0.5);
  createTree(0, 0.75, -1, 0, 1.2, -1);
  createTree(-1.50, 0.75, -1, -1.50, 1.2, -1);
  createTree(-0.75, 0.75, -1.5, -0.75, 1.2, -1.5);
  // other trees
  createTree(1.5, 0.75, -1.5, 1.5, 1.2, -1.5);
  createTree(1.5, 0.75, -0.5, 1.5, 1.2, -0.5);
  createTree(1.5, 0.75, 0.5, 1.5, 1.2, 0.5);
  // bushes next to house
  createBush(-0.7,0.28,-0.1);
  createBush(-0.7,0.28,-1);
  createBush(-1.55,0.28,-0.6);
  createBush(-1.35,0.28,-1.5);
  //
  createBush(1.5,0.28,1);
  createBush(1.5,0.28,0);
  createBush(1.5,0.28,-1);
  // house
  createHouse();
  // chimney smoke
  createPuffs();
  // animate the smoke
  animateParticles(animatePuff,puffs);
  // mailbox
  createMailbox();
  // bunnies 
  createBunny(bunnyGroup1,0,0.33,0.2,pivot1);
  createBunny(bunnyGroup2,-1,0.33,-1,pivot2);
  createBunny(bunnyGroup3,-0.2,0.33,-1.4,pivot3);
  animateBunny(pivot1,0);
  animateBunny(pivot2,gsap.utils.random(0,3,0.4));
  animateBunny(pivot3,gsap.utils.random(0,3,0.4));
  animateBunnyEyes(bunnyGroup1,0);
  animateBunnyEyes(bunnyGroup2,gsap.utils.random(0,3,0.4));
  animateBunnyEyes(bunnyGroup3,gsap.utils.random(0,3,0.4));  
  render();
})