- implémentation de threejs.

- Création environnement 3D océan.

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;