- 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/components/3d/Ocean.tsx

@@ -1,26 +1,31 @@
 // src/components/Ocean.tsx
 import React, { useEffect, useRef } from 'react';
 import * as THREE from 'three';
-import { Water } from 'three/examples/jsm/objects/Water.js';
+import { Water, WaterOptions } from 'three/examples/jsm/objects/Water.js';
+import { WaterMesh, WaterMeshOptions } from 'three/examples/jsm/objects/Water2Mesh.js';
 
 const Ocean: React.FC = () => {
 
     const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
-    const waterOption = {
+    const waterOption:WaterOptions = {
         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,
+        alpha: 0.9,
         sunDirection: new THREE.Vector3(),
         sunColor: 0xffffff,
-        waterColor: 0x001e0f,
+        waterColor: '#001e0f',
         distortionScale: 3.7,
-        fog: false,
+        fog: true,
+        
+
     };
     const water = new Water(waterGeometry, waterOption);
     water.rotation.x = -Math.PI / 2;
+    water.position.y = -1;
+
 
     const waterRef = useRef<THREE.Mesh>(null);
     useEffect(() => {
@@ -33,14 +38,13 @@ const Ocean: React.FC = () => {
     useEffect(() => {
         const animate = () => {
             requestAnimationFrame(animate);
-            water.material.uniforms['time'].value += 1.0 / 60.0;
+            water.material.uniforms['time'].value += 0.1 / 60.0;
         };
         animate();
     }, []);
 
     return (
         <mesh ref={waterRef}>
-            <boxGeometry args={[1, 1, 1]} />
             <meshStandardMaterial />
         </mesh>
     );