/*
  UPDATED VERSION: NOVEMBER 2023, threejs v0.158.0
  
  It's disco time!  
  And this ghost wants to party all night long 👻
  But you can freeze him anytime you wish to!
  
  ★ Scene designed & coded by Anna Scavenger in May 2020 ★
  https://twitter.com/ouchpixels
  
  License: You can remix, adapt, and build upon my code non-commercially.
  
  Assets credits, special thanks to:
  Cubemap by Emil Persson aka Humus (@_Humus_)
  Simplex noise by Stefan Gustavson (@stegu)
  Tree gtlf model - by Helindu, modified by me in Blender:
  https://sketchfab.com/3d-models/tree-without-leaves-1-336d3bc197ce4618ab325e7a6dfa0e7a
  
*/

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { Flow } from 'three/addons/modifiers/CurveModifier.js';
import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js';

// ASSETS

let texChromeURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/matcap_chromeEye_128.jpg";
let texSteelURL = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/matcap_steel_256.jpg";
let ghostURL = "https://assets.codepen.io/911157/ghost1.glb";
let treeURL = "https://assets.codepen.io/911157/tree_ghost_opt.glb";

let scene, camera, renderer;

// Through these points flies the ghost
// Also points for placing the tori

let controlPoints = [

  new THREE.Vector3(420, 120, 0),	// letter D
  new THREE.Vector3(-70, 200, 750), // additional point
  new THREE.Vector3(-440, 100, 150), // letter G	
  new THREE.Vector3(-250, 440, -395),	// letter O
  new THREE.Vector3(-20, 600, -590), // additional point
  new THREE.Vector3(200, 500, -380) // letter O2

];

let materials;
let geometries;

// FLOW + GLOW

let ghost;
let flow;

let glowMeshes = [];
let currentGlowMesh;

// GLOBAL MESHES

let discoBall, discoBallN, ballCover, ballCover2, discoBallG, discoBallT;
let letterHLeft, letterHRight, cylinderT;
let lettersNightGroup;
let hookG, hookD, starD, starG;

let pointLight, pointLight2;

// 'FREEZING' THE SCENE EFFECT

let quaternion = new THREE.Quaternion();
let isSceneFrozen = false;
let rotSpeed = 0.25;

const btnFreeze = document.querySelector('#btn-freeze');
const freezeTextBlur = document.querySelector('#freeze-text-blur');
const freezeTextTop = document.querySelector('#freeze-text-top');

// LANDSCAPE / PORTRAIT

let isMobile = /(Android|iPhone|iOS|iPod|iPad)/i.test(navigator.userAgent);
let windowRatio = window.innerWidth / window.innerHeight;
let isLandscape = (windowRatio > 1) ? true : false;

let mouseX = 0;
let mouseY = 0;

let params = {
  
  terrainWidth: 2000,
  terrainLength: isLandscape ? 3000 : (2500 / windowRatio),
  terrainPosY: -250,
  treeMainPos: new THREE.Vector3(0, -250, 0),
  treesBackgroundPos: new THREE.Vector3(0, -250, 0),
  numTrees: 7,
  terrainLettersPosZ: isLandscape ? 850 : 950,
  ghostColor: new THREE.Color(0xffffff),
  glowOffColor: new THREE.Color(0x8D8D8D),
  glowOnColor: new THREE.Color(0xca00e5),
  pointLightColor: new THREE.Color(0x0fc4b8), // dark green
  play: false,
  
}

init();

function init() {
  
  geometries = initGeometries();
  materials = initMaterials();
  
  // CAMERA, LIGHTS, RENDERER
  
  initBasicSetup();
  
  // MESHES
  
  initTerrain();
  initTerrainLetters();
  initAirLetters();
  loadTree();
  loadGhost();
  
  render();
  
  window.addEventListener("resize", onWindowResize, false);
  document.addEventListener("mousemove", onMouseMove, false);
  btnFreeze.addEventListener("click", freezeScene, false);
  
}

function initBasicSetup() {
  
  initScene();
  initCamera();
  initLights();
  initRenderer();

}

function initScene() {
  
  scene = new THREE.Scene();
  const fogNear = isLandscape ? 1200 : 2200;
  const fogFar = isLandscape ? 4000 : 5500;
  scene.fog = new THREE.Fog(0x998a7d, fogNear, fogFar);
  
}

function initCamera() {
  
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000);
  const cameraY = isLandscape ? 170 : 400;
  const cameraZ = isLandscape ? 1850 : (1800 / windowRatio);
  camera.position.set(0, cameraY, cameraZ);
  camera.lookAt(0, 0, 0);
  scene.add(camera);
  
}

function initLights() {
  
  const backLight = new THREE.DirectionalLight(0xff00ff, 1.75 * Math.PI);
  backLight.position.set(200, 0, -55);
  backLight.target.position.set(300, 50, -100);
  
  const fillLight = new THREE.DirectionalLight(0xffffff, 0.65 * Math.PI);
  fillLight.position.set(80, 10, 200);
  fillLight.target.position.set(50, 50, -50);
  
  let posZ = isLandscape ? 750 : 850;
  
  pointLight = new THREE.PointLight(params.pointLightColor, 8.5 * Math.PI, 200, 2);
  pointLight.position.set(-300, 0, posZ);
  pointLight2 = new THREE.PointLight(params.pointLightColor, 8.5 * Math.PI, 200, 2);
  pointLight2.position.set(300, 0, posZ);

  scene.add( fillLight, backLight, pointLight, pointLight2 );
    
}

function initRenderer() {
  
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setPixelRatio(window.devicePixelRatio > 1.5 ? Math.min(window.devicePixelRatio, 1.4) : Math.min(window.devicePixelRatio, 1.25));
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.outputColorSpace = THREE.SRGBColorSpace;
  renderer.gammaFactor = 2.2;
  container.appendChild(renderer.domElement);
  
}

function initGeometries() {
  
  let torus = new THREE.TorusGeometry(140, 40, 16, 46);
  let halfTorus = new THREE.TorusGeometry(70, 25, 10, 20, Math.PI);
  
  let cylinderThin = new THREE.CylinderGeometry(10, 10, 190, 8);
  let cylinderThick = new THREE.CylinderGeometry(30, 30, 150, 22, 1);
  let cylinderThick2 = new THREE.CylinderGeometry(30, 30, 150, 22, 22);
  
  let sphere = new THREE.SphereGeometry(50, 24, 12);
  let halfSphere = new THREE.SphereGeometry(50, 28, 8, 0, Math.PI);
  let halfSphere2 = new THREE.SphereGeometry(55, 28, 8, 0, Math.PI);
  let cone = new THREE.ConeGeometry(40, 110, 20); 
  
  // HOOK 1 - MERGED GEOMS
  
  let halfTorusThin = new THREE.TorusGeometry( 85, 10, 12, 50, Math.PI);
  halfTorusThin.rotateX(Math.PI);
  let radius = halfTorusThin.parameters.radius;
  let cylinderHeight = cylinderThin.parameters.height;
  halfTorusThin.translate(- radius, - cylinderHeight / 2, 0);
  let hook = mergeGeometries([halfTorusThin, cylinderThin], true);
  
  // HOOK 2 - MERGED GEOMS
  
  let cylinderD = new THREE.CylinderGeometry(10, 10, 350, 10);
  let halfTorusD = new THREE.TorusGeometry(70, 10, 12, 50, Math.PI / 2);
  halfTorusD.rotateX(Math.PI);
  halfTorusD.rotateZ( - Math.PI / 2);
  let radiusD = halfTorusD.parameters.radius;
  let heightCylinderD = cylinderD.parameters.height;
  halfTorusD.translate( radiusD, - heightCylinderD / 2, 0 );
  let hook2 = mergeGeometries([cylinderD, halfTorusD], true);
  
  return {
    
    torus,
    halfTorus,
    cylinderThin,
    cylinderThick,
    cylinderThick2,
    sphere,
    halfSphere,
    halfSphere2,
    cone,
    hook,
    hook2
    
  }
  
}

function initMaterials() {
  
  const grey = new THREE.MeshBasicMaterial({color: 0x222222});
  const blackBasic = new THREE.MeshBasicMaterial({color: 0x000000});
  const brownSimple = isMobile ? (new THREE.MeshBasicMaterial({color: 0x594a3e})) : (new THREE.MeshLambertMaterial({color: 0x5e4732}));
  const brown = new THREE.MeshLambertMaterial({color: 0x5e4732});
  const purpleFlat = new THREE.MeshLambertMaterial({color: 0xff00ff});

  const purple = new THREE.MeshStandardMaterial({
    
    color: 0xff00ff,
    roughness: 0.4,
    metalness: 0.9
    
  });
  purple.color.convertSRGBToLinear();
  
  const greyFlat = new THREE.MeshPhongMaterial({
    
    color: 0x200066,
    emissive: 0x54944,
    specular: 0x1d683f,
    shininess: 80,
    flatShading: true
    
  });
  greyFlat.color.convertSRGBToLinear();
  
  // MATCAPS

  const textureLoader = new THREE.TextureLoader();
  textureLoader.setCrossOrigin('');
  const textureChrome = textureLoader.load(texChromeURL);
  const textureSteel = textureLoader.load(texSteelURL);
  
  const matcapChrome = new THREE.ShaderMaterial({
    
    uniforms: {
      tMatCap: { type: "t", value: textureChrome }
    },
    vertexShader: document.querySelector("#matcap-vs").textContent,
    fragmentShader: document.querySelector("#matcap-fs").textContent,
    side: THREE.DoubleSide
    
  });
  
  const matcapSteel = new THREE.ShaderMaterial({
    
    uniforms: {
      tMatCap: { type: "t", value: textureSteel }
    },
    vertexShader: document.querySelector("#matcap-vs").textContent,
    fragmentShader: document.querySelector("#matcap-fs").textContent,
    side: THREE.DoubleSide
    
  });
  
  // DISCO REFLECTIONS
  
  const loader = new THREE.CubeTextureLoader();
  loader.setCrossOrigin('');
  loader.setPath('https://s3-us-west-2.amazonaws.com/s.cdpn.io/911157/');
 
  const textureCube = loader.load([
    
    'pisa1_px.jpg', 'pisa1_nx.jpg',
	  'pisa1_py.jpg', 'pisa1_ny.jpg',
	  'pisa1_pz.jpg', 'pisa1_nz.jpg'
    
  ]);
  
  const disco = new THREE.MeshPhongMaterial({
    
    envMap: textureCube,
    color: 0xff00ff,
    emissive: 0xaa00aa,
    specular: 0x1d683f,
    flatShading: true
    
  });
  
  // FLAKY MATERIAL
  
  let phongShader = THREE.ShaderLib.standard;
  let fragmentShader = phongShader.fragmentShader;
  fragmentShader = document.querySelector("#flaky-fs-beforeMain").textContent +
  fragmentShader.replace(
    "vec4 diffuseColor = vec4( diffuse, opacity );",
    document.querySelector("#flaky-fs").textContent
  );

  const flaky = new THREE.ShaderMaterial({
    
    uniforms: THREE.UniformsUtils.merge([phongShader.uniforms, {
      
      uThreshold: { value: 0.5 },
      uEdgeWidth: { value: 0.0 },
      uEdgeColor: { value: [255, 109, 203] },
      uColor: { value: [255, 0, 255] },
      uFrequency: { value: 0.95 }
    
    }]),
    vertexShader: document.querySelector("#flaky-vs").textContent,
    fragmentShader: fragmentShader,
    side: THREE.DoubleSide,
    lights: true,
    transparent: true

  });
  
  // GLOW MATERIAL
  
  let glowOffColor = params.glowOffColor;
  
  const glow	= new THREE.ShaderMaterial({
		
    uniforms: {
   
			coeficient: { type: "f", value: 1.1 },
			power: { type: "f", value: 1.4 },
			glowColor: { type: "c", value: glowOffColor },
		
    },
		vertexShader: document.querySelector("#glow-vs").textContent,
		fragmentShader: document.querySelector("#glow-fs").textContent,
		transparent: true,
	
  });
  
  return {
    
    blackBasic,
    grey, greyFlat,
    purple, purpleFlat,
    brown, brownSimple,
    matcapChrome, matcapSteel,
    disco,
    flaky,
    glow
    
  }
  
}

function initTerrain() {
  
  let terrainWidth = params.terrainWidth;
  let terrainLength = params.terrainLength;
  let terrainY = params.terrainPosY;
  
  let terrainGeom = new THREE.PlaneGeometry(terrainWidth, terrainLength, 30, 30);
  terrainGeom.rotateX(-0.5 * Math.PI);
  let positionAttribute = terrainGeom.attributes.position;
    
  for (let i = 0; i < positionAttribute.count; i++) {
    
    let x = positionAttribute.getX( i );
	  let y = positionAttribute.getY( i );
	  let z = positionAttribute.getZ( i );
    
    y += Math.random() * 40;
    
    positionAttribute.setXYZ(i, x, y, z);
  
  }
    
  const terrain = new THREE.Mesh(terrainGeom, materials.brown);
  terrain.position.y = terrainY;
  scene.add(terrain);
  
  // SPRINKLE TERRAIN WITH POINTS
  
  const positionArray = terrainGeom.attributes.position.array;
  const positionAttributeCount = terrainGeom.attributes.position.count;

  const pointsGeom = new THREE.BufferGeometry();
  pointsGeom.setAttribute('position', new THREE.Float32BufferAttribute(positionArray, 3));
  const pointsMat = new THREE.PointsMaterial({ color: 0xff00ff, size: 6 });
  const terrainPoints = new THREE.Points(pointsGeom, pointsMat);
  terrainPoints.position.y = terrainY;
  scene.add(terrainPoints);
  
  // SPRINKLE TERRAIN WITH LITTLE BOXES
  
  const boxBufferGeom = new THREE.BoxGeometry(2.85, 2.85, 2.85);
  const instancedBoxGeom = new THREE.InstancedBufferGeometry().copy(boxBufferGeom);
  let numInstances = positionAttributeCount;
  const terrainBoxes = new THREE.InstancedMesh(instancedBoxGeom, materials.purpleFlat, numInstances);
  
  const dummy = new THREE.Object3D();

  for (let i = 0; i < numInstances; i++) {

    dummy.position.set(

      noise.simplex3(i * 0.2, i * 0.5, 0.5) * 900,
      Math.random() * (-220 - (-240)) + (-240),
      Math.random() * (1300 - (-850)) + (-850),
      
    );

    dummy.rotation.set(

      Math.random() * (Math.PI * 1.95 - (- Math.PI * 1.95)) + (-Math.PI * 1.95),
      Math.random() * (Math.PI * 1.95 - (- Math.PI * 1.95)) + (-Math.PI * 1.95),
      0.0

    );

    dummy.updateMatrix();
    terrainBoxes.setMatrixAt(i, dummy.matrix);

  }

  scene.add(terrainBoxes);
  
}

function initTerrainLetters() {
  
  let posZ = params.terrainLettersPosZ;

  // letter N
  
  const cylinderN = new THREE.Mesh(geometries.cylinderThick, materials.purple);
  cylinderN.scale.y = 0.85;
  cylinderN.position.set(-360, -150, posZ);
  
  const cylinderN2 = new THREE.Mesh(geometries.cylinderThick, materials.purple);
  cylinderN2.position.set(-230, -170, posZ);
  
  const halfSphereN = new THREE.Mesh(geometries.halfSphere, materials.matcapSteel);
  halfSphereN.position.set(-200.6, -97, posZ);
  halfSphereN.scale.set(0.593, 0.593, 0.593);
  halfSphereN.rotation.x =  - Math.PI / 2;
  scene.add(halfSphereN);
  
  discoBallN = new THREE.Mesh(geometries.sphere, materials.disco);
  discoBallN.position.set(-360, -50, posZ);
  discoBallN.scale.set(0.5, 0.5, 0.5);
  scene.add(discoBallN);
  
  const cylinderThinnerN = new THREE.Mesh(geometries.cylinderThin, materials.matcapSteel);
  cylinderThinnerN.position.set(-360, -150, posZ);
  cylinderThinnerN.scale.set(0.4, 0.9, 0.4);
  scene.add(cylinderThinnerN);
  
  const cylinderThinN = new THREE.Mesh(geometries.cylinderThin, materials.matcapSteel);
  cylinderThinN.position.set(-290, -170, posZ);
  cylinderThinN.scale.set(1.2, 0.8, 1.2);
  cylinderThinN.rotation.z = Math.PI / 4.5;
  
  const discN = new THREE.Mesh( geometries.cylinderThick, materials.matcapSteel );
  discN.position.set(-360, -223, posZ);
  discN.scale.set(1.28, 0.125, 1.28);
  
  const discN2 = discN.clone();
  discN.position.set(-230, -240, posZ);
  
  const letterN = new THREE.Group();
  letterN.add(cylinderN, cylinderN2, cylinderThinN, discN, discN2);
  
  scene.add(letterN);
  
  // letter I
  
  let letterIPosX = -110;
  
  discoBall = new THREE.Mesh(geometries.sphere, materials.disco);
  discoBall.position.set(letterIPosX, -70, posZ);
  
  ballCover = new THREE.Mesh(geometries.halfSphere, materials.purple);
  ballCover.material.side = THREE.DoubleSide;
  
  let halfRadius = ballCover.geometry.parameters.radius;
  ballCover.scale.set(1.15, 1.15, 1.15);
  ballCover.position.set(letterIPosX, - 74 - halfRadius, posZ);
  ballCover.rotation.set(Math.PI / 2, - Math.PI / 2, 0);
  ballCover.geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(- halfRadius, 0, 0));
  ballCover.updateMatrix();
  ballCover2 = ballCover.clone();
  ballCover2.position.copy(ballCover.position);
  ballCover2.rotation.z = Math.PI;
  ballCover2.rotation.y = Math.PI / 2;
  
  const cone = new THREE.Mesh(geometries.cone, materials.matcapSteel);
  cone.position.set(letterIPosX, -180, posZ);
  
  const letterI = new THREE.Group();
  letterI.add(cone, discoBall, ballCover, ballCover2);
  scene.add(letterI);
  
  // letter G
  
  const torusG = new THREE.Mesh(geometries.halfTorus, materials.purple);
  torusG.position.set(50, -160, posZ);
  torusG.rotation.z = Math.PI / 2;
  
  const hookG = new THREE.Mesh(geometries.hook, materials.matcapSteel);
  hookG.scale.set(0.3, 0.25, 0.8);
  hookG.position.set(70, -185, posZ);
  
  discoBallG = discoBallN.clone();
  discoBallG.position.set(50, -160, posZ);
  
  const letterG = new THREE.Group();
  letterG.add(torusG, hookG, discoBallG);
  scene.add(letterG);
  
  // letter H
  
  letterHLeft = new THREE.Group();
  letterHRight = new THREE.Group();
  
  const cylinderH = new THREE.Mesh(geometries.cylinderThick2, materials.flaky);
  // cylinderH.position.set(140, -145, 850);
  cylinderH.position.set(140, -160, posZ);
  cylinderH.scale.set(1.0, 0.9, 1.0);
  
  const cylinderH2 = new THREE.Mesh(geometries.cylinderThick, materials.matcapSteel);
  cylinderH2.scale.set(0.98, 0.88, 0.98);
  cylinderH2.position.copy(cylinderH.position);
 
  const discH = new THREE.Mesh(geometries.cylinderThick, materials.matcapSteel);
  discH.position.set(140, -87, posZ);
  discH.scale.set(1.275, 0.08, 1.275);
  const discH2 = discN.clone();
  discH2.position.set(140, -225, posZ);
  
  letterHLeft.add(cylinderH, cylinderH2, discH, discH2);
  
  letterHRight = letterHLeft.clone();
  letterHRight.position.set(120, 0, 0);
  
  const horizontalH = new THREE.Mesh(geometries.cylinderThin, materials.matcapSteel);
  horizontalH.scale.set(1.2, 0.5, 1.2);
  horizontalH.rotation.z = Math.PI / 2;
  horizontalH.position.set(200, -155, posZ);
  
  const letterH = new THREE.Group();
  letterH.add(letterHLeft, letterHRight, horizontalH);
  
  scene.add(letterH);

  // letter T 
  
  cylinderT = new THREE.Mesh(geometries.cylinderThin, materials.matcapSteel);
  cylinderT.scale.set(0.55, 0.725, 0.55);
  cylinderT.position.set(370, -40, posZ);
  cylinderT.rotation.z = Math.PI / 2;
  
  const cylinderT2 = cylinderN.clone();
  cylinderT2.position.set(370, -170, posZ);
  cylinderT2.scale.set(0.9, 0.75, 0.9);
  
  discoBallT = discoBallN.clone();
  discoBallT.position.set(370, -70, posZ);  
  
  const letterT = new THREE.Group();
  letterT.add(cylinderT, cylinderT2, discoBallT);
  scene.add(letterT);
  
  lettersNightGroup = new THREE.Group();
  
}

function loadTree() {
  
  const loader = new GLTFLoader();

  loader.load(treeURL,
    
    function (gltf) {
      
      let tree = gltf.scene.children[0].children[0].children[0].children[0].children[0];
      tree.geometry.computeVertexNormals();
      let treeGeom = tree.geometry;
      treeGeom.scale(55, 55, 55);
      treeGeom.rotateX(-0.5 * Math.PI);
      tree.position.set(50, -150, -1050);
      tree.material = new THREE.MeshBasicMaterial({color: 0x000000, fog: false});
    
      initTrees(treeGeom);
      scene.add(tree);
      
    },
    
    function (xhr) { console.log((xhr.loaded / xhr.total * 100 ) + '% loaded'); },
    
    function (error) { console.log( 'An error happened' ); }
    
  );
  
}

function initTrees(tGeom) {
  
  let treeMesh = new THREE.Mesh(tGeom, materials.matcapSteel); 
      
  let treesCoords = [
    
    -350, -200, -1400,
    -200, -270, -1300,
    250, -250, -1300
    
  ];
  
  for (let i = 0; i < (treesCoords.length / 3); i++) {
    
    let t = treeMesh.clone();
    let x = treesCoords[3 * i];
    let y = treesCoords[3 * i + 1];
    let z = treesCoords[3 * i + 2];
    t.position.set(x, y, z);
    t.rotation.set(0, i * 0.2 * Math.PI, 0);
    scene.add(t);
    
  }
  
}

function loadGhost() {
    
  const loader = new GLTFLoader();

  loader.load(ghostURL,
    
    function (gltf) {
      
      ghost = gltf.scene.children[2].parent.children[2];
      ghost.geometry.computeVertexNormals();
      initFlow();
      removeLoadingScreen();
      
    },
    
    function (xhr) { console.log((xhr.loaded / xhr.total * 100 ) + '% loaded'); },
    
    function (error) { console.log( 'An error happened' ); }
    
  );
  
}

function initFlow() {
  
  let ghostColor = params.ghostColor || 0xff3da4;
  
  let purple = new THREE.MeshStandardMaterial({

    color: ghostColor,
    roughness: 0.95,
    metalness: 0.05,
    side: THREE.DoubleSide
  
  });
  purple.color.convertSRGBToLinear();
  
  let curvePoints = controlPoints;
  
  let curve = new THREE.CatmullRomCurve3(curvePoints);
  curve.curveType = "centripetal";
  curve.closed = true;
  
  let ghostScale = 0.375;
  const mesh = ghost;
  mesh.geometry.scale(ghostScale, ghostScale, ghostScale);
  mesh.geometry.rotateY(-Math.PI / 2);
  mesh.geometry.rotateX(Math.PI / 2);

  let objectToCurve = new THREE.Mesh(mesh.geometry, purple);
  flow = new Flow(objectToCurve);
  flow.updateCurve(0, curve);
  scene.add(flow.object3D);
  
}

// "GOOD" LETTERS IN THE AIR

function initAirLetters() {
  
  // 4 TORI - AIR LETTERS
  
  let letterPositions = [controlPoints[0], controlPoints[2], controlPoints[3], controlPoints[5]];
    
  let torus = new THREE.Mesh(geometries.torus, materials.glow);
    
  for (let i = 0; i < letterPositions.length; i++) {
    
    let t = torus.clone();
    // IMPORTANT! When cloning a ShaderMaterial, the attributes and vertex/fragment programs are copied by reference. 
    // The uniforms are copied by value, which is what we need. / turning on and off glow for each mesh /
    t.material = torus.material.clone();
    t.material.isGlowing = false;
    t.position.copy(letterPositions[i]);
    glowMeshes.push(t);
    scene.add(t);
  
  }
    
  // letter G
    
  hookG = new THREE.Mesh(geometries.hook, materials.matcapChrome);
  hookG.position.set(-310, -40, 150);
  hookG.matrixAutoUpdate = false;
  hookG.updateMatrix();
  scene.add( hookG );
  
  let starGeom = generateStarGeometry();
  starG = new THREE.Mesh(starGeom, materials.matcapSteel);
  starG.position.set(-480, -124, 150);
  starG.rotation.z = Math.PI / 5;
  starG.scale.set(2.4, 2.4, 2.4);
  scene.add(starG);
  
  // letter D
  
  hookD = new THREE.Mesh(geometries.hook2, materials.matcapChrome);
  hookD.position.set(550, 210, 0);
  hookD.matrixAutoUpdate = false;
  hookD.updateMatrix();
  scene.add(hookD);
  
  starD = starG.clone();
  starD.position.set(550, 398, 0);
  starD.rotation.z = Math.PI / 5;
  scene.add(starD);
  
}

function generateStarGeometry() {
  
  let numPoints = 7;
  let minLength = 4;
  let maxLength = 15;
  
  let extrudeSettings = {
    
    steps: 2,
    depth: 2.5,
    bevelEnabled: true,
    bevelThickness: 0,
    bevelSize: 2,
    bevelOffset: 0,
    bevelSegments: 1
    
  };
  
  let points = []; 
  
	for (let i = 0; i < numPoints * 2; i++) {

		let l = i % 2 == 1 ? minLength : maxLength;
		let step = i / numPoints * Math.PI;
		points.push(new THREE.Vector2(Math.cos(step) * l, Math.sin(step) * l));

	}

	let starShape = new THREE.Shape(points);
	let starGeom = new THREE.ExtrudeGeometry(starShape, extrudeSettings);
  
  return starGeom;
  
}

function render() {
  
  renderer.render(scene, camera);
  requestAnimationFrame(render);
  
  if (flow && isSceneFrozen) {
    
    // STOP THE FLYING GHOST AND ROTATE THE SCENE
    flow.moveAlongCurve(0.000);
    rotateScene();
    
  } else if (flow && !isSceneFrozen ) {

    animateTerrainLetters();
    updatePointLights();
    
    flow.moveAlongCurve(0.005);
    
    let offset = flow.uniforms.pathOffset.value.toFixed(3);
    let progress = (offset - Math.floor(offset)).toFixed(3);
        
    if (progress == 0.25) {
      
      currentGlowMesh = glowMeshes[1];
      updateMaterial(currentGlowMesh);

    } else if (progress == 0.55) {
      
      currentGlowMesh = glowMeshes[2];
      updateMaterial(currentGlowMesh);
      
    } else if (progress == 0.7) {
      
      currentGlowMesh = glowMeshes[3];
      updateMaterial(currentGlowMesh);

    } else if (progress == 0.92) {
      
      currentGlowMesh = glowMeshes[0];
      updateMaterial(currentGlowMesh);

    } else {
      
      return;
    
    }

  }
  
}

function rotateScene() {
  
  camera.lookAt(scene.position);
  let angle = 0.001 * mouseX;
  camera.position.applyQuaternion(quaternion.setFromAxisAngle(new THREE.Vector3(0, 1, 0), angle));

}

function updateMaterial(mesh) {
  
  let glowColor = mesh.material.uniforms.glowColor.value;
  let coeff = mesh.material.uniforms.coeficient;
  
  mesh.material.isGlowing = !mesh.material.isGlowing;
    
  mesh.material.isGlowing ? glowColor.set(params.glowOnColor) : glowColor.set(params.glowOffColor);
  mesh.material.isGlowing ? coeff.value = 1.4 : coeff.value = 1.0;
  
  if (currentGlowMesh == glowMeshes[1]) {
    
    mesh.material.isGlowing ? (hookG.material = materials.purple) : (hookG.material = materials.matcapChrome);
    
  }  else if (currentGlowMesh == glowMeshes[0]) {
    
    mesh.material.isGlowing ? (hookD.material = materials.purple) : (hookD.material = materials.matcapChrome);
    
  }
  
}

function updatePointLights() {
  
  pointLight.intensity = 3.25 + Math.abs(mouseX) * 4.75;
  pointLight2.intensity = 3.25 + Math.abs(mouseX) * 4.75;

}

function animateTerrainLetters() {
  
  starG.rotation.y = mouseX * Math.PI;
  starD.rotation.y = - mouseX * Math.PI;
  
  // letter N
  discoBallN.rotation.y =  - (mouseX * mouseX) * Math.PI * 0.5;
  
  // letter I
  discoBall.rotation.y = mouseX * Math.PI * 0.25;
  discoBall.material.emissive.r = 0.8 - Math.abs(mouseX * 0.78);
  ballCover.rotation.y = - Math.PI / 2 + Math.PI / 1.85 * Math.abs(mouseX * mouseX);
  ballCover.scale.set(1.15 - 0.6 * Math.abs(mouseX*mouseX), 1.15 - 0.85 * Math.abs(mouseX * mouseX), 1.15 - 0.75 * Math.abs(mouseX * mouseX));
  ballCover2.rotation.y = Math.PI / 2 - Math.PI / 1.85 * Math.abs(mouseX * mouseX);
  ballCover2.scale.set(1.15 - 0.6 * Math.abs(mouseX*mouseX), 1.15 - 0.85 * Math.abs(mouseX*mouseX), 1.15 - 0.75 * Math.abs(mouseX*mouseX));
  
  // letter G
  discoBallG.rotation.y = -mouseX * Math.PI;
  discoBallG.scale.set(0.5, 0.2 + 0.3 * Math.abs(mouseX), 0.5);
  
  // letter H
  letterHLeft.children[0].rotation.y = (mouseX) * Math.PI;
  letterHRight.children[0].rotation.y = - (mouseX) * Math.PI;

  // letter T
  discoBallT.rotation.y = -mouseX * Math.PI * 0.5;
  cylinderT.rotation.y = -mouseX * Math.PI * 0.25;
  
}

// *** EVENTS ***

function onWindowResize() {
  
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  
}

function onMouseMove(e) {
  
  e.preventDefault();
  mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
  
}

function freezeScene() {
  
  params.play = false;
    
  if (!isSceneFrozen) {
    
    params.play = false;
    isSceneFrozen = !isSceneFrozen;
    
    freezeTextTop.style.stroke = "#63639f";
    freezeTextBlur.style.stroke = "#5959ff";
    
  } else {
    
    params.play = true;
    isSceneFrozen = !isSceneFrozen;
    
    freezeTextBlur.style.stroke = "#b0b0b0";
    freezeTextTop.style.stroke = "#b0b0b0";

  }
  
}

function removeLoadingScreen() {
  
  const loaderDiv = document.querySelector("#loader");
  const sceneDiv = document.querySelector("#container");
  loaderDiv.style.animation = "fadeOut 0.375s ease-in-out forwards";
  sceneDiv.style.animation = "fadeIn 0.75s ease-in-out forwards";
  loaderDiv.style.display = "none";

}