tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Game

Browse Source 
- Added 2 mods on cameras
This commit is contained in:
Kum1ta
2024-08-18 16:19:27 +02:00
parent eeebacf335
commit 8da97c8e60
3 changed files with 102 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
site/game/map.js
View File

@ -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 */
/* */
/* ************************************************************************** */

71
site/real_game/class/Player.js
View File

@ -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
- Faire une fonction pour changer le mode de la camera (fix ou accrochée)
- Ajouter une camera sur l'object (OK)
- 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 = [];
constructor (object)
pressedButton = [];
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')
console.log('A is pressed !');
if (this.pressedButton[i] == 'w' || this.pressedButton[i] == 's')
{
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);
}
};

42
site/real_game/main.js
View File

@ -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(() => {
player.update();
}, 100);
return (mesh);
}
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)