<!DOCTYPE html>
<html class="noScroll">

<head>
	<meta charset="UTF-8">


	<link rel="stylesheet" type="text/css" href="https://ui-unicorn.co.uk/hostinger-exp/css/base.css" />
</head>

<body class="loading demo-1">
	<div class="loading-screen" data-section-theme="light">
		<div class="loading-animation">
			<div class="loading-bar"></div>
		</div>
	</div>

 
 


<div class="hotspot__positioner--01 hotspot1">
  <div class="hotspot__container">
    <div class="hotspot hotspot--01"></div>
    <div class="hotspot hotspot--02"></div>
    <div class="hotspot hotspot--03"></div>
  
  </div>
</div>





	<script src="https://ui-unicorn.co.uk/game-lesson-1/js/jquery-3.4.1.min.js"></script>


</body>

</html>

	import * as THREE from "https://ui-unicorn.co.uk/js/three.module.js";
import TWEEN from "https://ui-unicorn.co.uk/js/tween.esm.js";
import { RGBELoader } from "https://ui-unicorn.co.uk/js/RGBELoader.js";
import { OrbitControls } from "https://ui-unicorn.co.uk/js/OrbitControls.js";
import { GLTFLoader } from "https://ui-unicorn.co.uk/js/GLTFLoader.js";
import { RoughnessMipmapper } from "https://ui-unicorn.co.uk/js/RoughnessMipmapper.js";
var container, controls;
	var camera, scene, renderergl, mixer, mixer2, clock, clock2,  labelRenderer;
var raycaster, mouse, tween;
var model, model2;
 var cube, cube2, cube3, cube4, cube5, character, Characterm, score, gltfPlayer, isZoomed;
 var action;
init();
animate();
function init() {
    container = document.createElement("div");
    container.className = "experience-div";
    $("body").prepend(container);
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0,0,0);
    scene = new THREE.Scene();
    clock = new THREE.Clock();
    clock2 = new THREE.Clock();
    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();
   isZoomed = 0;
  score = 0;



        new RGBELoader().setDataType(THREE.UnsignedByteType).load('https://ui-unicorn.co.uk/images/royal_esplanade_1k.hdr', function(texture) {
	        var envMap = pmremGenerator.fromEquirectangular(texture).texture;
	        scene.environment = envMap;
	       
	        texture.dispose();
	        pmremGenerator.dispose();
	        var roughnessMipmapper = new RoughnessMipmapper(renderergl);
        var loader = new GLTFLoader();
        
         //Load New

        loader.load('https://ui-unicorn.co.uk/game-lesson-1/scene2.glb', function(gltf2) {
            model2 = gltf2.scene;
            gltfPlayer = gltf2;
            gltf2.scene.traverse(function(child) {
                if (child.isMesh) {
                    roughnessMipmapper.generateMipmaps(child.material);
                }
            });
            
           

            gltf2.scene.scale.set(.0015, .0015, .0015);
            gltf2.scene.position.set(0.05, -0.6, 0.4);
            gltf2.scene.rotation.set(0, 3, 0);

            mixer2 = new THREE.AnimationMixer(model2);
            action = mixer2.clipAction(gltf2.animations[0]);
            action.play();

            scene.add(model2);
            roughnessMipmapper.dispose();




        });

        //Load End

        loader.load("https://ui-unicorn.co.uk/game-lesson-1/untitled.glb", function (gltf) {
            model = gltf.scene;
            gltf.scene.traverse(function (child) {
                if (child.isMesh) {
                     roughnessMipmapper.generateMipmaps(child.material);
                    scene.background = new THREE.Color( 0xf5dad8 );
                    $(".loading-screen").fadeOut(2500);
                    $(".logo-load").fadeTo(200, 0.0);
                    $(".experience-div").fadeIn(2500);
        
                   
                }
            });
            gltf.scene.scale.set(0.008, 0.008, 0.008);
            gltf.scene.position.set(0.2, -0.8, -1.5);
            gltf.scene.rotation.set(0, 1.0, 0);
            scene.add(model);
           roughnessMipmapper.dispose();
             mixer = new THREE.AnimationMixer(gltf.scene);
	            gltf.animations.forEach((clip) => {
	                mixer.clipAction(clip).play();
	            });
        });
        
        
        
        });
 
    renderergl = new THREE.WebGLRenderer({ antialias: true });
    renderergl.setPixelRatio(window.devicePixelRatio);
    renderergl.setSize(window.innerWidth, window.innerHeight);
    	    renderergl.toneMapping = THREE.ACESFilmicToneMapping;
	    renderergl.toneMappingExposure = 0.4;
	    renderergl.outputEncoding = THREE.sRGBEncoding;
	  
    
    container.appendChild(renderergl.domElement);
    $(".experience-div canvas").attr("id", "canvas");
    var pmremGenerator = new THREE.PMREMGenerator(renderergl);
    pmremGenerator.compileEquirectangularShader();
    controls = new OrbitControls(camera, renderergl.domElement);
    
    // Character Boxed
    
      var geometry = new THREE.BoxGeometry( .25, .35, .25 );
      
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00,transparent:!0,opacity:0.7} );
cube2 = new THREE.Mesh( geometry, material );
cube2.position.set(0.9,-0.6,-1.4);
  
  cube2.name='CharacterTwo';
scene.add( cube2 );

    controls.enableKeys = false;
  controls.target.set(0, 0, 0);
    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;
  
    
    
    
   
    
    
    window.addEventListener("resize", onWindowResize, false);
    renderergl.domElement.addEventListener("click", onClick, false);
	
}

	

function onClick() {
   
 
  
  
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children, true);
    
    Characterm = scene.getObjectByName("Playa");
    console.log(Characterm);
   
            
    if (intersects.length > 0) {
	                 
        if (intersects[0].object.name == 'CharacterTwo') {
		
	 if (intersects[0].object.name == 'CharacterTwo') {
            controls.enabled = false;
               isZoomed = 1;
            
             if(Characterm.position.x === 0 && Characterm.position.z === 0)
            
            {   
            TWEEN.removeAll();
                tween = new TWEEN.Tween(Characterm.position).to({x: 120, z: 800 }, 2000 ).onComplete(function() {
       Characterm.position.z = 800;
        Characterm.position.x = 120;
        
          tween = new TWEEN.Tween(Characterm.rotation).to({y: 4.5 }, 0 ).onComplete(function() {
       Characterm.rotation.y = 4.5;
       
          tween = new TWEEN.Tween(Characterm.position).to({x: -400 }, 2000 ).onComplete(function() {
       Characterm.position.x = -400;
       
        tween = new TWEEN.Tween(Characterm.rotation).to({y: 0 }, 0 ).onComplete(function() {
       Characterm.rotation.y = 0;
	   
	    tween = new TWEEN.Tween(Characterm.position).to({z: 900 }, 300 ).onComplete(function() {
       Characterm.position.z = 900;
        Characterm.position.x = -400;
      
        	                 
       
        var tweenDuration=2000;

        function panCam(xTarget,yTarget,zTarget,tweenDuration){

         
        
        
        
          var camNewPosition= { x : 1, y : -0.4, z : -1.65};
          var targetNewPos = {x : 1, y : -0.4, z : -1.65};

          var camTween = new TWEEN.Tween(camera.position).to(camNewPosition, tweenDuration).easing(TWEEN.Easing.Quadratic.Out)
           .onComplete(function() {
               camera.position.copy(camNewPosition);
           
            })
          .start();
          var targetTween = new TWEEN.Tween(controls.target).to(targetNewPos, tweenDuration).easing(TWEEN.Easing.Quadratic.Out)
            .onComplete(function() {
                controls.target.copy(targetNewPos);
                isZoomed = 1;
                  
            })
          .start();
          
    }

  
	panCam(1,-0.4,-1.65,800);
    }).start();
                }).start();
                }).start();
            }).start();
			 }).start();
                    
            
            
            
            

	// backup original rotation
var startRotation = new THREE.Euler().copy( camera.rotation );

// final rotation (with lookAt)
camera.lookAt( controls.object.position );
var endRotation = new THREE.Euler().copy( camera.rotation );

// revert to original rotation
camera.rotation.copy( startRotation );

// Tween
new TWEEN.Tween(camera.rotation).to({x: endRotation.x, y: endRotation.y, z: endRotation.z}, 600).start()
  
	
}
}
}
}
}
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderergl.setSize(window.innerWidth, window.innerHeight);
}


function animate() {
    TWEEN.update();
     var delta2 = clock2.getDelta();
     var delta = clock.getDelta();
	    if (mixer) mixer.update(delta);
	     if (mixer2) mixer2.update(delta2);
    controls.update();
    requestAnimationFrame(animate);
    renderergl.render(scene, camera);
}



$(document).on('click touchstart tap', '.hotspot1', function() {
  Characterm.position.x = 0;
  Characterm.position.y = 0;
  Characterm.position.z = 0;
controls.enabled = false;
   var tweenDuration=2000;
        function panCam(xTarget,yTarget,zTarget,tweenDuration){
        
         
         var camNewPosition= { x : 0, y : 0, z : 0};
          var targetNewPos = {x : 0, y : 0, z : 0};

          var camTween = new TWEEN.Tween(camera.position).to(camNewPosition, tweenDuration).easing(TWEEN.Easing.Quadratic.In)
           .onComplete(function() {
               camera.position.copy(camNewPosition);
           
            })
          .start();
          var targetTween = new TWEEN.Tween(controls.target).to(targetNewPos, tweenDuration).easing(TWEEN.Easing.Quadratic.In)
            .onComplete(function() {
                controls.target.copy(targetNewPos);
               isZoomed = 0;
                   controls.enabled = true;
            })
          .start();
          
    }

  
	panCam(0,0,0,1000);
	
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.