Added the Thinker model to website. Untextured as of yet.
This commit is contained in:
Daniel Jones
parent
8f8ba3d2cc
commit
c5b7b39efc
54
.gitignore
vendored
54
.gitignore
vendored
@ -1,27 +1,27 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Thinker Asset cannot legally be added to a public git repo so leaving it out
|
||||
assets/models/thinker/
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Thinker Asset cannot legally be added to a public git repo so leaving it out
|
||||
assets/models/thinker/
|
||||
|
||||
@ -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.
|
||||
@ -1,11 +1,11 @@
|
||||
Model Information:
|
||||
* title: Hand-painted Low Poly Computer
|
||||
* source: https://sketchfab.com/3d-models/hand-painted-low-poly-computer-c4e5d67781ca4bba960673f67a7cef30
|
||||
* author: NoodleBaguette (https://sketchfab.com/NoodleBaguette)
|
||||
|
||||
Model License:
|
||||
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
* 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:
|
||||
Model Information:
|
||||
* title: Hand-painted Low Poly Computer
|
||||
* source: https://sketchfab.com/3d-models/hand-painted-low-poly-computer-c4e5d67781ca4bba960673f67a7cef30
|
||||
* author: NoodleBaguette (https://sketchfab.com/NoodleBaguette)
|
||||
|
||||
Model License:
|
||||
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
* 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:
|
||||
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/)
|
||||
@ -1,239 +1,239 @@
|
||||
{
|
||||
"accessors": [
|
||||
{
|
||||
"bufferView": 2,
|
||||
"componentType": 5126,
|
||||
"count": 2356,
|
||||
"max": [
|
||||
88.54320526123047,
|
||||
92.07904052734375,
|
||||
44.123756408691406
|
||||
],
|
||||
"min": [
|
||||
-51.08591842651367,
|
||||
-13.874343872070313,
|
||||
-87.38624572753906
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 2,
|
||||
"byteOffset": 28272,
|
||||
"componentType": 5126,
|
||||
"count": 2356,
|
||||
"max": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"min": [
|
||||
-1.0,
|
||||
-1.0,
|
||||
-1.0
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 1,
|
||||
"componentType": 5126,
|
||||
"count": 2356,
|
||||
"max": [
|
||||
1.301616907119751,
|
||||
0.9855207204818726
|
||||
],
|
||||
"min": [
|
||||
0.027651939541101456,
|
||||
0.01626039668917656
|
||||
],
|
||||
"type": "VEC2"
|
||||
},
|
||||
{
|
||||
"bufferView": 0,
|
||||
"componentType": 5125,
|
||||
"count": 5958,
|
||||
"type": "SCALAR"
|
||||
}
|
||||
],
|
||||
"asset": {
|
||||
"extras": {
|
||||
"author": "NoodleBaguette (https://sketchfab.com/NoodleBaguette)",
|
||||
"license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
|
||||
"source": "https://sketchfab.com/3d-models/hand-painted-low-poly-computer-c4e5d67781ca4bba960673f67a7cef30",
|
||||
"title": "Hand-painted Low Poly Computer"
|
||||
},
|
||||
"generator": "Sketchfab-15.55.0",
|
||||
"version": "2.0"
|
||||
},
|
||||
"bufferViews": [
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 23832,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34963
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 18848,
|
||||
"byteOffset": 23832,
|
||||
"byteStride": 8,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 56544,
|
||||
"byteOffset": 42680,
|
||||
"byteStride": 12,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
}
|
||||
],
|
||||
"buffers": [
|
||||
{
|
||||
"byteLength": 99224,
|
||||
"uri": "scene.bin"
|
||||
}
|
||||
],
|
||||
"extensionsUsed": [
|
||||
"KHR_materials_clearcoat"
|
||||
],
|
||||
"images": [
|
||||
{
|
||||
"uri": "textures/lambert2_baseColor.png"
|
||||
},
|
||||
{
|
||||
"uri": "textures/lambert2_metallicRoughness.png"
|
||||
}
|
||||
],
|
||||
"materials": [
|
||||
{
|
||||
"doubleSided": true,
|
||||
"extensions": {
|
||||
"KHR_materials_clearcoat": {
|
||||
"clearcoatFactor": 0.011018971520681035,
|
||||
"clearcoatRoughnessFactor": 0.04
|
||||
}
|
||||
},
|
||||
"name": "lambert2",
|
||||
"pbrMetallicRoughness": {
|
||||
"baseColorTexture": {
|
||||
"index": 0
|
||||
},
|
||||
"metallicFactor": 0.0,
|
||||
"metallicRoughnessTexture": {
|
||||
"index": 1
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"meshes": [
|
||||
{
|
||||
"name": "Computer_Mesh_lambert2_0",
|
||||
"primitives": [
|
||||
{
|
||||
"attributes": {
|
||||
"NORMAL": 1,
|
||||
"POSITION": 0,
|
||||
"TEXCOORD_0": 2
|
||||
},
|
||||
"indices": 3,
|
||||
"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": [
|
||||
0.009999999776482582,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.009999999776482582,
|
||||
0.0,
|
||||
0.0,
|
||||
-0.009999999776482582,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
1.0
|
||||
],
|
||||
"name": "eb23e6cd391c4265aa2408027bb0d982.fbx"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
3
|
||||
],
|
||||
"name": "RootNode"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
4
|
||||
],
|
||||
"name": "Computer_Mesh"
|
||||
},
|
||||
{
|
||||
"mesh": 0,
|
||||
"name": "Computer_Mesh_lambert2_0"
|
||||
}
|
||||
],
|
||||
"samplers": [
|
||||
{
|
||||
"magFilter": 9729,
|
||||
"minFilter": 9987,
|
||||
"wrapS": 10497,
|
||||
"wrapT": 10497
|
||||
}
|
||||
],
|
||||
"scene": 0,
|
||||
"scenes": [
|
||||
{
|
||||
"name": "Sketchfab_Scene",
|
||||
"nodes": [
|
||||
0
|
||||
]
|
||||
}
|
||||
],
|
||||
"textures": [
|
||||
{
|
||||
"sampler": 0,
|
||||
"source": 0
|
||||
},
|
||||
{
|
||||
"sampler": 0,
|
||||
"source": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"accessors": [
|
||||
{
|
||||
"bufferView": 2,
|
||||
"componentType": 5126,
|
||||
"count": 2356,
|
||||
"max": [
|
||||
88.54320526123047,
|
||||
92.07904052734375,
|
||||
44.123756408691406
|
||||
],
|
||||
"min": [
|
||||
-51.08591842651367,
|
||||
-13.874343872070313,
|
||||
-87.38624572753906
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 2,
|
||||
"byteOffset": 28272,
|
||||
"componentType": 5126,
|
||||
"count": 2356,
|
||||
"max": [
|
||||
1.0,
|
||||
1.0,
|
||||
1.0
|
||||
],
|
||||
"min": [
|
||||
-1.0,
|
||||
-1.0,
|
||||
-1.0
|
||||
],
|
||||
"type": "VEC3"
|
||||
},
|
||||
{
|
||||
"bufferView": 1,
|
||||
"componentType": 5126,
|
||||
"count": 2356,
|
||||
"max": [
|
||||
1.301616907119751,
|
||||
0.9855207204818726
|
||||
],
|
||||
"min": [
|
||||
0.027651939541101456,
|
||||
0.01626039668917656
|
||||
],
|
||||
"type": "VEC2"
|
||||
},
|
||||
{
|
||||
"bufferView": 0,
|
||||
"componentType": 5125,
|
||||
"count": 5958,
|
||||
"type": "SCALAR"
|
||||
}
|
||||
],
|
||||
"asset": {
|
||||
"extras": {
|
||||
"author": "NoodleBaguette (https://sketchfab.com/NoodleBaguette)",
|
||||
"license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
|
||||
"source": "https://sketchfab.com/3d-models/hand-painted-low-poly-computer-c4e5d67781ca4bba960673f67a7cef30",
|
||||
"title": "Hand-painted Low Poly Computer"
|
||||
},
|
||||
"generator": "Sketchfab-15.55.0",
|
||||
"version": "2.0"
|
||||
},
|
||||
"bufferViews": [
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 23832,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34963
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 18848,
|
||||
"byteOffset": 23832,
|
||||
"byteStride": 8,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
},
|
||||
{
|
||||
"buffer": 0,
|
||||
"byteLength": 56544,
|
||||
"byteOffset": 42680,
|
||||
"byteStride": 12,
|
||||
"name": "floatBufferViews",
|
||||
"target": 34962
|
||||
}
|
||||
],
|
||||
"buffers": [
|
||||
{
|
||||
"byteLength": 99224,
|
||||
"uri": "scene.bin"
|
||||
}
|
||||
],
|
||||
"extensionsUsed": [
|
||||
"KHR_materials_clearcoat"
|
||||
],
|
||||
"images": [
|
||||
{
|
||||
"uri": "textures/lambert2_baseColor.png"
|
||||
},
|
||||
{
|
||||
"uri": "textures/lambert2_metallicRoughness.png"
|
||||
}
|
||||
],
|
||||
"materials": [
|
||||
{
|
||||
"doubleSided": true,
|
||||
"extensions": {
|
||||
"KHR_materials_clearcoat": {
|
||||
"clearcoatFactor": 0.011018971520681035,
|
||||
"clearcoatRoughnessFactor": 0.04
|
||||
}
|
||||
},
|
||||
"name": "lambert2",
|
||||
"pbrMetallicRoughness": {
|
||||
"baseColorTexture": {
|
||||
"index": 0
|
||||
},
|
||||
"metallicFactor": 0.0,
|
||||
"metallicRoughnessTexture": {
|
||||
"index": 1
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
"meshes": [
|
||||
{
|
||||
"name": "Computer_Mesh_lambert2_0",
|
||||
"primitives": [
|
||||
{
|
||||
"attributes": {
|
||||
"NORMAL": 1,
|
||||
"POSITION": 0,
|
||||
"TEXCOORD_0": 2
|
||||
},
|
||||
"indices": 3,
|
||||
"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": [
|
||||
0.009999999776482582,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.009999999776482582,
|
||||
0.0,
|
||||
0.0,
|
||||
-0.009999999776482582,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
0.0,
|
||||
1.0
|
||||
],
|
||||
"name": "eb23e6cd391c4265aa2408027bb0d982.fbx"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
3
|
||||
],
|
||||
"name": "RootNode"
|
||||
},
|
||||
{
|
||||
"children": [
|
||||
4
|
||||
],
|
||||
"name": "Computer_Mesh"
|
||||
},
|
||||
{
|
||||
"mesh": 0,
|
||||
"name": "Computer_Mesh_lambert2_0"
|
||||
}
|
||||
],
|
||||
"samplers": [
|
||||
{
|
||||
"magFilter": 9729,
|
||||
"minFilter": 9987,
|
||||
"wrapS": 10497,
|
||||
"wrapT": 10497
|
||||
}
|
||||
],
|
||||
"scene": 0,
|
||||
"scenes": [
|
||||
{
|
||||
"name": "Sketchfab_Scene",
|
||||
"nodes": [
|
||||
0
|
||||
]
|
||||
}
|
||||
],
|
||||
"textures": [
|
||||
{
|
||||
"sampler": 0,
|
||||
"source": 0
|
||||
},
|
||||
{
|
||||
"sampler": 0,
|
||||
"source": 1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
Model Information:
|
||||
* title: Business Male_4_ Low Poly Style
|
||||
* source: https://sketchfab.com/3d-models/business-male-4--low-poly-style-5e53bf1cdd264ad08f420e05ee7aa7bf
|
||||
* author: POLYTRICITY (https://sketchfab.com/PolytricityLtd)
|
||||
|
||||
Model License:
|
||||
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
* 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:
|
||||
Model Information:
|
||||
* title: Business Male_4_ Low Poly Style
|
||||
* source: https://sketchfab.com/3d-models/business-male-4--low-poly-style-5e53bf1cdd264ad08f420e05ee7aa7bf
|
||||
* author: POLYTRICITY (https://sketchfab.com/PolytricityLtd)
|
||||
|
||||
Model License:
|
||||
* license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
|
||||
* 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:
|
||||
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/)
|
||||
File diff suppressed because it is too large
Load Diff
8
assets/models/the_thinker_low_poly_stylized/license.txt
Normal file
8
assets/models/the_thinker_low_poly_stylized/license.txt
Normal 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
BIN
assets/models/the_thinker_low_poly_stylized/scene.bin
Normal file
Binary file not shown.
193
assets/models/the_thinker_low_poly_stylized/scene.gltf
Normal file
193
assets/models/the_thinker_low_poly_stylized/scene.gltf
Normal 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
18
counter.js
@ -1,9 +1,9 @@
|
||||
export function setupCounter(element) {
|
||||
let counter = 0
|
||||
const setCounter = (count) => {
|
||||
counter = count
|
||||
element.innerHTML = `count is ${counter}`
|
||||
}
|
||||
element.addEventListener('click', () => setCounter(counter + 1))
|
||||
setCounter(0)
|
||||
}
|
||||
export function setupCounter(element) {
|
||||
let counter = 0
|
||||
const setCounter = (count) => {
|
||||
counter = count
|
||||
element.innerHTML = `count is ${counter}`
|
||||
}
|
||||
element.addEventListener('click', () => setCounter(counter + 1))
|
||||
setCounter(0)
|
||||
}
|
||||
|
||||
274
index.html
274
index.html
@ -1,137 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/terminal.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Daniel Redd Jones</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<canvas id="bg"></canvas>
|
||||
|
||||
<div id="div1" class="page-wrapper">
|
||||
<div class="navbar">
|
||||
<a href="#description">About</a>
|
||||
<a href="#projects">Projects</a>
|
||||
<a href="#jobs">Experience</a>
|
||||
<a href="#school">Education</a>
|
||||
<a href="https://whoisthisjoker.com">Blog</a>
|
||||
</div>
|
||||
<header>
|
||||
<h1> Daniel Jones</h1>
|
||||
<p>Web Developer, Game Designer, and Blogger.</p>
|
||||
</header>
|
||||
<div id="description">
|
||||
<h1>About Me</h1>
|
||||
<p>
|
||||
My name is Daniel Jones. I have been programming as a hobby since I was twelve years old.
|
||||
<br>
|
||||
I went to college for Information Systems, and have been using those skills professionally since 2021.
|
||||
<br>
|
||||
My interests include geocaching, programming, web development, and puzzle solving.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="projects">
|
||||
<p>
|
||||
<h1>Projects: </h1>
|
||||
<ul>
|
||||
<a href="http://gitea.whoisthisjoker.com/danjoredd/3d_website"><li>This website</li></a>
|
||||
Personal project (2024)
|
||||
<ul>
|
||||
<li>Written in Javascript and uses the Node Package Manager</li>
|
||||
<li>Utilizes three dimensional graphics to provide an interesting visual experience</li>
|
||||
<li>Uses context-sensitive animations to provide interactivity</li>
|
||||
</ul>
|
||||
<a href="http://gitea.whoisthisjoker.com/danjoredd/bibliofile"><li>Bibliofile</li></a>
|
||||
Personal project (2023)
|
||||
<ul>
|
||||
<li>Written in Rust Language</li>
|
||||
<li>Uses TUI interface to open and navigate books</li>
|
||||
<li>Parses HTML epub files into human-readable format</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="jobs">
|
||||
<!-- Professional Experience-->
|
||||
<p>
|
||||
<h1>Professional experience: </h1>
|
||||
<ul>
|
||||
<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)
|
||||
<br>
|
||||
Responsibilities:
|
||||
<ul>
|
||||
<li>Analyze, patch, and mitigate security vulnerabilities</li>
|
||||
<li>Perform bug fixes in ASP.net web pages</li>
|
||||
<li>Automate tasks on Debian Linux using Bash</li>
|
||||
</ul>
|
||||
<a href="https://ityall.com"><li>Help Desk</li></a>
|
||||
IT Yall, Dallas, TX(2021)
|
||||
<br>
|
||||
Responsibilities:
|
||||
<ul>
|
||||
<li>Maintain ticket queue in Freshdesk</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>
|
||||
</ul>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="school">
|
||||
<!--educational experience-->
|
||||
<p>
|
||||
<h1>Education: </h1>
|
||||
<ul>
|
||||
<li> B.S. Information Systems (August 2017 - December 2020)</li>
|
||||
LeTourneau University
|
||||
<ul>
|
||||
<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> Wrote and executed exploits for metasploitable OS</li>
|
||||
</ul>
|
||||
<li> A.S. Business Management (January 2015 - May 2017)</li>
|
||||
<ul>
|
||||
<li> Took classes on Economics, Accounting, and leadership</li>
|
||||
<li> Joined the Phi Theta Kappa society and regularly attended meetings</li>
|
||||
<li> Earned the Deans List recognition in Fall of 2016</li>
|
||||
</ul>
|
||||
<li> Homeschooled (September 2001 - May 2014) </li>
|
||||
<ul>
|
||||
<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>Gained and maintained membership in Civil Air Patrol</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
|
||||
</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>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/terminal.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Daniel Redd Jones</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<canvas id="bg"></canvas>
|
||||
|
||||
<div id="div1" class="page-wrapper">
|
||||
<div class="navbar">
|
||||
<a href="#description">About</a>
|
||||
<a href="#projects">Projects</a>
|
||||
<a href="#jobs">Experience</a>
|
||||
<a href="#school">Education</a>
|
||||
<a href="https://whoisthisjoker.com">Blog</a>
|
||||
</div>
|
||||
<header>
|
||||
<h1> Daniel Jones</h1>
|
||||
<p>Web Developer, Game Designer, and Blogger.</p>
|
||||
</header>
|
||||
<div id="description">
|
||||
<h1>About Me</h1>
|
||||
<p>
|
||||
My name is Daniel Jones. I have been programming as a hobby since I was twelve years old.
|
||||
<br>
|
||||
I went to college for Information Systems, and have been using those skills professionally since 2021.
|
||||
<br>
|
||||
My interests include geocaching, programming, web development, and puzzle solving.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="projects">
|
||||
<p>
|
||||
<h1>Projects: </h1>
|
||||
<ul>
|
||||
<a href="http://gitea.whoisthisjoker.com/danjoredd/3d_website"><li>This website</li></a>
|
||||
Personal project (2024)
|
||||
<ul>
|
||||
<li>Written in Javascript and uses the Node Package Manager</li>
|
||||
<li>Utilizes three dimensional graphics to provide an interesting visual experience</li>
|
||||
<li>Uses context-sensitive animations to provide interactivity</li>
|
||||
</ul>
|
||||
<a href="http://gitea.whoisthisjoker.com/danjoredd/bibliofile"><li>Bibliofile</li></a>
|
||||
Personal project (2023)
|
||||
<ul>
|
||||
<li>Written in Rust Language</li>
|
||||
<li>Uses TUI interface to open and navigate books</li>
|
||||
<li>Parses HTML epub files into human-readable format</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="jobs">
|
||||
<!-- Professional Experience-->
|
||||
<p>
|
||||
<h1>Professional experience: </h1>
|
||||
<ul>
|
||||
<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)
|
||||
<br>
|
||||
Responsibilities:
|
||||
<ul>
|
||||
<li>Analyze, patch, and mitigate security vulnerabilities</li>
|
||||
<li>Perform bug fixes in ASP.net web pages</li>
|
||||
<li>Automate tasks on Debian Linux using Bash</li>
|
||||
</ul>
|
||||
<a href="https://ityall.com"><li>Help Desk</li></a>
|
||||
IT Yall, Dallas, TX(2021)
|
||||
<br>
|
||||
Responsibilities:
|
||||
<ul>
|
||||
<li>Maintain ticket queue in Freshdesk</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>
|
||||
</ul>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="school">
|
||||
<!--educational experience-->
|
||||
<p>
|
||||
<h1>Education: </h1>
|
||||
<ul>
|
||||
<li> B.S. Information Systems (August 2017 - December 2020)</li>
|
||||
LeTourneau University
|
||||
<ul>
|
||||
<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> Wrote and executed exploits for metasploitable OS</li>
|
||||
</ul>
|
||||
<li> A.S. Business Management (January 2015 - May 2017)</li>
|
||||
<ul>
|
||||
<li> Took classes on Economics, Accounting, and leadership</li>
|
||||
<li> Joined the Phi Theta Kappa society and regularly attended meetings</li>
|
||||
<li> Earned the Deans List recognition in Fall of 2016</li>
|
||||
</ul>
|
||||
<li> Homeschooled (September 2001 - May 2014) </li>
|
||||
<ul>
|
||||
<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>Gained and maintained membership in Civil Air Patrol</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
|
||||
</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>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
224
main.js
224
main.js
@ -1,105 +1,119 @@
|
||||
/*
|
||||
Author: Daniel Jones
|
||||
IDE: VSCodium
|
||||
Browsers tested: Firefox 125
|
||||
Last change: 08/08/24
|
||||
purpose: portfolio website to show to potential freelance customers/web developer positions
|
||||
*/
|
||||
|
||||
|
||||
import { PointLight } from 'three';
|
||||
import './style.css';
|
||||
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/examples/jsm/Addons.js';
|
||||
|
||||
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
|
||||
|
||||
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
canvas: document.querySelector('#bg'),
|
||||
});
|
||||
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
var zPos = 500;
|
||||
camera.position.setZ(zPos);
|
||||
camera.position.setY(20);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
|
||||
|
||||
|
||||
//code to import GLTF file
|
||||
let loadedCmpModel; // model for PC
|
||||
const cmpLoader = new GLTFLoader();
|
||||
cmpLoader.load('./assets/models/Comp_and_Floppy/scene.gltf',(gltfScene)=>{
|
||||
loadedCmpModel = gltfScene;
|
||||
console.log("UwU whats this? My comupter 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.y = 20;
|
||||
gltfScene.scene.scale.set(10,10,10);
|
||||
|
||||
scene.add(loadedCmpModel.scene);
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff);
|
||||
scene.add(ambientLight);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//background texture
|
||||
const spaceTexture = new THREE.TextureLoader().load('./assets/pics/galaxy.jpg');
|
||||
spaceTexture.minFilter = THREE.LinearFilter;
|
||||
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);
|
||||
|
||||
|
||||
//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);
|
||||
const floorGeometry = new THREE.PlaneGeometry(100, 10000, 1000, 1000);
|
||||
const floorMaterial = new THREE.MeshStandardMaterial({
|
||||
map: floorTexture,
|
||||
})
|
||||
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
||||
floor.rotateX(Math.PI * -0.5);
|
||||
scene.add(floor);
|
||||
|
||||
|
||||
//when the user scrolls, walk down the hallway.
|
||||
function updateCamera(ev){
|
||||
|
||||
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();
|
||||
/*
|
||||
Author: Daniel Jones
|
||||
IDE: Webstorm
|
||||
Browsers tested: Firefox 125
|
||||
Last change: 08/26/24
|
||||
purpose: portfolio website to show to potential freelance customers/web developer positions
|
||||
*/
|
||||
|
||||
|
||||
import { PointLight } from 'three';
|
||||
import './style.css';
|
||||
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/examples/jsm/Addons.js';
|
||||
|
||||
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
|
||||
|
||||
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
canvas: document.querySelector('#bg'),
|
||||
});
|
||||
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
var zPos = 500;
|
||||
camera.position.setZ(zPos);
|
||||
camera.position.setY(20);
|
||||
|
||||
renderer.render(scene, camera);
|
||||
|
||||
|
||||
|
||||
|
||||
//code to import GLTF file
|
||||
let loadedCmpModel; // model for PC
|
||||
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 = 50;
|
||||
gltfScene.scene.position.y = 20;
|
||||
gltfScene.scene.scale.set(10,10,10);
|
||||
|
||||
scene.add(loadedCmpModel.scene);
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
//the thinker model
|
||||
let loadedThinkerModel;
|
||||
const thnkerLoader = new GLTFLoader();
|
||||
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);
|
||||
|
||||
|
||||
scene.add(loadedThinkerModel.scene);
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
const ambientLight = new THREE.AmbientLight(0xffffff);
|
||||
scene.add(ambientLight);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//background texture
|
||||
const spaceTexture = new THREE.TextureLoader().load('./assets/pics/galaxy.jpg');
|
||||
spaceTexture.minFilter = THREE.LinearFilter;
|
||||
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);
|
||||
|
||||
|
||||
//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);
|
||||
const floorGeometry = new THREE.PlaneGeometry(100, 10000, 1000, 1000);
|
||||
const floorMaterial = new THREE.MeshStandardMaterial({
|
||||
map: floorTexture,
|
||||
})
|
||||
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
|
||||
floor.rotateX(Math.PI * -0.5);
|
||||
scene.add(floor);
|
||||
|
||||
|
||||
//when the user scrolls, walk down the hallway.
|
||||
function updateCamera(ev){
|
||||
|
||||
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
1624
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
34
package.json
34
package.json
@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "three_js_tutorial",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^5.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"three": "^0.161.0"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "three_js_tutorial",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^5.4.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"three": "^0.161.0"
|
||||
}
|
||||
}
|
||||
|
||||
210
style.css
210
style.css
@ -1,106 +1,106 @@
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#viewport {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
|
||||
}
|
||||
.page-wrapper {
|
||||
padding: 0px;
|
||||
margin: 12px 48px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: calc(100% - 2*48px);
|
||||
word-wrap: break-word;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
margin-top: 50px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
|
||||
#description {
|
||||
margin-top: 50px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
|
||||
#projects {
|
||||
margin-top: 100px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
#jobs {
|
||||
margin-top: 100px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
#school {
|
||||
margin-top: 100px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgba(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
/* The navigation bar */
|
||||
.navbar {
|
||||
position: fixed; /* Set the navbar to fixed position */
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
top: 0; /* Position the navbar at the top of the page */
|
||||
left:0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Links inside the navbar */
|
||||
.navbar a {
|
||||
margin: 0px;
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: left;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Change background on mouse-over */
|
||||
.navbar a:hover {
|
||||
background: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#viewport {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
|
||||
}
|
||||
.page-wrapper {
|
||||
padding: 0px;
|
||||
margin: 12px 48px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: calc(100% - 2*48px);
|
||||
word-wrap: break-word;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
margin-top: 50px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
|
||||
#description {
|
||||
margin-top: 50px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
|
||||
#projects {
|
||||
margin-top: 100px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
#jobs {
|
||||
margin-top: 100px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgb(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
#school {
|
||||
margin-top: 100px;
|
||||
grid-column: 2 / 8;
|
||||
background-color: rgba(77, 76, 76, 0.5);
|
||||
border-radius: 10px;
|
||||
padding: 10%;
|
||||
}
|
||||
|
||||
/* The navigation bar */
|
||||
.navbar {
|
||||
position: fixed; /* Set the navbar to fixed position */
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
top: 0; /* Position the navbar at the top of the page */
|
||||
left:0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Links inside the navbar */
|
||||
.navbar a {
|
||||
margin: 0px;
|
||||
float: left;
|
||||
display: block;
|
||||
color: #f2f2f2;
|
||||
text-align: left;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Change background on mouse-over */
|
||||
.navbar a:hover {
|
||||
background: #ddd;
|
||||
color: black;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
Loading…
Reference in New Issue
Block a user