diff --git a/package.json b/package.json
index f8d0932..fe2c947 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,16 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@react-three/drei": "^9.57.2",
+ "@react-three/fiber": "^8.12.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
+ "@types/three": "^0.149.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
+ "three": "^0.150.1",
"web-vitals": "^2.1.4"
},
"scripts": {
diff --git a/src/App.css b/src/App.css
index 74b5e05..4c6197d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
+/* Add styles here */
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 3784575..4fe6c4b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,32 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+
+import { Canvas } from '@react-three/fiber'
+import { OrbitControls, Environment } from '@react-three/drei'
+
+import space from './space.hdr'
+
+// Import styles
+import './App.css'
function App() {
- return (
-
- );
-}
+ return (
+ <>
+
+ >
+ );
+};
-export default App;
+export default React.memo(App);
diff --git a/src/components/CubeMesh.js b/src/components/CubeMesh.js
new file mode 100644
index 0000000..7651388
--- /dev/null
+++ b/src/components/CubeMesh.js
@@ -0,0 +1 @@
+// Create the CubeMesh component
\ No newline at end of file
diff --git a/src/components/GameInfo.js b/src/components/GameInfo.js
new file mode 100644
index 0000000..c36c4d9
--- /dev/null
+++ b/src/components/GameInfo.js
@@ -0,0 +1 @@
+// Create the GameInfo component
\ No newline at end of file
diff --git a/src/components/GridBox.js b/src/components/GridBox.js
new file mode 100644
index 0000000..d024c2f
--- /dev/null
+++ b/src/components/GridBox.js
@@ -0,0 +1 @@
+// Create the GridBox component
\ No newline at end of file
diff --git a/src/components/GridLine.js b/src/components/GridLine.js
new file mode 100644
index 0000000..323c3c5
--- /dev/null
+++ b/src/components/GridLine.js
@@ -0,0 +1 @@
+// Create the GridLine component
\ No newline at end of file
diff --git a/src/components/SphereMesh.js b/src/components/SphereMesh.js
new file mode 100644
index 0000000..b8599b5
--- /dev/null
+++ b/src/components/SphereMesh.js
@@ -0,0 +1 @@
+// Create the SphereMesh component
\ No newline at end of file
diff --git a/src/components/WinnerLine.js b/src/components/WinnerLine.js
new file mode 100644
index 0000000..b106da2
--- /dev/null
+++ b/src/components/WinnerLine.js
@@ -0,0 +1 @@
+// Create the WinnerLine component
\ No newline at end of file
diff --git a/src/components/sphere_texture.jpeg b/src/components/sphere_texture.jpeg
new file mode 100644
index 0000000..1e8bed5
Binary files /dev/null and b/src/components/sphere_texture.jpeg differ
diff --git a/src/index.css b/src/index.css
index ec2585e..a392569 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,12 @@
+html,
+body,
+#root {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -11,3 +20,4 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
+
diff --git a/src/space.hdr b/src/space.hdr
new file mode 100644
index 0000000..9956568
--- /dev/null
+++ b/src/space.hdr
@@ -0,0 +1,7096 @@
+#?RGBE
+GAMMA=0.454545
+PRIMARIES=0.64 0.33 0.3 0.6 0.15 0.06 0.3127 0.329
+FORMAT=32-bit_rle_rgbe
+
+-Y 1080 +X 1920
+,0,,(,,(,448444,40((0400,(((,(,0(,00$ $$,,00(((,(,(,,,((,,(,,,($,4P4,(0,,$(00,(,,,0((440,,,((,,440004(($$("0,4(@00(,,(,,,(H@H((PP`PPHH@@@HH@@H@8@8@@HH@@@88HHH@H@@H@HHPH@80888@@HH8(8,@@@HHH@8PHH@8@HH8H 8|TH@88@XP@,\T$@H8@H@@HHH@8@PH@@88088H(,HH((HH(HH,,,P,0,PP,PHP,,,HHP,,((H
+PPHPHHH@8(PHP,,PH@PPH4`XXPPHHPHHPP``PHP,PHHPPHHP,P,PHH@@@HH`P8@HH@H8(