- Ajout d'un océan.

- Ajout d'un personnage manequin.
--> *Modèle 3D du manequin inclus*
- Ajout d'une représentation des axes x,y,z.
- Ajout d'une entité Marker pour mettre des markers sur le manequin.
- Maj du CSS de GamePage.tsx

front/src/pages/GamePage.tsx

@@ -3,26 +3,46 @@ import { OrbitControls, Sky } from "@react-three/drei";
 import * as THREE from "three";
 import { useEffect, useRef } from "react";
 import Ocean from "../components/3d/Ocean";
+import Axes from "../components/3d/Axes";
+import Character from "../components/3d/Character";
+import Floor from "../components/3d/Floor";
+import Marker from "../components/3d/Marker";
 
 
+const MakerList = [
+    { position: [0, 0.1, 0], color: "red", onClick: () => console.log("red") }, // body
+    { position: [-0.5, 0.1, 2.5], color: "green", onClick: () => console.log("green") }, // left foot
+    { position: [0.5, 0.1, 2.5], color: "blue", onClick: () => console.log("blue") }, // right foot
+    { position: [-1, 0.1, 1], color: "yellow", onClick: () => console.log("yellow") }, // left hand
+    { position: [1, 0.1, 1], color: "purple", onClick: () => console.log("purple") }, // right hand
+    { position: [0, 0.1, -1], color: "orange", onClick: () => console.log("orange") }, // head
+]
 
 
 export default function GamePage() {
     return (
-        <div id="canvas-container">
+        <div id="canvas-container"
+            style={{
+                width: "100%",
+                height: "100%",
+                position: "fixed",
+                top: 0,
+                left: 0,
+                zIndex: -1
+            }}
+            >
             <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>
-
+                <Sky sunPosition={[100, 10, 100]} />
                 <OrbitControls />
                 <Ocean />
+                <Axes />
+                <Character />
+                <Floor />
+                {/* <Marker position={[0, 1, 0]} color="red" /> */}
+                {MakerList.map((marker, index) => (
+                    <Marker key={index} position={marker.position} color={marker.color} onClick={marker.onClick} />
+                ))}
+                
             </Canvas>
         </div>
     )