<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script

import * as THREE from "https://jokertattoo.co.uk/game-lesson-1/js/three.module.js";
            import TWEEN from "https://jokertattoo.co.uk/game-lesson-1/js/tween.esm.js";
            import { RGBELoader } from "https://jokertattoo.co.uk/game-lesson-1/js/RGBELoader.js";
            import { OrbitControls } from "https://jokertattoo.co.uk/game-lesson-1/js/OrbitControls.js";
            import { GLTFLoader } from "https://jokertattoo.co.uk/game-lesson-1/js/GLTFLoader.js";
            import { RoughnessMipmapper } from "https://jokertattoo.co.uk/game-lesson-1/js/RoughnessMipmapper.js";
            import { CSS2DRenderer, CSS2DObject } from "https://jokertattoo.co.uk/game-lesson-1/js/CSS2DRenderer.js";

            var container, controls;
            var camera, scene, renderer, loaderGL, time, mixer, mixer2, mixer3, mixer4, mixer6, mixer7, mixer8, mixer9, clock, labelRenderer;
            var raycaster, mouse, tween;
            var model, model2, model3, model4, model5, model6, model7, model8, model9;

var copy_it, copy_it2, copy_it3;
            var cubefix, cube, cube2, cube3, cube4, cube5, character, Characterm, Monster0, score, gltfPlayer, gltfMonster, isZoomed, gltfC1, gltfC2, gltfC3, gltfC4, gltfC5;
            var action, action3, action0, action2, action4, action5, action6;
            var nearFog, farFog, densityFog, colorFog, colorFog2;
            var hotspotLabel1, hotspotLabel2, hotspotLabel3, hotspotLabel4;
            var materials = [],
                parameters;
            var mouseX = 0,
                mouseY = 0;
            var timerAnimate;
            var CH0, CH, CH3, CH4;
			 var game_loader_count = 0;
			 var observer, text, checkText, partcount, StartButton, ButtonStart;
			var fov, aspect, near, far;
			 var fraction, pointsPath, char, axis, up, newPosition, tangent, radians, particles, loaderSprite;
var materials = [];
var parameterse =[];

 init();
            animate();
            function init() {
  renderer = new THREE.WebGLRenderer({antialias: true});
 renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(devicePixelRatio);
document.body.appendChild(renderer.domElement); 
               var pmremGenerator = new THREE.PMREMGenerator(renderer);
                pmremGenerator.compileEquirectangularShader();

 	  fov = { value: 45};
     aspect = window.innerWidth / window.innerHeight;
     near = { value: 1};
     far = { value: 10000};
				   camera = new THREE.PerspectiveCamera(fov.value, aspect, near.value, far.value);
   camera.position.set(-8, 10, 25.1);

 camera.lookAt(0,0,0);


  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x000000);

  
 
    fraction = 0;

   
   up = new THREE.Vector3( 0,0,1 );
   axis = new THREE.Vector3( );


  pointsPath = new THREE.CurvePath();

const curve = new THREE.CatmullRomCurve3( [
		new THREE.Vector3(  0,   0, -0 ),
	new THREE.Vector3(  -2, 0,  7 ),
	new THREE.Vector3( -8, 0, 12 ),
  new THREE.Vector3(  -14, 0,  8 ),
	new THREE.Vector3( 10, 0, 5 ),
  new THREE.Vector3( -5, 0, -14 ),
  new THREE.Vector3(  5, 0,  -15 ),
 new THREE.Vector3(  0,   0, -0 ),
] );
              
  const bezierLine = new THREE.CubicBezierCurve3(
    
    //originals
	new THREE.Vector3(  13,   0, -1 ),
	new THREE.Vector3(  500, 0,  100 ),
	new THREE.Vector3( -14, 0, -73 ),
 new THREE.Vector3(  0,   0, 0 ),
    	
);
   
  
  const bezierLine2 = new THREE.CubicBezierCurve3(
		new THREE.Vector3(  0,   0, -1 ),
	new THREE.Vector3(  -50, 0,  10 ),
	new THREE.Vector3( -14, 0, -73 ),
    new THREE.Vector3(  0,   0, 0 ),
);
  
  
    pointsPath.add(curve);
 // pointsPath.add(bezierLine2);
 
 const material = new THREE.MeshNormalMaterial();
  const coneGeom = new THREE.ConeGeometry(1, 2, 10);
  coneGeom.translate(0, 24.5, 0);
  
  
  const cone = new THREE.Mesh(coneGeom, material);
  const cylinder = new THREE.CylinderGeometry(0.4, 0.6, 3, 10);
  
  cylinder.merge(cone.geometry, cone.matrix);
  cylinder.scale(0.5, 0.5, 0.5);
  
  char = new THREE.Mesh(cylinder, material);
 


     

	  loaderSprite = new THREE.TextureLoader();
	  
	               
        
                         
                            //Load En
                   
                  
                  
               
var geometryParticle = new THREE.BufferGeometry();
var vertices = [];

var sprite1 = loaderSprite.load("https://i.imgur.com/5w23cqM.png"); 
var partcount = 10;


 const min = 1,
        max = 2,
        high = Math.floor(Math.random() * (max - min) + min);
for (var i = 0; i < partcount; i++) { var x =  (Math.random() * 2 - 1) * 1; var y = (Math.random() * 2 - 1) * 1; var z = (Math.random() * 2 - 1) * 4;
vertices.push(x, y, z); }
geometryParticle.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
parameterse = [ [[0.8, 0, 0.5], sprite1, 1], [[0.8, 0, 0.5], sprite1, 2], [[0.8, 0, 0.5], sprite1, 1], [[0.8, 0, 0.5], sprite1, 2], [[0.8, 0, 0.5], sprite1, 3], ];
for (var i = 0; i < parameterse.length; i++) { var color = parameterse[i][2]; var sprite = parameterse[i][1]; var size = parameterse[i][2];
materials[i] = new THREE.PointsMaterial({ size: size, map: sprite, blending: THREE.AdditiveBlending,
      depthWrite: false, transparent: true, fog: false, toneMapped: false}); 
      
      
      materials[i].toneMapped = false; materials[i].color.setHSL(color[0], color[1], color[2]);
      
      
particles = new THREE.Points(geometryParticle, materials[i]);
// particles.rotation.x = Math.random() 
 

 scene.add(particles);
 }     
             

    
    copy_it = particles.clone();
 scene.add(copy_it);
    copy_it2 = particles.clone();
 scene.add(copy_it2);
                copy_it3 = particles.clone();
 scene.add(copy_it3);






  
    const material2 = new THREE.LineBasicMaterial({
	color: 0x9132a8
});
    const points = pointsPath.curves.reduce((p, d)=> [...p, ...d.getPoints(60)], []);
  
    const geometry2 = new THREE.BufferGeometry().setFromPoints( points );
  

    var liner = new THREE.Line( geometry2, material2 );
     scene.add(liner);
    
     clock = new THREE.Clock();

   
 


 
        
  const axesHelper = new THREE.AxesHelper( 0.5 );
  axesHelper.translateX(1);
  scene.add( axesHelper );
  

  controls = new OrbitControls(camera, renderer.domElement);

                controls.enableKeys = false;
                controls.enableZoom = false;
                controls.enableDamping = true;
                controls.maxPolarAngle = 1.4;
                controls.minPolarAngle = 1.2;
                controls.dampingFactor = 0.04;
                controls.autoRotate = false;
                controls.rotateSpeed = 0.015;
                controls.minDistance = 2;
          
				controls.enabled = false;

            }


function animate() {
    
    
fraction +=0.0004;
   if (fraction > 1) fraction = 0;

 var newPosition2 = pointsPath.getPoint(fraction + 0.0006);
   tangent = pointsPath.getTangent(fraction + 0.0006);

   var newPosition3 = pointsPath.getPoint(fraction + 0.0008);
   tangent = pointsPath.getTangent(fraction + 0.0008);
  
   newPosition = pointsPath.getPoint(fraction);
   tangent = pointsPath.getTangent(fraction);

   for (var i = 0; i < scene.children.length; i++) {
       var object = scene.children[i];
       if (object instanceof THREE.Points) { 
   const pos = object.position.copy(newPosition);
         
          copy_it.position.copy(newPosition);
         
        copy_it2.position.copy(newPosition2);
          copy_it3.position.copy(newPosition3);
         var time = Date.now() * 0.0009;
             object.rotation.y = Math.atan2( tangent.x, tangent.z );
           
      object.rotation.z = time * (i < 1 ? i + 2 : -(i + 1));
     
         
         
       } 
   }

   for (var i = 0; i < materials.length; i++) { 
       var color = parameterse[i][0];
       var h = ((360 * (color[0] + time)) % 360) / 360;
       materials[i].color.setHSL(h, color[1], color[2]);  
   }
     
     
     

 

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