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

This commit is contained in:
Daniel Jones 2024-09-12 10:55:25 -05:00
parent d617a26a8f
commit 7aa184d385
5 changed files with 59 additions and 33 deletions

13
attributes.html Normal file
View File

@ -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>

View File

@ -17,8 +17,8 @@
<div id="div1" class="page-wrapper"> <div id="div1" class="page-wrapper">
<div class="navbar"> <div class="navbar">
<a href="#description">About</a> <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="#school">Education</a>
<a href="https://whoisthisjoker.com">Blog</a> <a href="https://whoisthisjoker.com">Blog</a>
</div> </div>
@ -116,21 +116,7 @@
</div> </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> <script type="module" src="/main.js"></script>
</div> </div>
</body> </body>

49
main.js
View File

@ -2,7 +2,7 @@
Author: Daniel Jones Author: Daniel Jones
IDE: Webstorm IDE: Webstorm
Browsers tested: Firefox 125 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 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({ const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#bg'), canvas: document.querySelector('#bg'),
@ -39,14 +39,14 @@ renderer.render(scene, camera);
//code to import GLTF file //code to import GLTF file
let loadedCmpModel; // model for PC let loadedCmpModel; // model for PC
let cmpYPos = -150;
const cmpLoader = new GLTFLoader(); const cmpLoader = new GLTFLoader();
cmpLoader.load('./assets/models/Comp_and_Floppy/scene.gltf',(gltfScene)=>{ cmpLoader.load('./assets/models/Comp_and_Floppy/scene.gltf',(gltfScene)=>{
loadedCmpModel = gltfScene; loadedCmpModel = gltfScene;
console.log("UwU whats this? My computer model loaded! OwO"); 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); scene.add(loadedCmpModel.scene);
} }
@ -68,13 +68,13 @@ SchlLoader.load('./assets/models/school/Schoolhouse.glb',(gltfScene)=>{
let manYPos = -300;
let loadedManModel; // model for PC let loadedManModel; // model for PC
const ManLoader = new GLTFLoader(); const ManLoader = new GLTFLoader();
ManLoader.load('./assets/models/businessman/scene.gltf',(gltfScene)=>{ ManLoader.load('./assets/models/businessman/scene.gltf',(gltfScene)=>{
loadedManModel = 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); gltfScene.scene.scale.set(10,10,10);
scene.add(loadedManModel.scene); scene.add(loadedManModel.scene);
@ -115,21 +115,48 @@ floor.rotateX(Math.PI * -0.5);
scene.add(floor); 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){ function updateCamera(ev){
let div1 = document.getElementById("div1"); let div1 = document.getElementById("div1");
camera.position.z = zPos - window.scrollY / 3; 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); window.addEventListener("scroll", updateCamera);
//animation loop every cycle. //animation loop every cycle.
function animate(){ function animate(){
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
requestAnimationFrame(animate); requestAnimationFrame(animate);
renderer.render(scene, camera); renderer.render(scene, camera);
loadedCmpModel.scene.rotation.y += 0.01;
loadedSchlModel.scene.rotation.y += 0.01;
loadedManModel.scene.rotation.y += 0.01;
} }
animate(); animate();

8
package-lock.json generated
View File

@ -11,7 +11,7 @@
"three": "^0.161.0" "three": "^0.161.0"
}, },
"devDependencies": { "devDependencies": {
"vite": "^5.4.3" "vite": "^5.4.4"
} }
}, },
"node_modules/@esbuild/aix-ppc64": { "node_modules/@esbuild/aix-ppc64": {
@ -750,9 +750,9 @@
"integrity": "sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw==" "integrity": "sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw=="
}, },
"node_modules/vite": { "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, "dev": true,
"dependencies": { "dependencies": {
"esbuild": "^0.21.3", "esbuild": "^0.21.3",

View File

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