<script src="https://jokertattoo.co.uk/game-lesson-1/js/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 { RoughnessMipmapper } from "https://jokertattoo.co.uk/game-lesson-1/js/RoughnessMipmapper.js";
           
import {GLTFLoader} from 'https://jokertattoo.co.uk/game-lesson-1/js/GLTFLoader.js';



import {DRACOLoader} from 'https://jokertattoo.co.uk/tttt/three.js-master/examples/jsm/loaders/DRACOLoader.js';
		
 

            var container, controls;
            var camera, scene, renderer, loaderGB, time, mixer, mixer2, mixer3, mixer4, mixer6, mixer7, mixer8, mixer9, clock, labelRenderer;
            var raycaster, mouse, tween;
window.dracoLoader;
            var model, model2, model3, model4, model5, model6, model7, model8, model9;
            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;

 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, 0, 0.1);

 


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

   gsap.to(camera, {
                        duration: 3,
                        zoom: 4,

                        onUpdate: function () {
                            camera.updateProjectionMatrix();
                            controls.enabled = true;
                        },
                    });
 
    fraction = 0;

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


  pointsPath = new THREE.CurvePath();


  const bezierLine = new THREE.CubicBezierCurve3(
    
    //originals
	new THREE.Vector3(  1,   0, -1 ),
	new THREE.Vector3(  1, 0,  1 ),
	new THREE.Vector3( -1,   0,  1 ),
	new THREE.Vector3( -1, 0, -1 ),
    //
    
  
);
  

  
  
    pointsPath.add(bezierLine);
  
 
 const material = new THREE.MeshNormalMaterial();
  const coneGeom = new THREE.ConeGeometry(1, 2, 10);
  coneGeom.translate(0, 2.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);
 


     
             
           new RGBELoader().setDataType(THREE.UnsignedByteType).load("https://jokertattoo.co.uk/game-lesson-1/game-lesson-1/royal_esplanade_1k.hdr", function (texture) {
                    var envMap = pmremGenerator.fromEquirectangular(texture).texture;
                    scene.environment = envMap;

                    texture.dispose();
                    pmremGenerator.dispose();
                    var roughnessMipmapper = new RoughnessMipmapper(renderer);
                    var loaderGB = new GLTFLoader();

           

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://jokertattoo.co.uk/tttt/three.js-master/examples/js/libs/draco/');

loaderGB.setDRACOLoader(dracoLoader);
                        loaderGB.load("https://jokertattoo.co.uk/heroo.glb", function (gltf5) {
                             char = gltf5.scene;
                        gltfC5 = gltf5;
                        gltf5.scene.traverse(function (child4) {
                            if (child4.isMesh) {
                                
                                roughnessMipmapper.generateMipmaps(child4.material);
								
                            }
                        });

                       gltf5.scene.scale.set(0.0027, 0.0027, 0.0027);

                        gltf5.scene.position.set(-0.5, -0.63, -2);
                         
                        scene.add(char);
                        roughnessMipmapper.dispose();
   mixer4 = new THREE.AnimationMixer(char);
                            action6 = mixer4.clipAction(gltfC5.animations[3]);
                            action6.play();

                            //Load End



                
            });
		        
                   
                  
                  
                  });       
             

   
   
   
  






  
    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.maxDistance = 10;
				controls.enabled = false;

            }


function animate() {
    fraction +=0.002;
   if (fraction > 1) {
      fraction = 0;
    }  
  console.log(fraction);
    newPosition = pointsPath.getPoint(fraction);
    tangent = pointsPath.getTangent(fraction);
    char.position.copy(newPosition);
    axis.crossVectors( up, tangent ).normalize();
    
     radians = Math.acos( up.dot( tangent ) );
    
    char.quaternion.setFromAxisAngle( axis, radians );
    
     controls.update();
           TWEEN.update();
                 time = Date.now() * 0.0000065;


               
                var delta = clock.getDelta();
                if (mixer) mixer.update(delta);
                if (mixer3) mixer3.update(delta);
                if (mixer2) mixer2.update(delta);
                if (mixer4) mixer4.update(delta);
                if (mixer6) mixer6.update(delta);

                if (mixer7) mixer7.update(delta);
                if (mixer8) mixer8.update(delta);
                    requestAnimationFrame(animate);
   renderer.render(scene, camera);
  
};