- 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

View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* map.js :+: :+: :+: */ /* map.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:51 by edbernar #+# #+# */ /* 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 */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */

View File

@ -6,10 +6,13 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */ /* 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 : Explication du code :
- Un seul joueur peut etre instancié, sinon ça throw une erreur - Un seul joueur peut etre instancié, sinon ça throw une erreur
@ -18,12 +21,17 @@
- Les lignes avec cleanup sont l'êquivalent d'un destructeur en CPP - 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 - 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" 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) : 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; let playerExist = false;
@ -31,11 +39,23 @@ let playerExist = false;
class Player class Player
{ {
pressedButton = []; pressedButton = [];
constructor (object) object = null;
camera = null;
speed = 0.05;
cameraFixed = false;
orbital = null;
constructor (object, renderer)
{ {
if (playerExist) if (playerExist)
throw Error("Player is already init."); throw Error("Player is already init.");
playerExist = true; 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) => { this.cleanup = new FinalizationRegistry((heldValue) => {
playerExist = false; playerExist = false;
}) })
@ -60,6 +80,21 @@ class Player
if (i != this.pressedButton.length) if (i != this.pressedButton.length)
this.pressedButton.splice(i, 1); 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() update()
@ -67,13 +102,35 @@ class Player
let i; let i;
i = 0; 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) 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++; i++;
} }
} }
setCameraPosition(x, y, z)
{
this.camera.position.set(x, y, z);
}
}; };

View File

@ -6,14 +6,44 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ /* 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);
}
function loop()
{
// controls.update();
player.update(); player.update();
}, 100); 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)