Game

- Added 2 mods on cameras

site/game/map.js

@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   map.js                                             :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: hubourge <hubourge@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/30 13:50:51 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/08 15:36:48 by hubourge         ###   ########.fr       */
+/*   Updated: 2024/08/18 15:20:26 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 

site/real_game/class/Player.js

@@ -6,10 +6,13 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:30:31 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/18 01:47:15 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/18 16:17:18 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+import * as THREE from 'three';
+
 /*
 	Explication du code :
 		- Un seul joueur peut etre instancié, sinon ça throw une erreur
@@ -18,24 +21,41 @@
 		- Les lignes avec cleanup sont l'êquivalent d'un destructeur en CPP
 		- Pour appliquer des actions sur les touches, il suffit de faire ça dans la fonction
 		  update en regardant si la touche voulue est pressée dans la variable "pressedButton"
+		- Par défaut, la caméra est accroché, si on veut qu'elle ne bouge plus, il faut
+		  modifier "cameraFixed" à true
+		- Si on utilise une touche qui ne sera utilisée que pour un appui simple, il faudra la
+		  mettre dans 'addEventListerner('keypress') et pas dans update()
 */
 
 /*
 	Todo (Eddy) :
-		- Ajouter une camera sur l'object
+		- Ajouter une camera sur l'object (OK)
-		- Faire une fonction pour changer le mode de la camera (fix ou accrochée)
+		- Faire une fonction pour changer le mode de la camera (fix ou accrochée) (OK)
+		- Ajouter une rotation quand la caméra est fixe (OK)
 */
 
 let playerExist = false;
 
 class Player
 {
-	pressedButton = [];
+	pressedButton	= [];
-	constructor (object)
+	object			= null;
+	camera			= null;
+	speed			= 0.05;
+	cameraFixed		= false;
+	orbital			= null;
+
+	constructor (object, renderer)
 	{
 		if (playerExist)
 			throw Error("Player is already init.");
 		playerExist = true;
+		this.object = object;
+		this.camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);
+		this.orbital = new OrbitControls(this.camera, renderer.domElement);
+
+		this.orbital.enableZoom = false;
+
 		this.cleanup = new FinalizationRegistry((heldValue) => {
 			playerExist = false;
 		})
@@ -60,6 +80,21 @@ class Player
 			if (i != this.pressedButton.length)
 				this.pressedButton.splice(i, 1);
 		});
+
+		document.addEventListener('keypress', (e) => {
+			if (e.key == 'm')
+			{
+				this.cameraFixed = !this.cameraFixed;
+				if (!this.cameraFixed)
+					this.setCameraPosition(
+						this.object.position.x,
+						this.object.position.y + 0.5,
+						this.object.position.z + 1
+					);
+				else
+					this.setCameraPosition(0, 1, 1)
+			}
+		});
 	}
 
 	update()
@@ -67,13 +102,35 @@ class Player
 		let i;
 
 		i = 0;
+		if (this.cameraFixed)
+		{
+			this.orbital.target = new THREE.Vector3(this.object.position.x, this.object.position.y, this.object.position.z - 5);
+			this.orbital.update();
+		}
+		else
+			this.camera.rotation.set(0, 0, 0);
 		while (i < this.pressedButton.length)
 		{
-			if (this.pressedButton[i] == 'a')
+			if (this.pressedButton[i] == 'w' || this.pressedButton[i] == 's')
-				console.log('A is pressed !');
+			{
+				this.object.position.y += (this.pressedButton[i] == 'w' ? this.speed : -this.speed);
+				if (!this.cameraFixed)
+					this.camera.position.y += (this.pressedButton[i] == 'w' ? this.speed : -this.speed);
+			}
+			if (this.pressedButton[i] == 'a' || this.pressedButton[i] == 'd')
+			{
+				this.object.position.x += (this.pressedButton[i] == 'a' ? -this.speed : this.speed);
+				if (!this.cameraFixed)
+					this.camera.position.x += (this.pressedButton[i] == 'a' ? -this.speed : this.speed);
+			}
 			i++;
 		}
 	}
+
+	setCameraPosition(x, y, z)
+	{
+		this.camera.position.set(x, y, z);
+	}
 };
 
 

site/real_game/main.js

@@ -6,14 +6,44 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/18 00:53:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/18 01:09:38 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/18 15:52:03 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
-import { Player } from './Player'
+import * as THREE from 'three';
+import { Player } from './class/Player'
 
-const player = new Player(null);
+function createBarPlayer(color)
+{
+	const geometry	= new THREE.BoxGeometry(1, 0.1, 0.1);
+	const material	= new THREE.MeshPhysicalMaterial({color: color});
+	const mesh		= new THREE.Mesh(geometry, material);
 
-setInterval(() => {
+	return (mesh);
-    player.update();
+}
-}, 100);
+
+function loop()
+{
+	// controls.update();
+	player.update();
+	renderer.render(scene, player.camera);
+}
+
+
+const scene			= new THREE.Scene();
+const bar			= createBarPlayer(0xed56ea);
+const renderer		= new THREE.WebGLRenderer();
+const player		= new Player(bar, renderer);
+const spotLight		= new THREE.SpotLight(0xffffff, 1, 0, Math.PI / 4);
+const helper		= new THREE.SpotLightHelper(spotLight);
+// const controls		= new OrbitControls(player.camera, renderer.domElement);
+
+scene.add(player.object);
+spotLight.target = player.object;
+scene.add(spotLight);
+scene.add(helper);
+scene.background = new THREE.Color(0x1a1a1a);
+renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
+player.setCameraPosition(0, 0.5, 1)
+renderer.setAnimationLoop(loop)