Made a lot of progress on the animation. Uploading to save mywork

attributes.html

@@ -0,0 +1,13 @@
+<div id="attribution">
+    <p>
+      <a href="https://www.freepik.com/free-photo/rough-checked-texture-collage_1037604.htm#fromView=search&page=1&position=1&uuid=ff4bc441-a0b5-4005-82df-caa3f1df883c">Marbel texture image by kues1 on Freepik</a>
+      <br>
+      
+      <br>
+      "Galaxy background from " <a href="https://www.rawpixel.com/image/5924106/photo-image-public-domain-stars-galaxy">rawpixel.com</a>
+      <br>
+      "Business Male_4_ Low Poly Style" (<a href="https//skfb.ly/oXUGL">https://skfb.ly/oXUGL</a>) by POLYTRICITY is licensed under <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution.</a>
+      <br>
+      "Hand-painted Low Poly Computer" (<a href="https://skfb.ly/oPpXJ">https://skfb.ly/oPpXJ</a>) by NoodleBaguette is licensed under <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution</a>.
+    </p>
+  </div>

index.html

@@ -17,8 +17,8 @@
 <div id="div1" class="page-wrapper">
   <div class="navbar">
     <a href="#description">About</a>
-    <a href="#projects">Projects</a>
+    <div class="projects"><a href="#projects">Projects</a></div>
-    <a href="#jobs">Experience</a>
+    <div class="jobs"><a href="#jobs">Experience</a></div>
     <a href="#school">Education</a>
     <a href="https://whoisthisjoker.com">Blog</a>
   </div>
@@ -116,21 +116,7 @@
 
   </div>
 
-<footer>
+<footer><a href="attributes.html">attributes</a></footer>
-<div id="attribution">
-  <p>
-    <a href="https://www.freepik.com/free-photo/rough-checked-texture-collage_1037604.htm#fromView=search&page=1&position=1&uuid=ff4bc441-a0b5-4005-82df-caa3f1df883c">Marbel texture image by kues1 on Freepik</a>
-    <br>
-    
-    <br>
-    "Galaxy background from " <a href="https://www.rawpixel.com/image/5924106/photo-image-public-domain-stars-galaxy">rawpixel.com</a>
-    <br>
-    "Business Male_4_ Low Poly Style" (<a href="https//skfb.ly/oXUGL">https://skfb.ly/oXUGL</a>) by POLYTRICITY is licensed under <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution.</a>
-    <br>
-    "Hand-painted Low Poly Computer" (<a href="https://skfb.ly/oPpXJ">https://skfb.ly/oPpXJ</a>) by NoodleBaguette is licensed under <a href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution</a>.
-  </p>
-</div>
-</footer>
     <script type="module" src="/main.js"></script>
   </div>
   </body>

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.z = 200;
-    gltfScene.scene.position.y = 15;
+    gltfScene.scene.position.y = cmpYPos;
-    gltfScene.scene.scale.set(10,10,10);
+    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.z = 100;
-    gltfScene.scene.position.y = 5;
+    gltfScene.scene.position.y = manYPos;
     gltfScene.scene.scale.set(10,10,10);
     
     scene.add(loadedManModel.scene);
@@ -115,12 +115,35 @@ 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);
 
 
@@ -129,7 +152,11 @@ window.addEventListener("scroll", updateCamera);
 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();

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",
+      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.4.tgz",
-      "integrity": "sha512-IH+nl64eq9lJjFqU+/yrRnrHPVTlgy42/+IzbOdaFDVlyLgI/wDlf+FCobXLX1cT0X5+7LMyH1mIy2xJdLfo8Q==",
+      "integrity": "sha512-RHFCkULitycHVTtelJ6jQLd+KSAAzOgEYorV32R2q++M6COBjKJR6BxqClwp5sf0XaBDjVMuJ9wnNfyAJwjMkA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.21.3",

package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.4.3"
+    "vite": "^5.4.4"
   },
   "dependencies": {
     "three": "^0.161.0"