diff --git a/front/public/models/man.glb b/front/public/models/man.glb
new file mode 100644
index 0000000..abd24f6
Binary files /dev/null and b/front/public/models/man.glb differ
diff --git a/front/src/components/3d/Axes.tsx b/front/src/components/3d/Axes.tsx
new file mode 100644
index 0000000..195e266
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/front/src/components/3d/Character.tsx b/front/src/components/3d/Character.tsx
new file mode 100644
index 0000000..f6d7d66
--- /dev/null
+++ b/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 (
+
+
+
+
+ )
+
+
+}
\ No newline at end of file
diff --git a/front/src/components/3d/Floor.tsx b/front/src/components/3d/Floor.tsx
new file mode 100644
index 0000000..dbb054b
--- /dev/null
+++ b/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
+}
\ No newline at end of file
diff --git a/front/src/components/3d/Marker.tsx b/front/src/components/3d/Marker.tsx
new file mode 100644
index 0000000..3509e53
--- /dev/null
+++ b/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
+ return (
+
+
+
+
+ )
+}
diff --git a/front/src/components/3d/Ocean.tsx b/front/src/components/3d/Ocean.tsx
index 63981b4..6b9d8cf 100644
--- a/front/src/components/3d/Ocean.tsx
+++ b/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(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 (
-
);
diff --git a/front/src/components/Modal.tsx b/front/src/components/Modal.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/front/src/pages/GamePage.tsx b/front/src/pages/GamePage.tsx
index c1eb1e9..c7c3d04 100644
--- a/front/src/pages/GamePage.tsx
+++ b/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 (
-
+
)