<link href="https://ui-unicorn.co.uk/sherwooddungeon/css/main.dda0179f764f2e1173c2c5a2f159395a.css" rel="stylesheet">
</head>

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


	<div class="touchsc" style="display:none;position:absolute;top:0;left:0;right:0;width:100vw;height:100vh;z-index:5;"></div>


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




	<script type="module" defer>
import * as THREE from 'https://ui-unicorn.co.uk/sherwooddungeon/js/three.module.js';
import TWEEN from 'https://ui-unicorn.co.uk/sherwooddungeon/js/tween.esm.js';

import {
    RGBELoader
}
from 'https://ui-unicorn.co.uk/sherwooddungeon/js/RGBELoader.js';
import {
    OrbitControls
}
from 'https://ui-unicorn.co.uk/sherwooddungeon/js/OrbitControls.js';
import {
    GLTFLoader
}
from 'https://ui-unicorn.co.uk/sherwooddungeon/js/GLTFLoader.js';
import {
    RoughnessMipmapper
}
from 'https://ui-unicorn.co.uk/sherwooddungeon/js/RoughnessMipmapper.js';
var container, controls;
var camera, scene, renderergl, mixer, clock;
var raycaster, mouse;

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(-10, 90, 8.7);
    scene = new THREE.Scene();
    clock = new THREE.Clock();
    raycaster = new THREE.Raycaster();
    mouse = new THREE.Vector2();
    new RGBELoader().setDataType(THREE.UnsignedByteType).load('https://ui-unicorn.co.uk/sherwooddungeon/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();
        loader.load('https://ui-unicorn.co.uk/sherwooddungeon/untitled.gltf', function(gltf) {
            gltf.scene.traverse(function(child) {
                if (child.isMesh) {
                    roughnessMipmapper.generateMipmaps(child.material);
                }
            });
            gltf.scene.scale.set(.030, .030, .030);
            gltf.scene.position.set(0, -4, 0);
            gltf.scene.rotation.set(0, -70, 0);
            scene.add(gltf.scene);
            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.8;
    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);
    controls.enableKeys = false;
    controls.target.set(0, -0.5, 0);
    controls.enableZoom = false;
    controls.enableDamping = true;
    controls.maxPolarAngle = 1.9;
    controls.minPolarAngle = 1.3;
    controls.dampingFactor = 0.095;
    controls.rotateSpeed = 0.35;
    controls.minDistance = 2;
    controls.maxDistance = 10;
    controls.update();
    window.addEventListener('resize', onWindowResize, false);
    renderergl.domElement.addEventListener('click', onClick, false);
}

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

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);

    if (intersects.length > 0) {
        console.log("position");
        console.log(camera.position);
        console.log("rotation");
        console.log(camera.rotation);

        controls.enabled = false;
        var duration = 2500;
        var position = new THREE.Vector3().copy(camera.position);
        var targetPosition = new THREE.Vector3(0, -4, 0);

        var tween = new TWEEN.Tween(position)
            .to(targetPosition, duration)
            .easing(TWEEN.Easing.Linear.None)
            .onUpdate(function() {
                camera.position.copy(position);

            })
            .onComplete(function() {
                camera.position.copy(targetPosition);

                controls.enabled = true;
            })
            .start();
        controls.target.set(0, .5, 0);




        var clickedID = intersects[0].object.uuid;
        var clickedName = intersects[0].object.name;
        console.log('You clicked: ' + clickedName);
        console.log('UUID: ' + clickedID);
    }

}

function animate() {

    TWEEN.update();
    requestAnimationFrame(animate);

    var delta = clock.getDelta();
    if (mixer) mixer.update(delta);
    renderergl.render(scene, camera);
    controls.update();
    testa();
}
var previousImgFileSize;
var data_urli = renderergl.domElement.toDataURL();
var headi = 'data:image/png;base64,';
var imgFileSizei = Math.round((data_urli.length));
previousImgFileSize = imgFileSizei;
console.log(previousImgFileSize);
var previousImgFileSize;
var data_urli = renderergl.domElement.toDataURL();
var imgFileSizei = Math.round((data_urli.length));
previousImgFileSize = imgFileSizei;
console.log(previousImgFileSize);
var data_url;
var imgFileSize;
var logit;

function testa() {
    data_url = renderergl.domElement.toDataURL();
    imgFileSize = Math.round((data_url.length));
}
$('.talent').hide();
$('.case-studies').hide();
$('.nwr').hide();
$('.footer').hide();
var glLoader = setInterval(glLoaderTime, 1000);

function glLoaderTime() {
    var imgFileSizeCh = imgFileSize;
    var previmg = previousImgFileSize;
    if (imgFileSizeCh > previmg) {
        $('html').removeClass('noScroll');
        $('html').addClass('scrollable');
        $('.loading-screen').fadeOut(2500);
        $('.experience-div').fadeIn(2500);
        $('.about').hide().delay(1000).fadeIn(1500);
        $('.talent').delay(1100).show(0);
        $('.case-studies').delay(1100).show(0);
        $('.nwr').delay(1100).show(0);
        $('.footer').delay(1100).show(0);
        clearInterval(glLoader);
    }
}

	</script>


</body>

</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.