74 | 
77 |
78 |
85 | MOVE
75 |POWER
76 |
77 | 
90 |
91 |
92 |
93 |
94 |
95 |
--------------------------------------------------------------------------------
/src/main.css:
--------------------------------------------------------------------------------
1 | * {
2 | -webkit-touch-callout: none; /* Safari */
3 | -webkit-user-select: none; /* Chrome */
4 | -moz-user-select: none; /* Firefox */
5 | -ms-user-select: none; /* Internet Explorer/Edge */
6 | user-select: none;
7 | }
8 |
9 | a {
10 | text-decoration: none;
11 | color: white;
12 | font-weight: 500;
13 | }
14 |
15 | body,
16 | html {
17 | margin: 0;
18 | padding: 0;
19 | background: black;
20 | color: white;
21 | font-family: "Poppins", sans-serif;
22 | -webkit-font-smoothing: antialiased;
23 | overscroll-behavior-y: none;
24 | }
25 |
26 | canvas {
27 | top: 0;
28 | left: 0;
29 | position: fixed;
30 | z-index: -1;
31 | filter: blur(35px);
32 |
33 | .exploration-started & {
34 | filter: blur(0);
35 | transition: filter 2s linear;
36 | }
37 | }
38 |
39 | .resources-loaded #dialog {
40 | & .content {
41 | background: rgba(0, 0, 0, 0);
42 | transition: background 3s ease-in-out;
43 | }
44 |
45 | & .title {
46 | transition:
47 | transform 3s ease-out,
48 | opacity 3s ease-out;
49 | transform: translateY(0);
50 | opacity: 1;
51 | }
52 |
53 | & .description {
54 | transition: opacity 3s ease-in-out;
55 | opacity: 1;
56 | }
57 |
58 | & #button {
59 | transition: 3s ease-in-out;
60 | transition-delay: 3s;
61 | opacity: 1;
62 | }
63 | }
64 |
65 | .exploration-started {
66 | & #github-link {
67 | opacity: 1 !important;
68 | pointer-events: all;
69 | }
70 | }
71 |
72 | #dialog {
73 | color: white;
74 | background: transparent;
75 | padding: 0;
76 | border: none;
77 | display: flex;
78 | align-items: center;
79 | justify-content: center;
80 | width: 100dvw;
81 | height: 100dvh;
82 | font-weight: 400;
83 | overflow: hidden;
84 |
85 | .exploration-started & {
86 | opacity: 0;
87 | filter: blur(35px);
88 | transition: 3s linear;
89 | transition-property: filter, opacity;
90 | }
91 |
92 | & .content {
93 | display: flex;
94 | flex-direction: column;
95 | justify-content: center;
96 | align-items: center;
97 | background: rgba(0, 0, 0, 1);
98 | width: 100vw;
99 | height: 100vh;
100 | }
101 |
102 | & .description {
103 | position: absolute;
104 | bottom: 1rem;
105 | font-size: min(0.7rem, 2.8vw);
106 | color: rgba(255, 255, 255, 0.5);
107 | opacity: 0;
108 | will-change: opacity;
109 | }
110 |
111 | & .title {
112 | font-family: "Poiret One", sans-serif;
113 | font-weight: 400;
114 | line-height: 4rem;
115 | font-size: min(4rem, 11vw);
116 | padding: 1rem 0;
117 | margin: 0;
118 | transform: translateY(-25%);
119 |
120 | opacity: 0;
121 | will-change: transform, opacity;
122 | }
123 |
124 | & .loader_bar {
125 | width: 100%;
126 | height: 1px;
127 |
128 | &:before {
129 | content: "";
130 | display: block;
131 | width: calc(100% * var(--progress));
132 | opacity: calc(var(--progress) * 0.2);
133 | height: 1px;
134 | background: rgba(255, 255, 255, 0.5);
135 | transition: 1s ease-in-out;
136 | }
137 | }
138 |
139 | & #button {
140 | border: none;
141 | background: transparent;
142 | color: white;
143 | font-family: "Poppins", sans-serif;
144 | text-transform: uppercase;
145 | font-weight: 400;
146 | font-size: 1rem;
147 | padding: 0.09rem 2rem;
148 | cursor: pointer;
149 | opacity: 0;
150 | }
151 |
152 | & .credit {
153 | font-size: min(0.7rem, 2.8vw);
154 |
155 | color: rgba(255, 255, 255, 0.5);
156 |
157 | text-align: center;
158 | }
159 | }
160 |
161 | #github-link {
162 | position: absolute;
163 | top: 20px;
164 | right: 20px;
165 | width: 30px;
166 | height: auto;
167 | opacity: 0;
168 | transition: opacity 1s ease-in-out;
169 | pointer-events: none;
170 |
171 | & img {
172 | width: 100%;
173 | height: 100%;
174 | }
175 | }
176 |
177 | #mouse-helper {
178 | width: 50px;
179 | height: 50px;
180 | position: absolute;
181 | left: 0;
182 | right: 0;
183 | margin: auto;
184 | bottom: 25px;
185 | opacity: 0;
186 | transition: opacity 1s ease-in-out;
187 |
188 | & .left-click {
189 | position: absolute;
190 | left: -60px;
191 | top: -15px;
192 | width: 85px;
193 | border-bottom: 1px solid white;
194 | }
195 |
196 | & .right-click {
197 | position: absolute;
198 | top: -15px;
199 | width: 85px;
200 | right: -60px;
201 | border-bottom: 1px solid white;
202 | text-align: right;
203 | }
204 | & img {
205 | width: 50px;
206 | height: 50px;
207 | }
208 | }
209 |
210 | #audio {
211 | --speed: 1.2s;
212 | width: 30px;
213 | height: 30px;
214 | display: flex;
215 | align-items: center;
216 | justify-content: center;
217 | position: absolute;
218 | gap: 1px;
219 | top: 20px;
220 | left: 20px;
221 | cursor: pointer;
222 | background: none;
223 | border: none;
224 | z-index: 1;
225 | opacity: 0;
226 | transition: opacity 0.4s ease-in-out;
227 |
228 | &.visible {
229 | opacity: 1 !important;
230 | }
231 |
232 | &.muted .bar {
233 | animation-play-state: paused;
234 | }
235 |
236 | & .bar {
237 | width: 3px;
238 | background: white;
239 | height: 20px;
240 |
241 | animation-name: music-bar-anim;
242 | animation-iteration-count: infinite;
243 | animation-duration: 1.3s;
244 | }
245 |
246 | & .bar:nth-child(1) {
247 | animation-duration: calc(var(--speed) + 0.3s);
248 | animation-delay: 0.2s;
249 | }
250 |
251 | & .bar:nth-child(2) {
252 | animation-duration: calc(var(--speed) + 0.8s);
253 | animation-delay: 0.1s;
254 | }
255 |
256 | & .bar:nth-child(3) {
257 | animation-duration: calc(var(--speed) + 1.2s);
258 | animation-delay: 0.3s;
259 | }
260 |
261 | & .bar:nth-child(4) {
262 | animation-duration: calc(var(--speed) + 1s);
263 | animation-delay: 0.15s;
264 | }
265 |
266 | & .bar:nth-child(5) {
267 | animation-duration: calc(var(--speed) + 0.5s);
268 | animation-delay: 0.25s;
269 | }
270 | }
271 |
272 | @keyframes music-bar-anim {
273 | 0% {
274 | transform: scale3d(1, 0.3, 1);
275 | opacity: 0.5;
276 | }
277 | 50% {
278 | transform: scale3d(1, 1, 1);
279 | opacity: 1;
280 | }
281 | 100% {
282 | transform: scale3d(1, 0.3, 1);
283 | opacity: 0.5;
284 | }
285 | }
286 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import "./main.css";
2 | import { Application } from "./application/Application";
3 | import { resources } from "./application/resources/Resources";
4 |
5 | const exploreButton = document.getElementById("button");
6 | const mouseHelper = document.getElementById("mouse-helper");
7 | const dialog = document.getElementById("dialog");
8 |
9 | setProgress(0);
10 |
11 | function setProgress(progress: number) {
12 | document.body.style.setProperty("--progress", progress.toString());
13 | }
14 |
15 | function addBodyClass(className: string) {
16 | document.body.classList.add(className);
17 | }
18 | function explorationStartHandler(
19 | application: Application,
20 | enableTouchInterface = false,
21 | ) {
22 | addBodyClass("exploration-started");
23 |
24 | if (dialog) {
25 | setTimeout(() => {
26 | dialog.style.setProperty("display", "none");
27 | }, 3000);
28 | }
29 | application.experienceStart(enableTouchInterface);
30 | }
31 |
32 | function resourcesLoadedHandler() {
33 | const application = new Application();
34 | application.start();
35 | addBodyClass("resources-loaded");
36 |
37 | exploreButton?.addEventListener("pointerup", (event) => {
38 | if (event.pointerType === "mouse") {
39 | explorationStartHandler(application);
40 | mouseHelper?.style.setProperty("opacity", "1");
41 | } else {
42 | explorationStartHandler(application, true);
43 | }
44 | });
45 | }
46 |
47 | resources.on("loaded", resourcesLoadedHandler);
48 | resources.on("progress", setProgress);
49 |
--------------------------------------------------------------------------------
/static/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/android-chrome-192x192.png
--------------------------------------------------------------------------------
/static/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/android-chrome-512x512.png
--------------------------------------------------------------------------------
/static/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/apple-touch-icon.png
--------------------------------------------------------------------------------
/static/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/favicon-16x16.png
--------------------------------------------------------------------------------
/static/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/favicon-32x32.png
--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/favicon.ico
--------------------------------------------------------------------------------
/static/fonts/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright @ 2004 by MAGENTA Ltd. All Rights Reserved.
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of the fonts accompanying this license ("Fonts") and associated documentation files (the "Font Software"), to reproduce and distribute the Font Software, including without limitation the rights to use, copy, merge, publish, distribute, and/or sell copies of the Font Software, and to permit persons to whom the Font Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright and this permission notice shall be included in all copies of one or more of the Font Software typefaces.
6 |
7 | The Font Software may be modified, altered, or added to, and in particular the designs of glyphs or characters in the Fonts may be modified and additional glyphs or characters may be added to the Fonts, only if the fonts are renamed to names not containing the word "MgOpen", or if the modifications are accepted for inclusion in the Font Software itself by the each appointed Administrator.
8 |
9 | This License becomes null and void to the extent applicable to Fonts or Font Software that has been modified and is distributed under the "MgOpen" name.
10 |
11 | The Font Software may be sold as part of a larger software package but no copy of one or more of the Font Software typefaces may be sold by itself.
12 |
13 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL MAGENTA OR PERSONS OR BODIES IN CHARGE OF ADMINISTRATION AND MAINTENANCE OF THE FONT SOFTWARE BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE.
14 |
--------------------------------------------------------------------------------
/static/images/github-mark.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/static/images/mouse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/images/mouse.png
--------------------------------------------------------------------------------
/static/images/social.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/images/social.png
--------------------------------------------------------------------------------
/static/libs/draco/README.md:
--------------------------------------------------------------------------------
1 | # Draco 3D Data Compression
2 |
3 | Draco is an open-source library for compressing and decompressing 3D geometric meshes and point clouds. It is intended to improve the storage and transmission of 3D graphics.
4 |
5 | [Website](https://google.github.io/draco/) | [GitHub](https://github.com/google/draco)
6 |
7 | ## Contents
8 |
9 | This folder contains three utilities:
10 |
11 | * `draco_decoder.js` — Emscripten-compiled decoder, compatible with any modern browser.
12 | * `draco_decoder.wasm` — WebAssembly decoder, compatible with newer browsers and devices.
13 | * `draco_wasm_wrapper.js` — JavaScript wrapper for the WASM decoder.
14 |
15 | Each file is provided in two variations:
16 |
17 | * **Default:** Latest stable builds, tracking the project's [master branch](https://github.com/google/draco).
18 | * **glTF:** Builds targeted by the [glTF mesh compression extension](https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_draco_mesh_compression), tracking the [corresponding Draco branch](https://github.com/google/draco/tree/gltf_2.0_draco_extension).
19 |
20 | Either variation may be used with `THREE.DRACOLoader`:
21 |
22 | ```js
23 | var dracoLoader = new THREE.DRACOLoader();
24 | dracoLoader.setDecoderPath('path/to/decoders/');
25 | dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.
26 | ```
27 |
28 | Further [documentation on GitHub](https://github.com/google/draco/tree/master/javascript/example#static-loading-javascript-decoder).
29 |
30 | ## License
31 |
32 | [Apache License 2.0](https://github.com/google/draco/blob/master/LICENSE)
33 |
--------------------------------------------------------------------------------
/static/libs/draco/draco_decoder.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/libs/draco/draco_decoder.wasm
--------------------------------------------------------------------------------
/static/libs/draco/gltf/draco_decoder.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/libs/draco/gltf/draco_decoder.wasm
--------------------------------------------------------------------------------
/static/models/character.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/models/character.glb
--------------------------------------------------------------------------------
/static/models/map.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/models/map.glb
--------------------------------------------------------------------------------
/static/models/plank_1.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/models/plank_1.glb
--------------------------------------------------------------------------------
/static/models/submarine.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/models/submarine.glb
--------------------------------------------------------------------------------
/static/site.webmanifest:
--------------------------------------------------------------------------------
1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#000000","background_color":"#000000","display":"standalone"}
--------------------------------------------------------------------------------
/static/sounds/bigimpact.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/sounds/bigimpact.mp3
--------------------------------------------------------------------------------
/static/sounds/engine.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/sounds/engine.mp3
--------------------------------------------------------------------------------
/static/sounds/impactmetal.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/sounds/impactmetal.mp3
--------------------------------------------------------------------------------
/static/sounds/impactwave.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/sounds/impactwave.mp3
--------------------------------------------------------------------------------
/static/sounds/music.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/sounds/music.mp3
--------------------------------------------------------------------------------
/static/sounds/powerload.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/sounds/powerload.mp3
--------------------------------------------------------------------------------
/static/textures/beam.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/textures/beam.png
--------------------------------------------------------------------------------
/static/textures/beam2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/textures/beam2.png
--------------------------------------------------------------------------------
/static/textures/enter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/textures/enter.png
--------------------------------------------------------------------------------
/static/textures/flashlight.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/textures/flashlight.png
--------------------------------------------------------------------------------
/static/textures/light_01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Unruly-Coder/portfolio/cd06ee7d8a4eb05fc8e84a8227028757a1ee5283/static/textures/light_01.png
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Visit https://aka.ms/tsconfig to read more about this file */
4 |
5 | /* Projects */
6 | // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
7 | // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
8 | // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
9 | // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
10 | // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
11 | // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
12 |
13 | /* Language and Environment */
14 | "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
15 | // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
16 | // "jsx": "preserve", /* Specify what JSX code is generated. */
17 | // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
18 | // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
19 | // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
20 | // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
21 | // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
22 | // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
23 | // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
24 | // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
25 | // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
26 |
27 | /* Modules */
28 | "module": "ES2020", /* Specify what module code is generated. */
29 | // "rootDir": "./", /* Specify the root folder within your source files. */
30 | "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
31 | // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
32 | // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
33 | // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
34 | // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
35 | "types": ["vite-plugin-glsl/ext"], /* Specify type package names to be included without being referenced in a source file. */
36 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
37 | // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
38 | // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
39 | // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
40 | // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
41 | // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
42 | // "resolveJsonModule": true, /* Enable importing .json files. */
43 | // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
44 | // "noResolve": true, /* Disallow 'import's, 'require's or '