danjoredd/3d_website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the Thinker model to website. Untextured as of yet.

Browse Source
This commit is contained in:
Daniel Jones 2024-08-26 10:02:33 -05:00
parent 8f8ba3d2cc
commit c5b7b39efc
15 changed files with 6461 additions and 6246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
.gitignore vendored
View File

@ -1,27 +1,27 @@
# Logs # Logs
logs logs
*.log *.log
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
pnpm-debug.log* pnpm-debug.log*
lerna-debug.log* lerna-debug.log*
node_modules node_modules
dist dist
dist-ssr dist-ssr
*.local *.local
# Editor directories and files # Editor directories and files
.vscode/* .vscode/*
!.vscode/extensions.json !.vscode/extensions.json
.idea .idea
.DS_Store .DS_Store
*.suo *.suo
*.ntvs* *.ntvs*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?
# Thinker Asset cannot legally be added to a public git repo so leaving it out # Thinker Asset cannot legally be added to a public git repo so leaving it out
assets/models/thinker/ assets/models/thinker/

4
README.md
View File

@ -1,3 +1,3 @@
This is a work-in-progress of my portfolio website. It uses three.js, and will be a practical showcase of my programming abilities. This is a work-in-progress of my portfolio website. It uses three.js, and will be a practical showcase of my programming abilities.
My current portfolio page is [here](https://danielreddjones.com), hosted by Hugo. My current portfolio page is [here](https://danielreddjones.com), hosted by Hugo.

20
assets/models/Comp_and_Floppy/license.txt
View File

@ -1,11 +1,11 @@
Model Information: Model Information:
* title: Hand-painted Low Poly Computer * title: Hand-painted Low Poly Computer
* source: https://sketchfab.com/3d-models/hand-painted-low-poly-computer-c4e5d67781ca4bba960673f67a7cef30 * source: https://sketchfab.com/3d-models/hand-painted-low-poly-computer-c4e5d67781ca4bba960673f67a7cef30
* author: NoodleBaguette (https://sketchfab.com/NoodleBaguette) * author: NoodleBaguette (https://sketchfab.com/NoodleBaguette)
Model License: Model License:
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) * license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
* requirements: Author must be credited. Commercial use is allowed. * requirements: Author must be credited. Commercial use is allowed.
If you use this 3D model in your project be sure to copy paste this credit wherever you share it: If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
This work is based on "Hand-painted Low Poly Computer" (https://sketchfab.com/3d-models/hand-painted-low-poly-computer-c4e5d67781ca4bba960673f67a7cef30) by NoodleBaguette (https://sketchfab.com/NoodleBaguette) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) This work is based on "Hand-painted Low Poly Computer" (https://sketchfab.com/3d-models/hand-painted-low-poly-computer-c4e5d67781ca4bba960673f67a7cef30) by NoodleBaguette (https://sketchfab.com/NoodleBaguette) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)

478
assets/models/Comp_and_Floppy/scene.gltf
View File

@ -1,239 +1,239 @@
{ {
"accessors": [ "accessors": [
{ {
"bufferView": 2, "bufferView": 2,
"componentType": 5126, "componentType": 5126,
"count": 2356, "count": 2356,
"max": [ "max": [
88.54320526123047, 88.54320526123047,
92.07904052734375, 92.07904052734375,
44.123756408691406 44.123756408691406
], ],
"min": [ "min": [
-51.08591842651367, -51.08591842651367,
-13.874343872070313, -13.874343872070313,
-87.38624572753906 -87.38624572753906
], ],
"type": "VEC3" "type": "VEC3"
}, },
{ {
"bufferView": 2, "bufferView": 2,
"byteOffset": 28272, "byteOffset": 28272,
"componentType": 5126, "componentType": 5126,
"count": 2356, "count": 2356,
"max": [ "max": [
1.0, 1.0,
1.0, 1.0,
1.0 1.0
], ],
"min": [ "min": [
-1.0, -1.0,
-1.0, -1.0,
-1.0 -1.0
], ],
"type": "VEC3" "type": "VEC3"
}, },
{ {
"bufferView": 1, "bufferView": 1,
"componentType": 5126, "componentType": 5126,
"count": 2356, "count": 2356,
"max": [ "max": [
1.301616907119751, 1.301616907119751,
0.9855207204818726 0.9855207204818726
], ],
"min": [ "min": [
0.027651939541101456, 0.027651939541101456,
0.01626039668917656 0.01626039668917656
], ],
"type": "VEC2" "type": "VEC2"
}, },
{ {
"bufferView": 0, "bufferView": 0,
"componentType": 5125, "componentType": 5125,
"count": 5958, "count": 5958,
"type": "SCALAR" "type": "SCALAR"
} }
], ],
"asset": { "asset": {
"extras": { "extras": {
"author": "NoodleBaguette (https://sketchfab.com/NoodleBaguette)", "author": "NoodleBaguette (https://sketchfab.com/NoodleBaguette)",
"license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)", "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
"source": "https://sketchfab.com/3d-models/hand-painted-low-poly-computer-c4e5d67781ca4bba960673f67a7cef30", "source": "https://sketchfab.com/3d-models/hand-painted-low-poly-computer-c4e5d67781ca4bba960673f67a7cef30",
"title": "Hand-painted Low Poly Computer" "title": "Hand-painted Low Poly Computer"
}, },
"generator": "Sketchfab-15.55.0", "generator": "Sketchfab-15.55.0",
"version": "2.0" "version": "2.0"
}, },
"bufferViews": [ "bufferViews": [
{ {
"buffer": 0, "buffer": 0,
"byteLength": 23832, "byteLength": 23832,
"name": "floatBufferViews", "name": "floatBufferViews",
"target": 34963 "target": 34963
}, },
{ {
"buffer": 0, "buffer": 0,
"byteLength": 18848, "byteLength": 18848,
"byteOffset": 23832, "byteOffset": 23832,
"byteStride": 8, "byteStride": 8,
"name": "floatBufferViews", "name": "floatBufferViews",
"target": 34962 "target": 34962
}, },
{ {
"buffer": 0, "buffer": 0,
"byteLength": 56544, "byteLength": 56544,
"byteOffset": 42680, "byteOffset": 42680,
"byteStride": 12, "byteStride": 12,
"name": "floatBufferViews", "name": "floatBufferViews",
"target": 34962 "target": 34962
} }
], ],
"buffers": [ "buffers": [
{ {
"byteLength": 99224, "byteLength": 99224,
"uri": "scene.bin" "uri": "scene.bin"
} }
], ],
"extensionsUsed": [ "extensionsUsed": [
"KHR_materials_clearcoat" "KHR_materials_clearcoat"
], ],
"images": [ "images": [
{ {
"uri": "textures/lambert2_baseColor.png" "uri": "textures/lambert2_baseColor.png"
}, },
{ {
"uri": "textures/lambert2_metallicRoughness.png" "uri": "textures/lambert2_metallicRoughness.png"
} }
], ],
"materials": [ "materials": [
{ {
"doubleSided": true, "doubleSided": true,
"extensions": { "extensions": {
"KHR_materials_clearcoat": { "KHR_materials_clearcoat": {
"clearcoatFactor": 0.011018971520681035, "clearcoatFactor": 0.011018971520681035,
"clearcoatRoughnessFactor": 0.04 "clearcoatRoughnessFactor": 0.04
} }
}, },
"name": "lambert2", "name": "lambert2",
"pbrMetallicRoughness": { "pbrMetallicRoughness": {
"baseColorTexture": { "baseColorTexture": {
"index": 0 "index": 0
}, },
"metallicFactor": 0.0, "metallicFactor": 0.0,
"metallicRoughnessTexture": { "metallicRoughnessTexture": {
"index": 1 "index": 1
} }
} }
} }
], ],
"meshes": [ "meshes": [
{ {
"name": "Computer_Mesh_lambert2_0", "name": "Computer_Mesh_lambert2_0",
"primitives": [ "primitives": [
{ {
"attributes": { "attributes": {
"NORMAL": 1, "NORMAL": 1,
"POSITION": 0, "POSITION": 0,
"TEXCOORD_0": 2 "TEXCOORD_0": 2
}, },
"indices": 3, "indices": 3,
"material": 0, "material": 0,
"mode": 4 "mode": 4
} }
] ]
} }
], ],
"nodes": [ "nodes": [
{ {
"children": [ "children": [
1 1
], ],
"matrix": [ "matrix": [
1.0, 1.0,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
2.220446049250313e-16, 2.220446049250313e-16,
-1.0, -1.0,
0.0, 0.0,
0.0, 0.0,
1.0, 1.0,
2.220446049250313e-16, 2.220446049250313e-16,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
1.0 1.0
], ],
"name": "Sketchfab_model" "name": "Sketchfab_model"
}, },
{ {
"children": [ "children": [
2 2
], ],
"matrix": [ "matrix": [
0.009999999776482582, 0.009999999776482582,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
0.009999999776482582, 0.009999999776482582,
0.0, 0.0,
0.0, 0.0,
-0.009999999776482582, -0.009999999776482582,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
0.0, 0.0,
1.0 1.0
], ],
"name": "eb23e6cd391c4265aa2408027bb0d982.fbx" "name": "eb23e6cd391c4265aa2408027bb0d982.fbx"
}, },
{ {
"children": [ "children": [
3 3
], ],
"name": "RootNode" "name": "RootNode"
}, },
{ {
"children": [ "children": [
4 4
], ],
"name": "Computer_Mesh" "name": "Computer_Mesh"
}, },
{ {
"mesh": 0, "mesh": 0,
"name": "Computer_Mesh_lambert2_0" "name": "Computer_Mesh_lambert2_0"
} }
], ],
"samplers": [ "samplers": [
{ {
"magFilter": 9729, "magFilter": 9729,
"minFilter": 9987, "minFilter": 9987,
"wrapS": 10497, "wrapS": 10497,
"wrapT": 10497 "wrapT": 10497
} }
], ],
"scene": 0, "scene": 0,
"scenes": [ "scenes": [
{ {
"name": "Sketchfab_Scene", "name": "Sketchfab_Scene",
"nodes": [ "nodes": [
0 0
] ]
} }
], ],
"textures": [ "textures": [
{ {
"sampler": 0, "sampler": 0,
"source": 0 "source": 0
}, },
{ {
"sampler": 0, "sampler": 0,
"source": 1 "source": 1
} }
] ]
} }

20
assets/models/businessman/business_male_4__low_poly_style/license.txt
View File

@ -1,11 +1,11 @@
Model Information: Model Information:
* title: Business Male_4_ Low Poly Style * title: Business Male_4_ Low Poly Style
* source: https://sketchfab.com/3d-models/business-male-4--low-poly-style-5e53bf1cdd264ad08f420e05ee7aa7bf * source: https://sketchfab.com/3d-models/business-male-4--low-poly-style-5e53bf1cdd264ad08f420e05ee7aa7bf
* author: POLYTRICITY (https://sketchfab.com/PolytricityLtd) * author: POLYTRICITY (https://sketchfab.com/PolytricityLtd)
Model License: Model License:
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) * license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
* requirements: Author must be credited. Commercial use is allowed. * requirements: Author must be credited. Commercial use is allowed.
If you use this 3D model in your project be sure to copy paste this credit wherever you share it: If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
This work is based on "Business Male_4_ Low Poly Style" (https://sketchfab.com/3d-models/business-male-4--low-poly-style-5e53bf1cdd264ad08f420e05ee7aa7bf) by POLYTRICITY (https://sketchfab.com/PolytricityLtd) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) This work is based on "Business Male_4_ Low Poly Style" (https://sketchfab.com/3d-models/business-male-4--low-poly-style-5e53bf1cdd264ad08f420e05ee7aa7bf) by POLYTRICITY (https://sketchfab.com/PolytricityLtd) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)

9546
assets/models/businessman/business_male_4__low_poly_style/scene.gltf
View File

File diff suppressed because it is too large Load Diff

8
assets/models/the_thinker_low_poly_stylized/license.txt Normal file
View File

@ -0,0 +1,8 @@
Model Information:
* title: The Thinker Low Poly Stylized
* source: https://sketchfab.com/3d-models/the-thinker-low-poly-stylized-372a76d732ad476e9dcd813e7abe5ba8
* author: Ritordp (https://sketchfab.com/ritordp)
Model License:
* license type: SKETCHFAB Editorial (https://sketchfab.com/licenses)
* requirements: Use only in connection with events that are newsworthy or of public interest

BIN
assets/models/the_thinker_low_poly_stylized/scene.bin Normal file
View File

Binary file not shown.

193
assets/models/the_thinker_low_poly_stylized/scene.gltf Normal file
View File

@ -0,0 +1,193 @@
{
"accessors": [
{
"bufferView": 1,
"componentType": 5126,
"count": 4223,
"max": [
2.5999999046325684,
7.497062683105469,
2.973027467727661
],
"min": [
-2.5999999046325684,
0.0,
-2.5999999046325684
],
"type": "VEC3"
},
{
"bufferView": 1,
"byteOffset": 50676,
"componentType": 5126,
"count": 4223,
"max": [
0.999612033367157,
1.0,
0.9990826845169067
],
"min": [
-0.9990265369415283,
-1.0,
-0.9999741911888123
],
"type": "VEC3"
},
{
"bufferView": 0,
"componentType": 5125,
"count": 4290,
"type": "SCALAR"
}
],
"asset": {
"extras": {
"author": "Ritordp (https://sketchfab.com/ritordp)",
"license": "SKETCHFAB Editorial (https://sketchfab.com/licenses)",
"source": "https://sketchfab.com/3d-models/the-thinker-low-poly-stylized-372a76d732ad476e9dcd813e7abe5ba8",
"title": "The Thinker Low Poly Stylized"
},
"generator": "Sketchfab-12.67.0",
"version": "2.0"
},
"bufferViews": [
{
"buffer": 0,
"byteLength": 17160,
"name": "floatBufferViews",
"target": 34963
},
{
"buffer": 0,
"byteLength": 101352,
"byteOffset": 17160,
"byteStride": 12,
"name": "floatBufferViews",
"target": 34962
}
],
"buffers": [
{
"byteLength": 118512,
"uri": "scene.bin"
}
],
"materials": [
{
"doubleSided": true,
"name": "Scene_-_Root",
"pbrMetallicRoughness": {
"metallicFactor": 0.0
}
}
],
"meshes": [
{
"name": "the_thinker_low_poly__0",
"primitives": [
{
"attributes": {
"NORMAL": 1,
"POSITION": 0
},
"indices": 2,
"material": 0,
"mode": 4
}
]
}
],
"nodes": [
{
"children": [
1
],
"matrix": [
1.0,
0.0,
0.0,
0.0,
0.0,
2.220446049250313e-16,
-1.0,
0.0,
0.0,
1.0,
2.220446049250313e-16,
0.0,
0.0,
0.0,
0.0,
1.0
],
"name": "Sketchfab_model"
},
{
"children": [
2
],
"matrix": [
1.0,
0.0,
0.0,
0.0,
0.0,
0.0,
1.0,
0.0,
0.0,
-1.0,
0.0,
0.0,
0.0,
0.0,
0.0,
1.0
],
"name": "aa3a67f825fc46a08c64f44aa24740b0.fbx"
},
{
"children": [
3
],
"name": "RootNode"
},
{
"children": [
4
],
"matrix": [
1.0,
0.0,
-4.898587196589413e-16,
0.0,
0.0,
1.0,
0.0,
0.0,
4.898587196589413e-16,
0.0,
1.0,
0.0,
0.0,
0.0,
0.0,
1.0
],
"name": "the_thinker_low_poly"
},
{
"mesh": 0,
"name": "the_thinker_low_poly__0"
}
],
"scene": 0,
"scenes": [
{
"name": "Sketchfab_Scene",
"nodes": [
0
]
}
]
}

18
counter.js
View File

@ -1,9 +1,9 @@
export function setupCounter(element) { export function setupCounter(element) {
let counter = 0 let counter = 0
const setCounter = (count) => { const setCounter = (count) => {
counter = count counter = count
element.innerHTML = `count is ${counter}` element.innerHTML = `count is ${counter}`
} }
element.addEventListener('click', () => setCounter(counter + 1)) element.addEventListener('click', () => setCounter(counter + 1))
setCounter(0) setCounter(0)
} }

274
index.html
View File

@ -1,137 +1,137 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/terminal.svg" /> <link rel="icon" type="image/svg+xml" href="/terminal.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Daniel Redd Jones</title> <title>Daniel Redd Jones</title>
</head> </head>
<body> <body>
<canvas id="bg"></canvas> <canvas id="bg"></canvas>
<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> <a href="#projects">Projects</a>
<a href="#jobs">Experience</a> <a href="#jobs">Experience</a>
<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>
<header> <header>
<h1> Daniel Jones</h1> <h1> Daniel Jones</h1>
<p>Web Developer, Game Designer, and Blogger.</p> <p>Web Developer, Game Designer, and Blogger.</p>
</header> </header>
<div id="description"> <div id="description">
<h1>About Me</h1> <h1>About Me</h1>
<p> <p>
My name is Daniel Jones. I have been programming as a hobby since I was twelve years old. My name is Daniel Jones. I have been programming as a hobby since I was twelve years old.
<br> <br>
I went to college for Information Systems, and have been using those skills professionally since 2021. I went to college for Information Systems, and have been using those skills professionally since 2021.
<br> <br>
My interests include geocaching, programming, web development, and puzzle solving. My interests include geocaching, programming, web development, and puzzle solving.
</p> </p>
</div> </div>
<div id="projects"> <div id="projects">
<p> <p>
<h1>Projects: </h1> <h1>Projects: </h1>
<ul> <ul>
<a href="http://gitea.whoisthisjoker.com/danjoredd/3d_website"><li>This website</li></a> <a href="http://gitea.whoisthisjoker.com/danjoredd/3d_website"><li>This website</li></a>
Personal project (2024) Personal project (2024)
<ul> <ul>
<li>Written in Javascript and uses the Node Package Manager</li> <li>Written in Javascript and uses the Node Package Manager</li>
<li>Utilizes three dimensional graphics to provide an interesting visual experience</li> <li>Utilizes three dimensional graphics to provide an interesting visual experience</li>
<li>Uses context-sensitive animations to provide interactivity</li> <li>Uses context-sensitive animations to provide interactivity</li>
</ul> </ul>
<a href="http://gitea.whoisthisjoker.com/danjoredd/bibliofile"><li>Bibliofile</li></a> <a href="http://gitea.whoisthisjoker.com/danjoredd/bibliofile"><li>Bibliofile</li></a>
Personal project (2023) Personal project (2023)
<ul> <ul>
<li>Written in Rust Language</li> <li>Written in Rust Language</li>
<li>Uses TUI interface to open and navigate books</li> <li>Uses TUI interface to open and navigate books</li>
<li>Parses HTML epub files into human-readable format</li> <li>Parses HTML epub files into human-readable format</li>
</ul> </ul>
</ul> </ul>
</p> </p>
</div> </div>
<div id="jobs"> <div id="jobs">
<!-- Professional Experience--> <!-- Professional Experience-->
<p> <p>
<h1>Professional experience: </h1> <h1>Professional experience: </h1>
<ul> <ul>
<a href="https://www.letu.edu/offices/administration-finance/it/staff.html#ContentBlock-1-3"><li>Systems Analyst</li></a> <a href="https://www.letu.edu/offices/administration-finance/it/staff.html#ContentBlock-1-3"><li>Systems Analyst</li></a>
LeTourneau University, Longview, Texas (2021 - current) LeTourneau University, Longview, Texas (2021 - current)
<br> <br>
Responsibilities: Responsibilities:
<ul> <ul>
<li>Analyze, patch, and mitigate security vulnerabilities</li> <li>Analyze, patch, and mitigate security vulnerabilities</li>
<li>Perform bug fixes in ASP.net web pages</li> <li>Perform bug fixes in ASP.net web pages</li>
<li>Automate tasks on Debian Linux using Bash</li> <li>Automate tasks on Debian Linux using Bash</li>
</ul> </ul>
<a href="https://ityall.com"><li>Help Desk</li></a> <a href="https://ityall.com"><li>Help Desk</li></a>
IT Yall, Dallas, TX(2021) IT Yall, Dallas, TX(2021)
<br> <br>
Responsibilities: Responsibilities:
<ul> <ul>
<li>Maintain ticket queue in Freshdesk</li> <li>Maintain ticket queue in Freshdesk</li>
<li>Create and setup VPN connections on end user workstations</li> <li>Create and setup VPN connections on end user workstations</li>
<li>Set up and terminated network wiring for on-site customer locations</li> <li>Set up and terminated network wiring for on-site customer locations</li>
</ul> </ul>
</ul> </ul>
</p> </p>
</div> </div>
<div id="school"> <div id="school">
<!--educational experience--> <!--educational experience-->
<p> <p>
<h1>Education: </h1> <h1>Education: </h1>
<ul> <ul>
<li> B.S. Information Systems (August 2017 - December 2020)</li> <li> B.S. Information Systems (August 2017 - December 2020)</li>
LeTourneau University LeTourneau University
<ul> <ul>
<li> Learned software engineering, encryption algorithms, and penetration testing methodologies</li> <li> Learned software engineering, encryption algorithms, and penetration testing methodologies</li>
<li> Designed software such as Pick-A-Student, Bouncer, and Paperwork Avalanche</li> <li> Designed software such as Pick-A-Student, Bouncer, and Paperwork Avalanche</li>
<li> Wrote and executed exploits for metasploitable OS</li> <li> Wrote and executed exploits for metasploitable OS</li>
</ul> </ul>
<li> A.S. Business Management (January 2015 - May 2017)</li> <li> A.S. Business Management (January 2015 - May 2017)</li>
<ul> <ul>
<li> Took classes on Economics, Accounting, and leadership</li> <li> Took classes on Economics, Accounting, and leadership</li>
<li> Joined the Phi Theta Kappa society and regularly attended meetings</li> <li> Joined the Phi Theta Kappa society and regularly attended meetings</li>
<li> Earned the Deans List recognition in Fall of 2016</li> <li> Earned the Deans List recognition in Fall of 2016</li>
</ul> </ul>
<li> Homeschooled (September 2001 - May 2014) </li> <li> Homeschooled (September 2001 - May 2014) </li>
<ul> <ul>
<li>Learned how to program in LOGO using the Microworlds EX </li> <li>Learned how to program in LOGO using the Microworlds EX </li>
<li>Joined the Yearbook design team for the CHEMPA homeschool group</li> <li>Joined the Yearbook design team for the CHEMPA homeschool group</li>
<li>Gained and maintained membership in Civil Air Patrol</li> <li>Gained and maintained membership in Civil Air Patrol</li>
</ul> </ul>
</ul> </ul>
</p> </p>
</div> </div>
<footer> <footer>
<div id="attribution"> <div id="attribution">
<p> <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> <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>
<br> <br>
"Galaxy background from " <a href="https://www.rawpixel.com/image/5924106/photo-image-public-domain-stars-galaxy">rawpixel.com</a> "Galaxy background from " <a href="https://www.rawpixel.com/image/5924106/photo-image-public-domain-stars-galaxy">rawpixel.com</a>
<br> <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> "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> <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>. "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> </p>
</div> </div>
</footer> </footer>
<script type="module" src="/main.js"></script> <script type="module" src="/main.js"></script>
</div> </div>
</body> </body>
</html> </html>

224
main.js
View File

@ -1,105 +1,119 @@
/* /*
Author: Daniel Jones Author: Daniel Jones
IDE: VSCodium IDE: Webstorm
Browsers tested: Firefox 125 Browsers tested: Firefox 125
Last change: 08/08/24 Last change: 08/26/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
*/ */
import { PointLight } from 'three'; import { PointLight } from 'three';
import './style.css'; import './style.css';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'; import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import * as THREE from 'three'; import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/Addons.js'; import { GLTFLoader } from 'three/examples/jsm/Addons.js';
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const camera = new THREE.PerspectiveCamera(75, 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'),
}); });
renderer.setPixelRatio(window.devicePixelRatio); renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
var zPos = 500; var zPos = 500;
camera.position.setZ(zPos); camera.position.setZ(zPos);
camera.position.setY(20); camera.position.setY(20);
renderer.render(scene, camera); renderer.render(scene, camera);
//code to import GLTF file //code to import GLTF file
let loadedCmpModel; // model for PC let loadedCmpModel; // model for PC
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 comupter model loaded! OwO"); console.log("UwU whats this? My computer model loaded! OwO");
gltfScene.scene.position.z = 50; //for reference tomorrow when I work on this again...gltfScene is the actual object that you set attributes to. Mess with that. gltfScene.scene.position.z = 50;
gltfScene.scene.position.y = 20; gltfScene.scene.position.y = 20;
gltfScene.scene.scale.set(10,10,10); gltfScene.scene.scale.set(10,10,10);
scene.add(loadedCmpModel.scene); scene.add(loadedCmpModel.scene);
} }
); );
//the thinker model
let loadedThinkerModel;
const ambientLight = new THREE.AmbientLight(0xffffff); const thnkerLoader = new GLTFLoader();
scene.add(ambientLight); thnkerLoader.load('./assets/models/the_thinker_low_poly_stylized/scene.gltf', (gltfScene) =>{
loadedThinkerModel = gltfScene;
console.log("The thinker loaded! I wish I had muscles that big.");
gltfScene.scene.position.z = 100;
gltfScene.scene.position.y = 10;
gltfScene.scene.scale.set(10,10,10);
//background texture
const spaceTexture = new THREE.TextureLoader().load('./assets/pics/galaxy.jpg');
spaceTexture.minFilter = THREE.LinearFilter; scene.add(loadedThinkerModel.scene);
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); const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
//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); //background texture
const floorGeometry = new THREE.PlaneGeometry(100, 10000, 1000, 1000); const spaceTexture = new THREE.TextureLoader().load('./assets/pics/galaxy.jpg');
const floorMaterial = new THREE.MeshStandardMaterial({ spaceTexture.minFilter = THREE.LinearFilter;
map: floorTexture, scene.background = spaceTexture;
})
const floor = new THREE.Mesh(floorGeometry, floorMaterial); //turning off orbit controls and lighthelper. Not needed. Kept in code in case if I want to use it again.
floor.rotateX(Math.PI * -0.5); //const lightHelper = new THREE.PointLightHelper(pointLight);
scene.add(floor); //const controls = new OrbitControls(camera, renderer.domElement);
//when the user scrolls, walk down the hallway. //floor object that appears in the background
function updateCamera(ev){ const floorTexture = new THREE.TextureLoader().load("./assets/pics/marble.jpg");
floorTexture.wrapT = THREE.RepeatWrapping;
let div1 = document.getElementById("div1"); floorTexture.wrapS = THREE.RepeatWrapping;
camera.position.z = zPos - window.scrollY / 3; floorTexture.repeat.set(1, 100);
} const floorGeometry = new THREE.PlaneGeometry(100, 10000, 1000, 1000);
window.addEventListener("scroll", updateCamera); const floorMaterial = new THREE.MeshStandardMaterial({
map: floorTexture,
})
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
//animation loop every cycle. floor.rotateX(Math.PI * -0.5);
function animate(){ scene.add(floor);
renderer.setSize(window.innerWidth, window.innerHeight);
requestAnimationFrame(animate); //when the user scrolls, walk down the hallway.
renderer.render(scene, camera); function updateCamera(ev){
}
animate(); let div1 = document.getElementById("div1");
camera.position.z = zPos - window.scrollY / 3;
}
window.addEventListener("scroll", updateCamera);
//animation loop every cycle.
function animate(){
renderer.setSize(window.innerWidth, window.innerHeight);
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();

1624
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

34
package.json
View File

@ -1,17 +1,17 @@
{ {
"name": "three_js_tutorial", "name": "three_js_tutorial",
"private": true, "private": true,
"version": "0.0.0", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview"
}, },
"devDependencies": { "devDependencies": {
"vite": "^5.4.0" "vite": "^5.4.2"
}, },
"dependencies": { "dependencies": {
"three": "^0.161.0" "three": "^0.161.0"
} }
} }

210
style.css
View File

@ -1,106 +1,106 @@
canvas { canvas {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
} }
body { body {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
#viewport { #viewport {
position: fixed; position: fixed;
margin: 0; margin: 0;
padding: 0; padding: 0;
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
} }
.page-wrapper { .page-wrapper {
padding: 0px; padding: 0px;
margin: 12px 48px; margin: 12px 48px;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: calc(100% - 2*48px); width: calc(100% - 2*48px);
word-wrap: break-word; word-wrap: break-word;
display: grid; display: grid;
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
} }
header { header {
margin-top: 50px; margin-top: 50px;
grid-column: 2 / 8; grid-column: 2 / 8;
background-color: rgb(77, 76, 76, 0.5); background-color: rgb(77, 76, 76, 0.5);
border-radius: 10px; border-radius: 10px;
padding: 10%; padding: 10%;
} }
#description { #description {
margin-top: 50px; margin-top: 50px;
grid-column: 2 / 8; grid-column: 2 / 8;
background-color: rgb(77, 76, 76, 0.5); background-color: rgb(77, 76, 76, 0.5);
border-radius: 10px; border-radius: 10px;
padding: 10%; padding: 10%;
} }
#projects { #projects {
margin-top: 100px; margin-top: 100px;
grid-column: 2 / 8; grid-column: 2 / 8;
background-color: rgb(77, 76, 76, 0.5); background-color: rgb(77, 76, 76, 0.5);
border-radius: 10px; border-radius: 10px;
padding: 10%; padding: 10%;
} }
#jobs { #jobs {
margin-top: 100px; margin-top: 100px;
grid-column: 2 / 8; grid-column: 2 / 8;
background-color: rgb(77, 76, 76, 0.5); background-color: rgb(77, 76, 76, 0.5);
border-radius: 10px; border-radius: 10px;
padding: 10%; padding: 10%;
} }
#school { #school {
margin-top: 100px; margin-top: 100px;
grid-column: 2 / 8; grid-column: 2 / 8;
background-color: rgba(77, 76, 76, 0.5); background-color: rgba(77, 76, 76, 0.5);
border-radius: 10px; border-radius: 10px;
padding: 10%; padding: 10%;
} }
/* The navigation bar */ /* The navigation bar */
.navbar { .navbar {
position: fixed; /* Set the navbar to fixed position */ position: fixed; /* Set the navbar to fixed position */
overflow: hidden; overflow: hidden;
background-color: #333; background-color: #333;
top: 0; /* Position the navbar at the top of the page */ top: 0; /* Position the navbar at the top of the page */
left:0; left:0;
right: 0; right: 0;
} }
/* Links inside the navbar */ /* Links inside the navbar */
.navbar a { .navbar a {
margin: 0px; margin: 0px;
float: left; float: left;
display: block; display: block;
color: #f2f2f2; color: #f2f2f2;
text-align: left; text-align: left;
padding: 14px 16px; padding: 14px 16px;
text-decoration: none; text-decoration: none;
} }
/* Change background on mouse-over */ /* Change background on mouse-over */
.navbar a:hover { .navbar a:hover {
background: #ddd; background: #ddd;
color: black; color: black;
} }
/* Main content */ /* Main content */