From 7aa184d385cbe056692c42189370a1cc8a028b2a Mon Sep 17 00:00:00 2001 From: Daniel Jones <104509116+DanielReddJones@users.noreply.github.com> Date: Thu, 12 Sep 2024 10:55:25 -0500 Subject: [PATCH] Made a lot of progress on the animation. Uploading to save mywork --- attributes.html | 13 +++++++++++++ index.html | 20 +++---------------- main.js | 49 ++++++++++++++++++++++++++++++++++++----------- package-lock.json | 8 ++++---- package.json | 2 +- 5 files changed, 59 insertions(+), 33 deletions(-) create mode 100644 attributes.html diff --git a/attributes.html b/attributes.html new file mode 100644 index 0000000..5f984d4 --- /dev/null +++ b/attributes.html @@ -0,0 +1,13 @@ +
+

+ Marbel texture image by kues1 on Freepik +
+ +
+ "Galaxy background from " rawpixel.com +
+ "Business Male_4_ Low Poly Style" (https://skfb.ly/oXUGL) by POLYTRICITY is licensed under Creative Commons Attribution. +
+ "Hand-painted Low Poly Computer" (https://skfb.ly/oPpXJ) by NoodleBaguette is licensed under Creative Commons Attribution. +

+
\ No newline at end of file diff --git a/index.html b/index.html index 88bdde7..622378a 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,8 @@
About - Projects - Experience +
Projects
+
Experience
Education Blog
@@ -116,21 +116,7 @@
- + diff --git a/main.js b/main.js index 086c6f3..2c2a136 100644 --- a/main.js +++ b/main.js @@ -2,7 +2,7 @@ Author: Daniel Jones IDE: Webstorm Browsers tested: Firefox 125 -Last change: 09/5/24 +Last change: 09/12/24 purpose: portfolio website to show to potential freelance customers/web developer positions */ @@ -20,7 +20,7 @@ const scene = new THREE.Scene(); -const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); +const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas: document.querySelector('#bg'), @@ -39,14 +39,14 @@ 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 = 250; - gltfScene.scene.position.y = 15; - gltfScene.scene.scale.set(10,10,10); - + gltfScene.scene.position.z = 200; + gltfScene.scene.position.y = cmpYPos; + gltfScene.scene.scale.set(15,15,15); scene.add(loadedCmpModel.scene); } @@ -68,13 +68,13 @@ SchlLoader.load('./assets/models/school/Schoolhouse.glb',(gltfScene)=>{ - +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 = 50; - gltfScene.scene.position.y = 5; + gltfScene.scene.position.z = 100; + gltfScene.scene.position.y = manYPos; gltfScene.scene.scale.set(10,10,10); scene.add(loadedManModel.scene); @@ -115,21 +115,48 @@ floor.rotateX(Math.PI * -0.5); scene.add(floor); -//when the user scrolls, walk down the hallway. +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(); diff --git a/package-lock.json b/package-lock.json index 43646a8..944c77d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "three": "^0.161.0" }, "devDependencies": { - "vite": "^5.4.3" + "vite": "^5.4.4" } }, "node_modules/@esbuild/aix-ppc64": { @@ -750,9 +750,9 @@ "integrity": "sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw==" }, "node_modules/vite": { - "version": "5.4.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz", - "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==", + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.4.tgz", + "integrity": "sha512-RHFCkULitycHVTtelJ6jQLd+KSAAzOgEYorV32R2q++M6COBjKJR6BxqClwp5sf0XaBDjVMuJ9wnNfyAJwjMkA==", "dev": true, "dependencies": { "esbuild": "^0.21.3", diff --git a/package.json b/package.json index 86d6225..274adc1 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "preview": "vite preview" }, "devDependencies": { - "vite": "^5.4.3" + "vite": "^5.4.4" }, "dependencies": { "three": "^0.161.0"