- 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/Axes.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { LineBasicMaterial, Line, Group } from 'three'
+import { useFrame } from '@react-three/fiber'
+import * as THREE from 'three'
+
+export default function Axes() {
+    const axes = new Group()
+
+    const x = new Line(
+        new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0),
+        new THREE.Vector3(100, 0, 0)]), 
+        new LineBasicMaterial({ color: 0xff0000 }) // red
+    )
+    const y = new Line(
+        new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0), 
+        new THREE.Vector3(0, 100, 0)]), 
+        new LineBasicMaterial({ color: 0x00ff00 }) // green
+    )
+    const z = new Line(
+        new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0), 
+        new THREE.Vector3(0, 0, 100)]), 
+        new LineBasicMaterial({ color: 0x0000ff }) // blue
+    )
+
+    axes.add(x)
+    axes.add(y)
+    axes.add(z)
+
+
+    return <primitive object={axes} />
+}

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

@@ -0,0 +1,25 @@
+import { Group, Mesh, MeshStandardMaterial, BufferGeometry } from 'three'
+import { useGLTF } from '@react-three/drei'
+
+export default function Character() {
+    // import glb file
+
+    // load the glb file in "/models/BASEmodel.glb"
+    const { nodes, materials, scene } = useGLTF('/models/man.glb')
+    
+    // rotate the character
+    scene.rotation.x = -Math.PI / 2
+    scene.rotation.y = 0
+
+    // enfoncer le personnage dans le sol
+    scene.position.y = -1
+
+    return (
+        <group>
+            <primitive object={scene} />
+            <directionalLight position={[0, 10, 0]} intensity={5} />
+        </group>
+    )
+
+    
+}

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

@@ -0,0 +1,20 @@
+
+import React from 'react'
+import { Group } from 'three'
+import * as THREE from 'three'
+
+
+export default function Floor() {
+    const floor = new Group()
+
+    const floorGeometry = new THREE.PlaneGeometry(100, 100, 100, 100)
+    const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, side: THREE.DoubleSide })
+    const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial)
+
+    floorMesh.rotation.x = -Math.PI / 2
+    floorMesh.position.y = -2
+
+    floor.add(floorMesh)
+
+    return <primitive object={floor} />
+}

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Group } from 'three'
+import * as THREE from 'three'
+
+interface MarkerProps {
+    position: [number, number, number],
+    color: string,
+    onClick?: () => void
+}
+
+export default function Marker({ position, color, onClick }: MarkerProps) {
+
+    
+
+    // Return the marker object
+    // return <primitive object={marker}  />
+    return (
+        <mesh position={position} rotation={[Math.PI, 0, 0]} onClick={onClick}>
+            <coneGeometry args={[0.15, 0.6, 6]} />
+            <meshStandardMaterial color={color} side={THREE.DoubleSide} />
+        </mesh>
+    )
+}

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>
     );

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>
-
                 <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>
     )