/*
Author: Daniel Jones
IDE: Webstorm
Browsers tested: Firefox 125
Last change: 09/12/24
purpose: portfolio website to show to potential freelance customers/web developer positions
*/


import { PointLight } from 'three';
import './style.css';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/Addons.js';



const scene = new THREE.Scene();




const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
var zPos = 500;
camera.position.setZ(zPos);
camera.position.setY(20);

renderer.render(scene, camera);




//code to import GLTF file
let loadedCmpModel; // model for PC
let cmpYPos = -150; 
const cmpLoader = new GLTFLoader();
cmpLoader.load('./assets/models/Comp_and_Floppy/scene.gltf',(gltfScene)=>{
    loadedCmpModel = gltfScene;
    console.log("UwU whats this? My computer model loaded! OwO");
    gltfScene.scene.position.z = 200;
    gltfScene.scene.position.y = cmpYPos;
    gltfScene.scene.scale.set(15,15,15);
    scene.add(loadedCmpModel.scene);
   
}
);

let loadedSchlModel; // model for PC
const SchlLoader = new GLTFLoader();
SchlLoader.load('./assets/models/school/Schoolhouse.glb',(gltfScene)=>{
    loadedSchlModel = gltfScene;
    gltfScene.scene.position.z = 50;
    gltfScene.scene.position.y = 5;
    gltfScene.scene.scale.set(3,3,3);
    
    scene.add(loadedSchlModel.scene);
   
}
);




let manYPos = -300;
let loadedManModel; // model for PC
const ManLoader = new GLTFLoader();
ManLoader.load('./assets/models/businessman/scene.gltf',(gltfScene)=>{
    loadedManModel = gltfScene;
    gltfScene.scene.position.z = 100;
    gltfScene.scene.position.y = manYPos;
    gltfScene.scene.scale.set(10,10,10);
    
    scene.add(loadedManModel.scene);
   
}
);



const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);





//background texture
const spaceTexture = new THREE.TextureLoader().load('./assets/pics/galaxy.jpg');
spaceTexture.minFilter = THREE.LinearFilter;
scene.background = spaceTexture;

//turning off orbit controls and lighthelper. Not needed. Kept in code in case if I want to use it again.
//const lightHelper = new THREE.PointLightHelper(pointLight);
//const controls = new OrbitControls(camera, renderer.domElement);


//floor object that appears in the background
const floorTexture = new THREE.TextureLoader().load("./assets/pics/marble.jpg");
floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.repeat.set(1, 100);
const floorGeometry = new THREE.PlaneGeometry(100, 10000, 1000, 1000);
const floorMaterial = new THREE.MeshStandardMaterial({
    map: floorTexture,
})
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotateX(Math.PI * -0.5);
scene.add(floor);


var projElement = document.getElementById('projects');
projElement.addEventListener('click', moveCmp);

function moveCmp(){
    loadedCmpModel.scene.position.y = 13;
}


//when the user scrolls, walk down the hallway, show items.
function updateCamera(ev){

    let div1 = document.getElementById("div1");
    camera.position.z = zPos - window.scrollY / 3;
    if(loadedCmpModel.scene.position.y < 13){
    loadedCmpModel.scene.position.y = cmpYPos + window.scrollY / 3.2;
    }
    

    if(loadedManModel.scene.position.y < 13){
        loadedManModel.scene.position.y = manYPos + window.scrollY / 3.2;
        }
    loadedCmpModel.scene.rotation.y += 0.1;
    loadedManModel.scene.rotation.y += 0.1;
    
}




window.addEventListener("scroll", updateCamera);



//animation loop every cycle.
function animate(){

    renderer.setSize(window.innerWidth, window.innerHeight);
    
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    loadedCmpModel.scene.rotation.y += 0.01;
    loadedSchlModel.scene.rotation.y += 0.01;
    loadedManModel.scene.rotation.y += 0.01;
}
animate();