<div class="world">
    <div class="annotation">
    </div>
</div>
<!--<a class="toggle toggle-night"></a><a class="toggle-music"></a>-->
<audio class="world-music" src="https://res.cloudinary.com/liza/video/upload/v1492853426/sheep_qr3tus.m4a"></audio>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="js/three.js"></script>
<script src="js/GLTFLoader.js" type="module"></script>

<script src="js/orbitcontrols.js"></script>
<script src="js/simplex_noise.min.js"></script>



<script type="module">
import TWEEN from './js/tween.js';

import {
    GLTFLoader
} from './js/GLTFLoader.js';
'use strict';

var raycaster = new THREE.Raycaster(); // Needed for object intersection
var mouse = new THREE.Vector2();
const annotation = document.querySelector(".annotation");
let objects = [];
let mainobj, sprite;
let spriteBehindObject;
let skybox;

let scene,
    cubes,
    cube,
    group,
    camera,
    renderer,
    controls,
    mouseDown,
    world,
    night = false;

let sheep,
    cloud,
    sphere,
    sky;

let width = window.innerWidth,
    height = window.innerHeight;


let mouseX = 0;
let mouseY = 0;

function init() {


    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.lookAt(scene.position);
    camera.position.set(-1300, 1300, 15);
    camera.zoom = 1;

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;


    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.autoRotate = false;
    controls.autoRotateSpeed = 4;
    controls.maxDistance = 15;
    controls.minDistance = 10;
    controls.enablePan = false;

    controls.update();

    group = new THREE.Group();

    var loader = new GLTFLoader();



    const boxWidth = 1;
    const boxHeight = 1;
    const boxDepth = 1;
    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
    const labelContainerElem = document.querySelector('.annotation');


    function makeInstance(geometry, color, x, y, z, html) {

        const material = new THREE.MeshPhongMaterial({
            color,
            opacity: 0,
            transparent: true
        });

        const cube = new THREE.Mesh(geometry, material);

        group.add(cube);


        cube.position.x = x;
        cube.position.y = y;
        cube.position.z = z;

        const elem = document.createElement('div');


        elem.innerHTML = html;
        labelContainerElem.appendChild(elem);

        return {
            cube,
            elem
        };
    }
    cubes = [
        makeInstance(geometry, "", -3, 6, 2,
            ' <button class="pointBtn zoomIn"><div class="brandLogoRight"><img src="img/logo/logo01.jpg" class="w-100"></div></button>'
        ),
        makeInstance(geometry, "", 1, 6, 2,
            ' <button class="pointBtn zoomIn"><div class="brandLogoRight"><img src="img/logo/logo01.jpg" class="w-100"></div></button>'
        ),
        makeInstance(geometry, "", 4, 6, 2,
            ' <button class="pointBtn zoomIn"><div class="brandLogoRight"><img src="img/logo/logo01.jpg" class="w-100"></div></button>'
        ),
        makeInstance(geometry, "", -3, 6, -3,
            '<button class="pointBtn zoomIn"><div class="brandLogoLeft"><img src="img/logo/logo01.jpg" class="w-100"></div></button>'
        ),
        makeInstance(geometry, "", 1, 6, -3,
            '<button class="pointBtn zoomIn"><div class="brandLogoLeft"><img src="img/logo/logo01.jpg" class="w-100"></div></button>'
        ),
        makeInstance(geometry, "", 4, 6, -3,
            '<button class="pointBtn zoomIn"><div class="brandLogoLeft"><img src="img/logo/logo01.jpg" class="w-100"></div></button>'
        ),
    ];

    loader.load("./modal/shop/test.gltf", function(gltf) {
        mainobj = gltf.scene;
        mainobj.scale.x = 0.05;
        mainobj.scale.y = 0.05;
        mainobj.scale.z = 0.05;
        mainobj.rotation.y = 0;
        mainobj.rotation.x = 0;
        mainobj.rotation.z = 0;
        mainobj.position.y = 0;
        group.add(mainobj);

    });
    scene.add(group);
    // controls = new THREE.OrbitControls(camera, renderer.domElement);
    // controls.enableZoom = false;

    drawbackground();
    addLights();



    world = document.querySelector('.world');
    world.appendChild(renderer.domElement);

    document.addEventListener('mousedown', onMouseDown);
    document.addEventListener('mouseup', onMouseUp);
    document.addEventListener('touchstart', onTouchStart);
    document.addEventListener('touchend', onTouchEnd);
    window.addEventListener('resize', onResize);

    document.addEventListener('mousemove', onMouseMove, false);
    document.addEventListener('click', onDocumentMouseDown, false);

}



function animateParticles(event) {
    mouseX = event.clientX
    mouseY = event.clientY
}
//light 
function addLights() {
    const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
    scene.add(light);

    const directLight1 = new THREE.DirectionalLight(0xffd798, 1);
    directLight1.castShadow = true;
    directLight1.position.set(9.5, 8.2, 8.3);
    scene.add(directLight1);

    const pointlight = new THREE.PointLight(0xffffff, 2, 30);

    pointlight.castShadow = true;
    pointlight.position.set(10, 5, 1);
    scene.add(pointlight);


    const directLight2 = new THREE.DirectionalLight(0xc9ceff, 0.8);
    directLight2.castShadow = true;
    directLight2.position.set(-15.8, 5.2, 8);
    scene.add(directLight2);


    directLight1.position.set(20, 30, 10);
    directLight1.castShadow = true;
    directLight1.shadow.camera.top = 20;

}

//sky box
function drawbackground() {
    let materialArray = [];
    let texture_ft = new THREE.TextureLoader().load('img/skybox/harmony_ft.jpg');

    let texture_bk = new THREE.TextureLoader().load('img/skybox/harmony_bk.jpg');
    let texture_up = new THREE.TextureLoader().load('img/skybox/harmony_up.jpg');
    let texture_dn = new THREE.TextureLoader().load('img/skybox/harmony_dn.jpg');
    let texture_rt = new THREE.TextureLoader().load('img/skybox/harmony_rt.jpg');

    let texture_lt = new THREE.TextureLoader().load('img/skybox/harmony_lf.jpg');


    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_ft
    }));
    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_bk
    }));
    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_up
    }));
    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_dn
    }));
    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_rt
    }));
    materialArray.push(new THREE.MeshBasicMaterial({
        map: texture_lt
    }));

    for (let i = 0; i < 6; i++)
        materialArray[i].side = THREE.BackSide;
    let skyboxGeo = new THREE.BoxGeometry(1000, 1000, 1000);
    skybox = new THREE.Mesh(skyboxGeo, materialArray);
    scene.add(skybox);


}
//point button position
function onDocumentMouseDown(event) {

    // Welcome to the exciting world of raycasting !
    // First let's get some mouse coordinates:
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    // This is basically converting 2d coordinates to 3d Space:
    raycaster.setFromCamera(mouse, camera);
    // And checking if it intersects with an array object
    var intersects = raycaster.intersectObjects(objects);

    // does your cursor intersect the object on click ? 
    //console.log(intersects.length > 0 ? "yes" : "no");

    // And finally change the color:
    if (intersects.length > 0) {
        let obj = intersects[0].object;


        intersects[0].object.material.color.setHex(Math.random() * 0xffffff);

    }
}
//mouse Move
function onMouseMove(event) {

    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

}



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


function onMouseDown(event) {


    theta = -((event.clientX - onMouseDownPosition.x) * 0.5) +
        onMouseDownTheta;
    phi = ((event.clientY - onMouseDownPosition.y) * 0.5) +
        onMouseDownPhi;

    phi = Math.min(180, Math.max(0, phi));

    camera.position.x = radious * Math.sin(theta * Math.PI / 360) *
        Math.cos(phi * Math.PI / 360);
    camera.position.y = radious * Math.sin(phi * Math.PI / 360);
    camera.position.z = radious * Math.cos(theta * Math.PI / 360) *
        Math.cos(phi * Math.PI / 360);
    camera.updateMatrix();


    mouseDown = true;
}

function onTouchStart(event) {
    // const targetClass = event.target.classList[0];
    //  if (targetClass === 'toggle' || targetClass === 'toggle-music') return;
    event.preventDefault();
    mouseDown = true;
}

function onMouseUp() {
    mouseDown = false;
}

function onTouchEnd(event) {
    // const targetClass = event.target.classList[0];
    //if (targetClass === 'toggle' || targetClass === 'toggle-music') return;
    event.preventDefault();
    mouseDown = false;
}

function rad(degrees) {
    return degrees * (Math.PI / 180);
}

function animate() {
    requestAnimationFrame(animate);
    camera.updateProjectionMatrix();
    TWEEN.update();
    render();
}

function render() {

    updateScreenPosition();
    // updateScreenPosition();
    // mainobj.rotation.y += 0.0009;
    //skybox.rotation.y += 0.0009;


    renderer.render(scene, camera);
}
/*
    function updateScreenPosition() {
        const vector = new THREE.Vector3(1, 1, 1);
        const canvas = renderer.domElement;

        vector.project(camera);

        vector.x = Math.round((0.5 + vector.x / 2) * (canvas.width / window.devicePixelRatio));
        vector.y = Math.round((0.5 - vector.y / 2) * (canvas.height / window.devicePixelRatio));


        console.log(vector.x);
        annotation.style.top = `${mainobj.position.y }px`;
        annotation.style.left = `${mainobj.position.x}px`;
        annotation.style.opacity = spriteBehindObject ? 0.25 : 1;
    }*/
// onclick

$(document).on("click", ".zoomIn", function() {
    // call this to make the model larger/ zoom in

    var zoom = {
        value: camera.zoom
    };
    var zoomEnd = {
        value: 2
    };
    var tween = new TWEEN.Tween(zoom).to(zoomEnd, 600);
    tween.onUpdate(function() {
        camera.zoom = zoom.value;
    });
    tween.start();
    setTimeout(function() {
        $("body").fadeOut();
        window.location.href = "shop.php";


    }, 1000);
    // call this to make it smaller / zoom out
    //zoomModel(false, 4);
});

function updateScreenPosition() {
    const vector = new THREE.Vector3(1, 1, 1);

    const canvas = renderer.domElement;

    vector.project(camera);





    cubes.forEach((cubeInfo, ndx) => {
        const {
            cube,
            elem
        } = cubeInfo;
        const speed = 1 + ndx * .1;
        //   cube.position.x = 10;
        //   cube.position.y += 0.001;

        // get the position of the center of the cube
        cube.updateWorldMatrix(true, false);
        cube.getWorldPosition(vector);

        // get the normalized screen coordinate of that position
        // x and y will be in the -1 to +1 range with x = -1 being
        // on the left and y = -1 being on the bottom
        vector.project(camera);

        // convert the normalized position to CSS coordinates
        const x = (vector.x * .5 + .5) * canvas.clientWidth;
        const y = (vector.y * -.5 + .5) * canvas.clientHeight;

        // move the elem to that position
        elem.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
    });

}
init();
animate();
</script>