front/package.json

@@ -10,9 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-three/drei": "^9.120.0",
+    "@react-three/fiber": "^8.17.10",
+    "@types/three": "^0.170.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^7.0.2"
+    "react-router": "^7.0.2",
+    "three": "^0.171.0",
+    "three-stdlib": "^2.34.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",

front/src/components/3d/Ocean.tsx

@@ -0,0 +1,49 @@
+// src/components/Ocean.tsx
+import React, { useEffect, useRef } from 'react';
+import * as THREE from 'three';
+import { Water } from 'three/examples/jsm/objects/Water.js';
+
+const Ocean: React.FC = () => {
+
+    const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
+    const waterOption = {
+        textureWidth: 512,
+        textureHeight: 512,
+        waterNormals: new THREE.TextureLoader().load('https://threejs.org/examples/textures/waternormals.jpg', function (texture) {
+            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+        }),
+        alpha: 1.0,
+        sunDirection: new THREE.Vector3(),
+        sunColor: 0xffffff,
+        waterColor: 0x001e0f,
+        distortionScale: 3.7,
+        fog: false,
+    };
+    const water = new Water(waterGeometry, waterOption);
+    water.rotation.x = -Math.PI / 2;
+
+    const waterRef = useRef<THREE.Mesh>(null);
+    useEffect(() => {
+        if (waterRef.current) {
+            waterRef.current.add(water);
+        }
+    }, [waterRef]);
+    
+
+    useEffect(() => {
+        const animate = () => {
+            requestAnimationFrame(animate);
+            water.material.uniforms['time'].value += 1.0 / 60.0;
+        };
+        animate();
+    }, []);
+
+    return (
+        <mesh ref={waterRef}>
+            <boxGeometry args={[1, 1, 1]} />
+            <meshStandardMaterial />
+        </mesh>
+    );
+};
+
+export default Ocean;

front/src/main.tsx

@@ -2,7 +2,7 @@ import { BrowserRouter, Route, Routes } from "react-router";
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
-import MainPage from "./pages/MainPage.tsx";
+import MainPage from "./pages/main.tsx";
 import GamePage from "./pages/GamePage.tsx";
 
 

front/src/pages/GamePage.tsx

@@ -1,9 +1,29 @@
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls, Sky } from "@react-three/drei";
+import * as THREE from "three";
+import { useEffect, useRef } from "react";
+import Ocean from "../components/3d/Ocean";
+
+
+
 
 export default function GamePage() {
     return (
-        <div>
-            <h1>Game Page</h1>
+        <div id="canvas-container">
+            <Canvas>
+                <mesh position={[0, 0, 0]} scale={[1, 1, 1]}>
+                    <boxGeometry args={[1, 1, 1]} />
+                    <meshStandardMaterial />
+                    <ambientLight intensity={0.5} />
+                    <directionalLight color="red" position={[5, 5, 5]} />
+                    <Sky sunPosition={[100, 10, 100]} />
+                    
+                    
+                </mesh>
+
+                <OrbitControls />
+                <Ocean />
+            </Canvas>
         </div>
     )
 }
-