diff --git a/site/real_game/class/Ball.js b/site/real_game/class/Ball.js index f015fca..f04b955 100644 --- a/site/real_game/class/Ball.js +++ b/site/real_game/class/Ball.js @@ -3,14 +3,15 @@ /* ::: :::::::: */ /* Ball.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/20 17:02:47 by edbernar #+# #+# */ -/* Updated: 2024/08/24 23:47:26 by edbernar ### ########.fr */ +/* Updated: 2024/08/26 17:19:01 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ -import * as THREE from '/static/javascript/three/build/three.module.js'; +import * as THREE from '/node_modules/three/build/three.module.js'; +// import * as THREE from '/static/javascript/three/build/three.module.js'; /* Todo (Eddy) : diff --git a/site/real_game/class/Map.js b/site/real_game/class/Map.js index 727e697..5f6b758 100644 --- a/site/real_game/class/Map.js +++ b/site/real_game/class/Map.js @@ -3,28 +3,74 @@ /* ::: :::::::: */ /* Map.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ -/* Updated: 2024/08/24 23:47:26 by edbernar ### ########.fr */ +/* Updated: 2024/08/26 20:21:15 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ -import * as THREE from '/static/javascript/three/build/three.module.js'; +// import * as THREE from '/static/javascript/three/build/three.module.js'; +import * as THREE from '/node_modules/three/build/three.module.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; - -/* - Todo (Eddy) : - - Ajouter la transparence sur les murs sur la distance de la balle (OK) - - Ajouter des textures selon le type : number pour couleur, string pour img (OK) - - Ajouter une fonctione pour modifier la gravité (OK) -*/ +import { Video } from './Video.js'; const loader = new GLTFLoader(); +let scene = null; +// Plane +let geometryPlane = null; +let materialPlane = null; +let meshPlane = null; +let textureLoaderPlane = null; +let texturePlane = null; +// Border wall +let geometryWall = null; +let materialWall = null; +let meshWall = null; +// Gravity changer +let geometry1 = null; +let material1 = null; +let ring1 = null; +let geometry2 = null; +let material2 = null; +let ring2 = null; +let geometry3 = null; +let material3 = null; +let ring3 = null; +let geometry4 = null; +let material4 = null; +let circle1 = null; +let geometry5 = null; +let material5 = null; +let circle2 = null; +let geometry6 = null; +let material6 = null; +let collider = null; +let groupJumper = null; +// Wall obstacle +let geometryWallObs = null; +let materialWallObs = null; +let meshWallObs = null; +// Banner +let videoCanvas = null; +let video1 = null; +let video2 = null; +let video3 = null; +let video4 = null; +let video5 = null; +let videoCanvasTexture = null; +let materialCanvas = null; +// Gravity changer animation +let geometryGC = null; +let materialGC = null; +let ringGC = null; +let landmarkGC = null; +let interval = null; + + class Map { - scene = null; arrObject = []; ballObject = null; mapLength = 0; @@ -43,10 +89,24 @@ class Map ballIsOnJumper = { can: true }; - - constructor(scene, length, obstacles) + + static create() { - this.scene = scene; + + } + + static dispose() + { + // Plane + // Border wall + // Gravity changer + // Wall obstacle + // Banner + // Gravity changer animation + } + constructor(sceneToSet, length, obstacles) + { + scene = sceneToSet; this.centerPos.x = 0; this.centerPos.y = 0.15; this.centerPos.z = -length / 2 + length / 2; @@ -65,8 +125,10 @@ class Map { for (let i = 0; i < this.arrObject.length; i++) { - if (this.arrObject[i].type == 'jumper') - this.#animationGravityChanger(this.arrObject[i].mesh) + if (this.arrObject[i].type == 'jumperTop') + this.#animationGravityChanger(this.arrObject[i].mesh, true) + if (this.arrObject[i].type == 'jumperBottom') + this.#animationGravityChanger(this.arrObject[i].mesh, false) } } }) @@ -81,29 +143,27 @@ class Map throw Error("Name already exist."); } - const geometry = new THREE.PlaneGeometry(x, y); - let material = null; - let mesh = null; + geometryPlane = new THREE.PlaneGeometry(x, y); if (typeof(visual) == 'string') { - const textureLoader = new THREE.TextureLoader(); - const texture = textureLoader.load(visual); - material = new THREE.MeshPhysicalMaterial({ map: texture }); + textureLoaderPlane = new THREE.TextureLoader(); + texturePlane = textureLoaderPlane.load(visual); + materialPlane = new THREE.MeshPhysicalMaterial({ map: texturePlane }); } else if (typeof(visual) == 'number') - material = new THREE.MeshPhysicalMaterial({ color: visual }); + materialPlane = new THREE.MeshPhysicalMaterial({ color: visual }); else - material = new THREE.MeshPhysicalMaterial(); - mesh = new THREE.Mesh(geometry, material); - mesh.rotateX(rot); + materialPlane = new THREE.MeshPhysicalMaterial(); + meshPlane = new THREE.Mesh(geometryPlane, materialPlane); + meshPlane.rotateX(rot); if (isBottom) - mesh.position.set(0, 0.15, 0); + meshPlane.position.set(0, 0.15, 0); else - mesh.position.set(0, 3.15, 0); - this.arrObject.push({mesh: mesh, name: name, type: "plane"}); - mesh.receiveShadow = true; - return (mesh); + meshPlane.position.set(0, 3.15, 0); + this.arrObject.push({mesh: meshPlane, name: name, type: "plane"}); + meshPlane.receiveShadow = true; + return (meshPlane); }; #createWall(x, y, z, name) @@ -113,15 +173,15 @@ class Map if (this.arrObject[i].name == name) throw Error("Name already exist."); } - const geometry = new THREE.BoxGeometry(0.05, 0.5, 0.75); - const material = new THREE.MeshPhysicalMaterial(); - const mesh = new THREE.Mesh(geometry, material); + geometryWall = new THREE.BoxGeometry(0.05, 0.5, 0.75); + materialWall = new THREE.MeshPhysicalMaterial(); + meshWall = new THREE.Mesh(geometryWall, materialWall); - mesh.position.set(x, y, z); - material.transparent = true; - material.opacity = 0.5; - this.arrObject.push({mesh: mesh, name: name, type: "wall"}); - return (mesh); + meshWall.position.set(x, y, z); + materialWall.transparent = true; + materialWall.opacity = 0.5; + this.arrObject.push({mesh: meshWall, name: name, type: "wall"}); + return (meshWall); }; #createGravityChanger(x, y, z, name, typeName, onTop) @@ -131,98 +191,97 @@ class Map if (this.arrObject[i].name == name) throw Error("Name already exist."); } - const geometry1 = new THREE.TorusGeometry(1, 0.1, 12, 24); - const material1 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); - const ring1 = new THREE.Mesh(geometry1, material1); + geometry1 = new THREE.TorusGeometry(1, 0.1, 12, 24); + material1 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); + ring1 = new THREE.Mesh(geometry1, material1); ring1.rotateX(-Math.PI / 2); ring1.position.set(0, 0, 0); ring1.scale.set(0.2, 0.2, 0.2); material1.transparent = true; material1.opacity = 0.75; - const geometry2 = new THREE.TorusGeometry(1, 0.1, 12, 24); - const material2 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); - const ring2 = new THREE.Mesh(geometry2, material2); + geometry2 = new THREE.TorusGeometry(1, 0.1, 12, 24); + material2 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); + ring2 = new THREE.Mesh(geometry2, material2); ring2.rotateX(-Math.PI / 2); ring2.position.set(0, 0 + 0.1, 0); ring2.scale.set(0.18, 0.18, 0.18); material2.transparent = true; material2.opacity = 0.65; - const geometry3 = new THREE.TorusGeometry(1, 0.1, 12, 24); - const material3 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); - const ring3 = new THREE.Mesh(geometry3, material3); + geometry3 = new THREE.TorusGeometry(1, 0.1, 12, 24); + material3 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); + ring3 = new THREE.Mesh(geometry3, material3); ring3.rotateX(-Math.PI / 2); ring3.position.set(0, 0 + 0.2, 0); ring3.scale.set(0.16, 0.16, 0.16); material3.transparent = true; material3.opacity = 0.35; - const geometry0 = new THREE.CircleGeometry(0.2, 24); - const material0 = new THREE.MeshPhysicalMaterial({color: 0xaaffaa}); - const circle1 = new THREE.Mesh(geometry0, material0); + geometry4 = new THREE.CircleGeometry(0.2, 24); + material4 = new THREE.MeshPhysicalMaterial({color: 0xaaffaa}); + circle1 = new THREE.Mesh(geometry4, material4); circle1.rotateX(-Math.PI / 2); circle1.position.set(0, 0 - 0.048, 0); - const geometry = new THREE.CircleGeometry(0.24, 24); - const material = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); - const circle2 = new THREE.Mesh(geometry, material); + geometry5 = new THREE.CircleGeometry(0.24, 24); + material5 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); + circle2 = new THREE.Mesh(geometry5, material5); circle2.rotateX(-Math.PI / 2); circle2.position.set(0, 0 - 0.049, 0); - const geometry4 = new THREE.CylinderGeometry(0.15, 0.15, 0.35); - const material4 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); - const collider = new THREE.Mesh(geometry4, material4); + geometry6 = new THREE.CylinderGeometry(0.15, 0.15, 0.35); + material6 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); + collider = new THREE.Mesh(geometry6, material6); collider.position.set(0, 0 + 0.1, 0); - material4.transparent = true; - material4.opacity = 0.1; + material6.transparent = true; + material6.opacity = 0.1; - const group = new THREE.Group(); - group.add(ring1); - group.add(ring2); - group.add(ring3); - group.add(circle1); - group.add(circle2); - group.add(collider); + groupJumper = new THREE.Group(); + groupJumper.add(ring1); + groupJumper.add(ring2); + groupJumper.add(ring3); + groupJumper.add(circle1); + groupJumper.add(circle2); + groupJumper.add(collider); - // Set group position groud / top - for (let i = 0; i < group.children.length && onTop; i++) - group.children[i].position.set(x, y - 0.1, z); - for (let i = 0; i < group.children.length && !onTop; i++) - group.children[i].position.set(x, y, z); + // Set groupJumper position groud / top + for (let i = 0; i < groupJumper.children.length && onTop; i++) + groupJumper.children[i].position.set(x, y - 0.1, z); + for (let i = 0; i < groupJumper.children.length && !onTop; i++) + groupJumper.children[i].position.set(x, y, z); let distanceY = [-0.04, -0.14, -0.24, 0.048, 0.049, -0.125]; let rotate = [0, 0, 0, 1, 1, 0]; // Set distance between each object - for (let i = 0; i < group.children.length; i++) + for (let i = 0; i < groupJumper.children.length; i++) { if (onTop) { if (rotate[i]) - group.children[i].rotateX(Math.PI); - group.children[i].position.set(group.children[i].position.x, group.children[i].position.y + distanceY[i], group.children[i].position.z); + groupJumper.children[i].rotateX(Math.PI); + groupJumper.children[i].position.set(groupJumper.children[i].position.x, groupJumper.children[i].position.y + distanceY[i], groupJumper.children[i].position.z); } else - group.children[i].position.set(group.children[i].position.x, group.children[i].position.y - distanceY[i], group.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: group, name: name, type: typeName}); - this.scene.add(group); + this.arrObject.push({mesh: groupJumper, name: name, type: typeName}); + scene.add(groupJumper); }; #createWallObstacle(x, y, size, onTop) { - const geometry = new THREE.BoxGeometry(size, 0.5, 0.1); - const material = new THREE.MeshPhysicalMaterial({color: 0xaaaafe}); - const mesh = new THREE.Mesh(geometry, material); - + geometryWallObs = new THREE.BoxGeometry(size, 0.5, 0.1); + materialWallObs = new THREE.MeshPhysicalMaterial({color: 0xaaaafe}); + meshWallObs = new THREE.Mesh(geometryWallObs, materialWallObs); if (onTop) - mesh.position.set(x, this.playerLimits.up - 0.1, y); + meshWallObs.position.set(x, this.playerLimits.up - 0.1, y); else - mesh.position.set(x, 0.4, y); - return (mesh); + meshWallObs.position.set(x, 0.4, y); + return (meshWallObs); } /* Todo (Hugo) : @@ -236,52 +295,48 @@ class Map #createBanner() { // Create canvas - const videoCanvas = document.createElement('canvas'); + videoCanvas = document.createElement('canvas'); const ctx = videoCanvas.getContext('2d'); videoCanvas.width = 100 * 2.33 * 20; videoCanvas.height = 100; - // Load videos - const video1 = document.createElement('video'); - video1.src = '../textures/video/catch.mp4'; - video1.muted = true; - video1.autoplay = true; - video1.loop = true; - video1.addEventListener('loadeddata', () => { - video1.play(); - drawVideoOnCanvas(); - }); + let path = [ + '../textures/video/goal2.webm', + '../textures/video/pingpong.mp4', + '../textures/video/catch.mp4', + '../textures/video/easteregg.webm', + '../textures/video/fortnite.mp4', + ] + path.sort(() => Math.random() - 0.5); - const video2 = document.createElement('video'); - video2.src = '../textures/video/pingpong.mp4'; - video2.muted = true; - video2.autoplay = true; - video2.loop = true; - video2.addEventListener('loadeddata', () => { - video2.play(); - drawVideoOnCanvas(); - }); - - const nbVideos = 2; // 1, 2 - const nbImages = 2; // 0 = 2 img, 1 = 4 img, 2 = 8 img, 3 = 16 img - - let vSettings = [ - {video: video1, imageWidth: 100 * 2.33, imageHeight: 100}, // 2 images - {video: video2, imageWidth: 100 * 2.33, imageHeight: 100}, // 4 images - {video: video1, imageWidth: 100 * 2.33, imageHeight: 100}, // 8 images - {video: video2, imageWidth: 100 * 2.33, imageHeight: 100}, // 16 images - ]; + let vSettings = []; let spacingImages = [ - 100 * 2.33 * 10 - (100 * 2.33), - 100 * 2.33 * 5 - (100 * 2.33), - 100 * 2.33 * 2.5 - (100 * 2.33), - 100 * 2.33 * 1.25 - (100 * 2.33), + 100 * 2.33 * 10 - (100 * 2.33), // 2 images + 100 * 2.33 * 5 - (100 * 2.33), // 4 images + 100 * 2.33 * 2.5 - (100 * 2.33), // 8 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 startIndex = ((Math.random() * (path.length - nbVideos)).toFixed(0)) % path.length; + + for (let i = startIndex; i < nbVideos + startIndex; i++) + { + let videoTmp = new Video(path[i]).video; + videoTmp.addEventListener('loadeddata', () => { + videoTmp.play(); + drawVideoOnCanvas(); + }); + vSettings.push({video: videoTmp, imageWidth: 100 * 2.33, imageHeight: 100}); + } function drawVideoOnCanvas() { ctx.clearRect(0, 0, videoCanvas.width, videoCanvas.height); - + + if (nbVideos == 0) + return ; let nbDraw = 0; let vIndex = 0; let y = 0; @@ -300,21 +355,21 @@ class Map } // Create texture - const videoCanvasTexture = new THREE.CanvasTexture(videoCanvas); + videoCanvasTexture = new THREE.CanvasTexture(videoCanvas); videoCanvasTexture.wrapS = THREE.RepeatWrapping; videoCanvasTexture.wrapT = THREE.RepeatWrapping; videoCanvasTexture.repeat.set(-1, 1); - const material = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide }); + materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: true}); - // videoCanvas.innerHTML = 'Test'; // ca sert ca eddy ? + // videoCanvas.innerHTML = 'Test'; // ca sert ca eddy ? Repond stp ? loader.load( '../blender/exported/banner.glb', (gltf) => { this.banner = gltf.scene.children[0]; - this.banner.material = material; + this.banner.material = materialCanvas; this.banner.position.y += 1.7; this.banner.rotation.x = (Math.PI); this.banner.rotation.y += -0.15; - this.scene.add(gltf.scene); + scene.add(gltf.scene); setInterval(() => { this.banner.rotation.y += 0.001; }, 10); @@ -330,27 +385,26 @@ class Map #animationGravityChanger(group, onTop) { - const geometry1 = new THREE.TorusGeometry(1.5, 0.05, 12, 24); - const material1 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); - const ring1 = new THREE.Mesh(geometry1, material1); - const landmark = group.children[0]; - let interval = null; - let speed = 0.1; + geometryGC = new THREE.TorusGeometry(1.5, 0.05, 12, 24); + materialGC = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); + ringGC = new THREE.Mesh(geometryGC, materialGC); + landmarkGC = group.children[0]; + let speed = 0.1; - ring1.rotateX(-Math.PI / 2); - ring1.position.set(landmark.position.x, landmark.position.y, landmark.position.z); - ring1.scale.set(0.2, 0.2, 0.2); - ring1.material.transparent = true; - this.scene.add(ring1); + ringGC.rotateX(-Math.PI / 2); + ringGC.position.set(landmarkGC.position.x, landmarkGC.position.y, landmarkGC.position.z); + ringGC.scale.set(0.2, 0.2, 0.2); + materialGC.transparent = true; + scene.add(ringGC); interval = setInterval(() => { if (onTop) - ring1.position.y -= speed; + ringGC.position.y -= speed; else - ring1.position.y += speed; - ring1.material.opacity -= 0.02; + ringGC.position.y += speed; + materialGC.opacity -= 0.02; speed *= 0.90; - if (ring1.material.opacity == 0) + if (materialGC.opacity == 0) clearInterval(interval); }, 10); } @@ -366,7 +420,7 @@ class Map for (let i = 0; i < wallPos.length; i++) { if (Math.random() < 0.5) - this.scene.add(this.#createWallObstacle(wallPos[i].x, wallPos[i].y, wallPos[i].z, wallPos[i].onTop)); + scene.add(this.#createWallObstacle(wallPos[i].x, wallPos[i].y, wallPos[i].z, wallPos[i].onTop)); } const type = "gravityChanger"; diff --git a/site/real_game/class/Opponent.js b/site/real_game/class/Opponent.js index 4279193..d8d251b 100644 --- a/site/real_game/class/Opponent.js +++ b/site/real_game/class/Opponent.js @@ -3,15 +3,17 @@ /* ::: :::::::: */ /* Opponent.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/21 10:34:49 by edbernar #+# #+# */ -/* Updated: 2024/08/24 23:47:26 by edbernar ### ########.fr */ +/* Updated: 2024/08/26 17:19:16 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ import { playerExist } from './Player' -import * as THREE from '/static/javascript/three/build/three.module.js'; +// import * as THREE from '/static/javascript/three/build/three.module.js'; +import * as THREE from '/node_modules/three/build/three.module.js'; + let opponentExist = false; diff --git a/site/real_game/class/Player.js b/site/real_game/class/Player.js index 58431bc..e0f6150 100644 --- a/site/real_game/class/Player.js +++ b/site/real_game/class/Player.js @@ -3,14 +3,15 @@ /* ::: :::::::: */ /* Player.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/18 00:30:31 by edbernar #+# #+# */ -/* Updated: 2024/08/24 23:47:26 by edbernar ### ########.fr */ +/* Updated: 2024/08/26 17:19:30 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ -import * as THREE from '/static/javascript/three/build/three.module.js'; +import * as THREE from '/node_modules/three/build/three.module.js'; +// import * as THREE from '/static/javascript/three/build/three.module.js'; /* Explication du code : diff --git a/site/real_game/class/Video.js b/site/real_game/class/Video.js new file mode 100644 index 0000000..3e8f642 --- /dev/null +++ b/site/real_game/class/Video.js @@ -0,0 +1,30 @@ +/* ************************************************************************** */ +/* */ +/* ::: :::::::: */ +/* Video.js :+: :+: :+: */ +/* +:+ +:+ +:+ */ +/* By: hubourge +#+ +:+ +#+ */ +/* +#+#+#+#+#+ +#+ */ +/* Created: 2024/08/26 18:57:00 by hubourge #+# #+# */ +/* Updated: 2024/08/26 19:20:32 by hubourge ### ########.fr */ +/* */ +/* ************************************************************************** */ + +// import * as THREE from '/static/javascript/three/build/three.module.js'; +import * as THREE from '/node_modules/three/build/three.module.js'; + +class Video +{ + video = null; + + constructor(path) + { + this.video = document.createElement('video'); + this.video.src = path; + this.video.muted = true; + this.video.autoplay = true; + this.video.loop = true; + } +} + +export { Video }; \ No newline at end of file diff --git a/site/real_game/main.js b/site/real_game/main.js index c3ddc96..df0212f 100644 --- a/site/real_game/main.js +++ b/site/real_game/main.js @@ -3,14 +3,15 @@ /* ::: :::::::: */ /* main.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ -/* Updated: 2024/08/24 23:47:26 by edbernar ### ########.fr */ +/* Updated: 2024/08/26 17:25:57 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ -import * as THREE from '/static/javascript/three/build/three.module.js'; +import * as THREE from '/node_modules/three/build/three.module.js'; +// import * as THREE from '/static/javascript/three/build/three.module.js'; import { Player } from './class/Player' import { Map } from './class/Map' import { Ball } from './class/Ball' diff --git a/site/real_game/textures/video/easteregg.webm b/site/real_game/textures/video/easteregg.webm new file mode 100644 index 0000000..f2d9ab7 Binary files /dev/null and b/site/real_game/textures/video/easteregg.webm differ diff --git a/site/real_game/textures/video/goal2.webm b/site/real_game/textures/video/goal2.webm new file mode 100644 index 0000000..edd033c Binary files /dev/null and b/site/real_game/textures/video/goal2.webm differ