Made a lot of progress on the animation. Uploading to save mywork
This commit is contained in:
Daniel Jones
parent
d617a26a8f
commit
7aa184d385
13
attributes.html
Normal file
13
attributes.html
Normal 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>
|
||||
20
index.html
20
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>
|
||||
<a href="#jobs">Experience</a>
|
||||
<div class="projects"><a href="#projects">Projects</a></div>
|
||||
<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>
|
||||
<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>
|
||||
<footer><a href="attributes.html">attributes</a></footer>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
49
main.js
49
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();
|
||||
|
||||
8
package-lock.json
generated
8
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^5.4.3"
|
||||
"vite": "^5.4.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"three": "^0.161.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user