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

Merge

Browse Source
This commit is contained in:
hubourge
2024-08-28 19:10:28 +02:00
parent ce5fc3221e
commit 250d7dd6db
2 changed files with 162 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
site/real_game/class/MultiGame.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* MultiGame.js :+: :+: :+: */ /* MultiGame.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ /* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */
/* Updated: 2024/08/28 14:07:25 by edbernar ### ########.fr */ /* Updated: 2024/08/28 16:34:39 by hubourge ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -50,7 +50,7 @@ let ball = null;
let renderer = null; let renderer = null;
let player = null; let player = null;
let spotLight = null; let spotLight = null;
let ambiantLight = null; let ambiantLight = null;
let opponent = null; let opponent = null;
// ------------------- (need to be remove) -------------------- // // ------------------- (need to be remove) -------------------- //
@ -98,7 +98,7 @@ class MultiGame
cameraTmp.position.set(5, 3, 5); cameraTmp.position.set(5, 3, 5);
controls.target = new THREE.Vector3(map.centerPos.x, 0, map.centerPos.z); controls.target = new THREE.Vector3(map.centerPos.x, 0, map.centerPos.z);
document.addEventListener('keypress', (e) => { document.addEventListener('keypress', (e) => {
if (e.key == 'g') if (e.key == 'g')
player.pointAnimation(map); player.pointAnimation(map);
@ -106,6 +106,15 @@ class MultiGame
player.pointOpponentAnimation(map, opponent.object); player.pointOpponentAnimation(map, opponent.object);
if (e.key == 'c') if (e.key == 'c')
debug = !debug; debug = !debug;
if (e.key == 'p')
{
map.clearVideoCanvas();
}
if (e.key == 'o')
{
// map.clearVideoCanvas();
map.putVideoOnCanvas(3, 'catch');
}
}) })
renderer.setAnimationLoop(loop) renderer.setAnimationLoop(loop)
@ -183,4 +192,4 @@ function loop()
stats.end(); stats.end();
} }
export { MultiGame, stats }; export { MultiGame, stats };

205
site/real_game/class/multiClass/Map.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Map.js :+: :+: :+: */ /* Map.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: hubourge <hubourge@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */
/* Updated: 2024/08/28 11:04:41 by edbernar ### ########.fr */ /* Updated: 2024/08/28 19:07:03 by hubourge ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -22,22 +22,12 @@ let interval2 = null;
let videoCanvas = null; let videoCanvas = null;
let videoCanvasTexture = null; let videoCanvasTexture = null;
let materialCanvas = null; let materialCanvas = null;
// Plane
let textureLoaderPlane = null; let textureLoaderPlane = null;
let texturePlane = null; let texturePlane = null;
// Border wall let ctx = null;
// Gravity changer let path = [];
let spacingImages = [];
let clearVideo = false;
// Wall obstacle
// Banner
// Gravity changer animation
class Map class Map
{ {
@ -62,7 +52,7 @@ class Map
dispose() dispose()
{ {
videoList.forEach(elem => { videoList.forEach(elem => {
elem.video.pause(); elem.video.pause();
elem.video.src = ''; elem.video.src = '';
@ -108,7 +98,7 @@ class Map
clearInterval(interval2); clearInterval(interval2);
scene = null; scene = null;
} }
constructor(sceneToSet, length, obstacles) constructor(sceneToSet, length, obstacles)
{ {
loader = new GLTFLoader(); loader = new GLTFLoader();
@ -218,7 +208,7 @@ class Map
ring1.scale.set(0.2, 0.2, 0.2); ring1.scale.set(0.2, 0.2, 0.2);
material1.transparent = true; material1.transparent = true;
material1.opacity = 0.75; material1.opacity = 0.75;
geometry2 = new THREE.TorusGeometry(1, 0.1, 12, 24); geometry2 = new THREE.TorusGeometry(1, 0.1, 12, 24);
material2 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); material2 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
ring2 = new THREE.Mesh(geometry2, material2); ring2 = new THREE.Mesh(geometry2, material2);
@ -236,26 +226,26 @@ class Map
ring3.scale.set(0.16, 0.16, 0.16); ring3.scale.set(0.16, 0.16, 0.16);
material3.transparent = true; material3.transparent = true;
material3.opacity = 0.35; material3.opacity = 0.35;
geometry4 = new THREE.CircleGeometry(0.2, 24); geometry4 = new THREE.CircleGeometry(0.2, 24);
material4 = new THREE.MeshPhysicalMaterial({color: 0xaaffaa}); material4 = new THREE.MeshPhysicalMaterial({color: 0xaaffaa});
circle1 = new THREE.Mesh(geometry4, material4); circle1 = new THREE.Mesh(geometry4, material4);
circle1.rotateX(-Math.PI / 2); circle1.rotateX(-Math.PI / 2);
circle1.position.set(0, 0 - 0.048, 0); circle1.position.set(0, 0 - 0.048, 0);
geometry5 = new THREE.CircleGeometry(0.24, 24); geometry5 = new THREE.CircleGeometry(0.24, 24);
material5 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); material5 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
circle2 = new THREE.Mesh(geometry5, material5); circle2 = new THREE.Mesh(geometry5, material5);
circle2.rotateX(-Math.PI / 2); circle2.rotateX(-Math.PI / 2);
circle2.position.set(0, 0 - 0.049, 0); circle2.position.set(0, 0 - 0.049, 0);
geometry6 = new THREE.CylinderGeometry(0.15, 0.15, 0.35); geometry6 = new THREE.CylinderGeometry(0.15, 0.15, 0.35);
material6 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); material6 = new THREE.MeshPhysicalMaterial({color: 0x00ff00});
collider = new THREE.Mesh(geometry6, material6); collider = new THREE.Mesh(geometry6, material6);
collider.position.set(0, 0 + 0.1, 0); collider.position.set(0, 0 + 0.1, 0);
material6.transparent = true; material6.transparent = true;
material6.opacity = 0.1; material6.opacity = 0.1;
groupJumper = new THREE.Group(); groupJumper = new THREE.Group();
groupJumper.add(ring1); groupJumper.add(ring1);
groupJumper.add(ring2); groupJumper.add(ring2);
@ -263,16 +253,16 @@ class Map
groupJumper.add(circle1); groupJumper.add(circle1);
groupJumper.add(circle2); groupJumper.add(circle2);
groupJumper.add(collider); groupJumper.add(collider);
// Set groupJumper position groud / top // Set groupJumper position groud / top
for (let i = 0; i < groupJumper.children.length && onTop; i++) for (let i = 0; i < groupJumper.children.length && onTop; i++)
groupJumper.children[i].position.set(x, y - 0.1, z); groupJumper.children[i].position.set(x, y - 0.1, z);
for (let i = 0; i < groupJumper.children.length && !onTop; i++) for (let i = 0; i < groupJumper.children.length && !onTop; i++)
groupJumper.children[i].position.set(x, y, z); groupJumper.children[i].position.set(x, y, z);
let distanceY = [-0.04, -0.14, -0.24, 0.048, 0.049, -0.125]; let distanceY = [-0.04, -0.14, -0.24, 0.048, 0.049, -0.125];
let rotate = [0, 0, 0, 1, 1, 0]; let rotate = [0, 0, 0, 1, 1, 0];
// Set distance between each object // Set distance between each object
for (let i = 0; i < groupJumper.children.length; i++) for (let i = 0; i < groupJumper.children.length; i++)
{ {
@ -285,7 +275,7 @@ class Map
else else
groupJumper.children[i].position.set(groupJumper.children[i].position.x, groupJumper.children[i].position.y - distanceY[i], groupJumper.children[i].position.z); groupJumper.children[i].position.set(groupJumper.children[i].position.x, groupJumper.children[i].position.y - distanceY[i], groupJumper.children[i].position.z);
} }
this.arrObject.push({mesh: groupJumper, name: name, type: typeName}); this.arrObject.push({mesh: groupJumper, name: name, type: typeName});
scene.add(groupJumper); scene.add(groupJumper);
}; };
@ -309,44 +299,89 @@ class Map
/* Todo (Hugo) : /* Todo (Hugo) :
- Faire une zone Player banner (importer un model blender) - Faire une zone Player banner (importer un model blender)
- Faire une zone pour les pub (s'inspirer de theFinals) (ok) - Faire une zone pour les pub (s'inspirer de theFinals) (ok)
- Effet gros pixel (ok) - Effet gros pixel (ok)
- Effet de lumière en 2d - Effet de lumière en 2d (direct dans les videos)
- Preparer une animation pour le but - Preparer differents events
*/ */
#createBanner() #createBanner()
{ {
// Create canvas // Create canvas
videoCanvas = document.createElement('canvas'); videoCanvas = document.createElement('canvas');
const ctx = videoCanvas.getContext('2d'); ctx = videoCanvas.getContext('2d');
videoCanvas.width = 100 * 2.33 * 20; videoCanvas.width = 100 * 2.33 * 20;
videoCanvas.height = 100; videoCanvas.height = 100;
const path = [ path = [
'../textures/video/goal2.webm', {name: 'goal', src:'../textures/video/goal2.webm'},
'../textures/video/pingpong.mp4', {name: 'ping', src:'../textures/video/pingpong.mp4'},
'../textures/video/catch.mp4', {name: 'catch', src:'../textures/video/catch.mp4'},
'../textures/video/easteregg.webm', {name: 'easteregg', src:'../textures/video/easteregg.webm'},
'../textures/video/fortnite.mp4', {name: 'fortnite', src:'../textures/video/fortnite.mp4'},
'../textures/video/Composition 1_1.webm', {name: 'outstanding', src:'../textures/video/outstanding.webm'},
] ]
path.sort(() => Math.random() - 0.5); path.sort(() => Math.random() - 0.5);
let spacingImages = [ spacingImages = [
100 * 2.33 * 10 - (100 * 2.33), // 2 images 100 * 2.33 * 10 - (100 * 2.33), // 2 images
100 * 2.33 * 5 - (100 * 2.33), // 4 images 100 * 2.33 * 5 - (100 * 2.33), // 4 images
100 * 2.33 * 2.5 - (100 * 2.33), // 8 images 100 * 2.33 * 2.5 - (100 * 2.33), // 8 images
100 * 2.33 * 1.25 - (100 * 2.33), // 16 images 100 * 2.33 * 1.25 - (100 * 2.33), // 16 images
]; ];
const nbVideos = 5; // 1, 2, 3, 4, 5 // const nbImages = 3; // 0 = 2 img, 1 = 4 img, 2 = 8 img, 3 = 16 img
const nbImages = 3; // 0 = 2 img, 1 = 4 img, 2 = 8 img, 3 = 16 img
const startIndex = ((Math.random() * (path.length - nbVideos)).toFixed(0)) % path.length; // // Create texture
// const startIndex = 5; // videoCanvasTexture = new THREE.CanvasTexture(videoCanvas);
// videoCanvasTexture.wrapS = THREE.RepeatWrapping;
// videoCanvasTexture.wrapT = THREE.RepeatWrapping;
// videoCanvasTexture.repeat.set(-1, 1);
// materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: false});
// loader.load( '../blender/exported/banner.glb', (gltf) => {
// this.banner = gltf.scene.children[0];
// gltf = null;
// this.banner.material = materialCanvas;
// this.banner.position.y += 1.7;
// this.banner.rotation.x = (Math.PI);
// this.banner.rotation.y += -0.15;
// scene.add(this.banner);
// interval2 = setInterval(() => {
// this.banner.rotation.y += 0.001;
// }, 10);
// }, undefined, function ( error ) {
// console.error( error );
// } );
}
putVideoOnCanvas(nbImage, name)
{
console.log('put video canvas');
let startIndex;
let nbVideos = 1;
if (name && typeof(name) == 'number')
nbVideos = name;
if (name && typeof(name) == 'string')
{
for (let index = 0; index < path.length; index++)
{
if (path[index].name == name)
{
startIndex = index;
break ;
}
startIndex = 0;
}
}
else
startIndex = ((Math.random() * (path.length - nbVideos)).toFixed(0)) % path.length;
for (let i = startIndex; i < (nbVideos + startIndex); i++) for (let i = startIndex; i < (nbVideos + startIndex); i++)
{ {
let videoTmp = new Video(path[i]).video; let videoTmp = new Video(path[i].src).video;
videoTmp.addEventListener('loadeddata', () => { videoTmp.addEventListener('loadeddata', () => {
videoTmp.play(); videoTmp.play();
drawVideoOnCanvas(); drawVideoOnCanvas();
@ -354,18 +389,23 @@ class Map
videoList.push({video: videoTmp, imageWidth: 100 * 2.33, imageHeight: 100}); videoList.push({video: videoTmp, imageWidth: 100 * 2.33, imageHeight: 100});
} }
console.log('videoList', videoList);
function drawVideoOnCanvas() function drawVideoOnCanvas()
{ {
if (videoCanvas) if (videoCanvas)
{ {
ctx.clearRect(0, 0, videoCanvas.width, videoCanvas.height); ctx.clearRect(0, 0, videoCanvas.width, videoCanvas.height);
if (clearVideo)
{
return ;
}
if (nbVideos == 0) if (nbVideos == 0)
return ; return ;
let nbDraw = 0; let nbDraw = 0;
let vIndex = 0; let vIndex = 0;
let y = 0; let y = 0;
for (let x = 0; x < videoCanvas.width; x += (videoList[vIndex].imageWidth + spacingImages[nbImages])) for (let x = 0; x < videoCanvas.width; x += (videoList[vIndex].imageWidth + spacingImages[nbImage]))
{ {
ctx.drawImage(videoList[vIndex].video, x, y, videoList[vIndex].imageWidth, videoList[vIndex].imageHeight); ctx.drawImage(videoList[vIndex].video, x, y, videoList[vIndex].imageWidth, videoList[vIndex].imageHeight);
nbDraw++; nbDraw++;
@ -374,19 +414,18 @@ class Map
if (vIndex >= nbVideos) if (vIndex >= nbVideos)
vIndex = 0; vIndex = 0;
} }
if (videoCanvasTexture)
videoCanvasTexture.needsUpdate = true; videoCanvasTexture.needsUpdate = true;
requestAnimationFrame(drawVideoOnCanvas); requestAnimationFrame(drawVideoOnCanvas);
} }
} }
// Create texture // Create texture
videoCanvasTexture = new THREE.CanvasTexture(videoCanvas); videoCanvasTexture = new THREE.CanvasTexture(videoCanvas);
videoCanvasTexture.wrapS = THREE.RepeatWrapping; videoCanvasTexture.wrapS = THREE.RepeatWrapping;
videoCanvasTexture.wrapT = THREE.RepeatWrapping; videoCanvasTexture.wrapT = THREE.RepeatWrapping;
videoCanvasTexture.repeat.set(-1, 1); videoCanvasTexture.repeat.set(-1, 1);
materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: true}); materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: false});
loader.load( '../blender/exported/banner.glb', (gltf) => { loader.load( '../blender/exported/banner.glb', (gltf) => {
this.banner = gltf.scene.children[0]; this.banner = gltf.scene.children[0];
@ -403,7 +442,59 @@ class Map
console.error( error ); console.error( error );
} ); } );
} }
clearVideoCanvas()
{
console.log('clear video canvas');
if (videoCanvas)
{
videoCanvas.remove();
videoCanvas = null;
}
if (videoList)
{
videoList.forEach(elem => {
elem.video.pause();
elem.video.src = '';
elem.video.removeAttribute('src');
elem.video.load();
})
videoList = null;
videoList = [];
}
// if (videoCanvasTexture)
// videoCanvasTexture.dispose();
// videoCanvas = null;
// videoCanvasTexture = new THREE.CanvasTexture(videoCanvas);
// videoCanvasTexture.wrapS = THREE.RepeatWrapping;
// videoCanvasTexture.wrapT = THREE.RepeatWrapping;
// videoCanvasTexture.repeat.set(-1, 1);
// if (materialCanvas)
// materialCanvas.dispose();
// materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: false});
// loader.load( '../blender/exported/banner.glb', (gltf) => {
// this.banner = gltf.scene.children[0];
// gltf = null;
// this.banner.material = materialCanvas;
// this.banner.position.y += 1.7;
// this.banner.rotation.x = (Math.PI);
// this.banner.rotation.y += -0.15;
// scene.add(this.banner);
// interval2 = setInterval(() => {
// this.banner.rotation.y += 0.001;
// }, 10);
// }, undefined, function ( error ) {
// console.error( error );
// } );
console.log('videoList', videoList);
}
#animationGravityChanger(group, onTop) #animationGravityChanger(group, onTop)
{ {
let geometryGC = new THREE.TorusGeometry(1.5, 0.05, 12, 24); let geometryGC = new THREE.TorusGeometry(1.5, 0.05, 12, 24);
@ -480,7 +571,7 @@ class Map
this.arrObject[i].mesh.position.z = ball.object.position.z; this.arrObject[i].mesh.position.z = ball.object.position.z;
if (ball.object.position.y > 0.4 + 0.1 && ball.object.position.y < 3.2) if (ball.object.position.y > 0.4 + 0.1 && ball.object.position.y < 3.2)
this.arrObject[i].mesh.position.y = ball.object.position.y - 0.1; this.arrObject[i].mesh.position.y = ball.object.position.y - 0.1;
// Change the opacity of the wall // Change the opacity of the wall
let diff = ball.object.position.x - this.arrObject[i].mesh.position.x - 0.1; let diff = ball.object.position.x - this.arrObject[i].mesh.position.x - 0.1;
if (diff > 2) if (diff > 2)
@ -529,7 +620,7 @@ class Map
const cylinder = this.arrObject[i].mesh.children[5]; const cylinder = this.arrObject[i].mesh.children[5];
const distance = ball.object.position.distanceTo(cylinder.position); const distance = ball.object.position.distanceTo(cylinder.position);
const speed = 0.1; const speed = 0.1;
// Detect if the ball is on the jumper // Detect if the ball is on the jumper
if (distance < 0.4 && this.ballIsOnJumper.can) if (distance < 0.4 && this.ballIsOnJumper.can)
{ {
@ -549,4 +640,4 @@ class Map
}; };
}; };
export { Map }; export { Map };