Skip to content

Commit abd46fc

Browse files
SadmanYasarSadmanYasar
committed
init
0 parents  commit abd46fc

23 files changed

+3436
-0
lines changed

‎.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Metal Gear Solid Scene made with React Three Fiber and Theatre.js
2+
3+
## Installation
4+
5+
Install dependencies:
6+
7+
```
8+
yarn
9+
```
10+
11+
Compile the code for development and start a local server:
12+
13+
```
14+
yarn dev
15+
```
16+
17+
Create the build:
18+
19+
```
20+
yarn build
21+
```
22+

‎css/base.css

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
*,
2+
*::after,
3+
*::before {
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
font-size: 14px;
9+
--color-text: #fff;
10+
--color-bg: #000;
11+
--color-link: #fff;
12+
--color-link-hover: #fff;
13+
}
14+
15+
body {
16+
margin: 0;
17+
color: var(--color-text);
18+
background-color: var(--color-bg);
19+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
20+
sans-serif;
21+
-webkit-font-smoothing: antialiased;
22+
-moz-osx-font-smoothing: grayscale;
23+
font-weight: 500;
24+
}
25+
26+
html {
27+
overflow: scroll;
28+
overflow-x: hidden;
29+
}
30+
::-webkit-scrollbar {
31+
width: 0; /* Remove scrollbar space */
32+
background: transparent; /* Optional: just make scrollbar invisible */
33+
}
34+
/* Optional: show position indicator in red */
35+
::-webkit-scrollbar-thumb {
36+
background: #ff0000;
37+
}
38+
39+
/* Page Loader */
40+
.js .loading::before,
41+
.js .loading::after {
42+
content: "";
43+
position: fixed;
44+
z-index: 1000;
45+
}
46+
47+
.js .loading::before {
48+
top: 0;
49+
left: 0;
50+
width: 100%;
51+
height: 100%;
52+
background: var(--color-bg);
53+
}
54+
55+
.js .loading::after {
56+
top: 50%;
57+
left: 50%;
58+
width: 60px;
59+
height: 60px;
60+
margin: -30px 0 0 -30px;
61+
border-radius: 50%;
62+
opacity: 0.4;
63+
background: var(--color-link);
64+
animation: loaderAnim 0.7s linear infinite alternate forwards;
65+
}
66+
67+
@keyframes loaderAnim {
68+
to {
69+
opacity: 1;
70+
transform: scale3d(0.5, 0.5, 1);
71+
}
72+
}
73+
74+
a {
75+
text-decoration: none;
76+
color: var(--color-link);
77+
outline: none;
78+
cursor: pointer;
79+
}
80+
81+
a:hover {
82+
color: var(--color-link-hover);
83+
outline: none;
84+
}
85+
86+
/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
87+
a:focus {
88+
/* Provide a fallback style for browsers
89+
that don't support :focus-visible */
90+
outline: none;
91+
background: lightgrey;
92+
}
93+
94+
a:focus:not(:focus-visible) {
95+
/* Remove the focus indicator on mouse-focus for browsers
96+
that do support :focus-visible */
97+
background: transparent;
98+
}
99+
100+
a:focus-visible {
101+
/* Draw a very noticeable focus style for
102+
keyboard-focus on browsers that do support
103+
:focus-visible */
104+
outline: 2px solid red;
105+
background: transparent;
106+
}
107+
108+
.unbutton {
109+
background: none;
110+
border: 0;
111+
padding: 0;
112+
margin: 0;
113+
font: inherit;
114+
cursor: pointer;
115+
}
116+
117+
.unbutton:focus {
118+
outline: none;
119+
}
120+
121+
.frame {
122+
position: fixed;
123+
top: 0rem;
124+
left: 1rem;
125+
right: 1rem;
126+
display: flex;
127+
flex-direction: column;
128+
gap: 0.5rem;
129+
align-items: start;
130+
color: var(--color-title);
131+
padding: 1rem 2rem;
132+
z-index: 10;
133+
background: rgba(255, 255, 255, 0.24);
134+
border-radius: 0 0 10px 10px;
135+
box-shadow: 1px 4px 7px rgba(0, 0, 0, 0.05);
136+
}
137+
138+
.frame a:not(.frame__title-back) {
139+
white-space: nowrap;
140+
overflow: hidden;
141+
position: relative;
142+
}
143+
144+
.frame a:not(.frame__title-back)::before {
145+
content: "";
146+
height: 1px;
147+
width: 100%;
148+
background: currentColor;
149+
position: absolute;
150+
top: 90%;
151+
transition: transform 0.3s;
152+
transform-origin: 0% 50%;
153+
}
154+
155+
.frame a:not(.frame__title-back):hover::before {
156+
transform: scaleX(0);
157+
transform-origin: 100% 50%;
158+
}
159+
160+
.frame__title {
161+
grid-area: title;
162+
display: flex;
163+
}
164+
165+
.frame__title-main {
166+
font-size: 1rem;
167+
margin: 0;
168+
font-weight: inherit;
169+
}
170+
171+
.frame__title-back {
172+
position: relative;
173+
display: flex;
174+
align-items: flex-end;
175+
}
176+
177+
.frame__title-back span {
178+
display: none;
179+
}
180+
181+
.frame__title-back svg {
182+
fill: currentColor;
183+
}
184+
185+
.frame__prev {
186+
grid-area: prev;
187+
}
188+
189+
@media screen and (min-width: 53em) {
190+
.frame {
191+
display: grid;
192+
grid-template-columns: auto auto 1fr;
193+
grid-template-rows: auto;
194+
grid-template-areas: "title prev sponsor";
195+
justify-content: start;
196+
grid-gap: 5vw;
197+
}
198+
}

‎favicon.ico

14.7 KB
Binary file not shown.

‎index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="no-js">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<title>MGS - Experience</title>
8+
<meta name="description"
9+
content="Metal Gear Solid Scrollable Environment made with React Three Fiber and Theatre.js by Sadman Yasar Sayem, freelancer on Upwork" />
10+
<meta name="keywords" content="theatre.js, fly-through, 3d, react three fiber, Upwork" />
11+
<meta name="author" content="Sadman Yasar Sayem" />
12+
<link rel="shortcut icon" href="favicon.ico" />
13+
<link rel="stylesheet" type="text/css" href="css/base.css" />
14+
<script>
15+
document.documentElement.className = "js";
16+
var supportsCssVars = function () {
17+
var e,
18+
t = document.createElement("style");
19+
return (
20+
(t.innerHTML = "root: { --tmp-var: bold; }"),
21+
document.head.appendChild(t),
22+
(e = !!(
23+
window.CSS &&
24+
window.CSS.supports &&
25+
window.CSS.supports("font-weight", "var(--tmp-var)")
26+
)),
27+
t.parentNode.removeChild(t),
28+
e
29+
);
30+
};
31+
supportsCssVars() ||
32+
alert(
33+
"Please view this demo in a modern browser that supports CSS Variables."
34+
);
35+
</script>
36+
</head>
37+
38+
<body class="demo-1">
39+
<main>
40+
<div id="root"></div>
41+
</main>
42+
<script type="module" src="/src/main.jsx"></script>
43+
</body>
44+
45+
</html>

‎package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "camera-animation",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@react-three/drei": "^9.56.20",
13+
"@react-three/fiber": "^8.11.0",
14+
"@theatre/core": "^0.6.0",
15+
"@theatre/r3f": "^0.6.0",
16+
"@theatre/studio": "^0.6.0",
17+
"@types/lodash": "^4.14.195",
18+
"lodash": "^4.17.21",
19+
"react": "^18.2.0",
20+
"react-dom": "^18.2.0",
21+
"three": "^0.149.0"
22+
},
23+
"devDependencies": {
24+
"@vitejs/plugin-react": "^3.1.0",
25+
"autoprefixer": "^10.4.14",
26+
"postcss": "^8.4.27",
27+
"tailwindcss": "^3.3.3",
28+
"typescript": "^4.9.3",
29+
"vite": "^4.1.0"
30+
}
31+
}

‎postcss.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎public/chibi_gear_solid.glb

2.64 MB
Binary file not shown.

‎public/dialog.gif

97.9 KB
Loading

‎public/metal-gear-solid-pixel-snake.gif

1.92 MB
Loading

‎public/star3.png

8.13 KB
Loading

0 commit comments

Comments
 (0)