diff --git a/site/real_game/class/MultiGame.js b/site/real_game/class/MultiGame.js index 55c7ce8..e70ab1b 100644 --- a/site/real_game/class/MultiGame.js +++ b/site/real_game/class/MultiGame.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* MultiGame.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* 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 player = null; let spotLight = null; -let ambiantLight = null; +let ambiantLight = null; let opponent = null; // ------------------- (need to be remove) -------------------- // @@ -98,7 +98,7 @@ class MultiGame cameraTmp.position.set(5, 3, 5); controls.target = new THREE.Vector3(map.centerPos.x, 0, map.centerPos.z); - + document.addEventListener('keypress', (e) => { if (e.key == 'g') player.pointAnimation(map); @@ -106,6 +106,15 @@ class MultiGame player.pointOpponentAnimation(map, opponent.object); if (e.key == 'c') debug = !debug; + if (e.key == 'p') + { + map.clearVideoCanvas(); + } + if (e.key == 'o') + { + // map.clearVideoCanvas(); + map.putVideoOnCanvas(3, 'catch'); + } }) renderer.setAnimationLoop(loop) @@ -183,4 +192,4 @@ function loop() stats.end(); } -export { MultiGame, stats }; \ No newline at end of file +export { MultiGame, stats }; diff --git a/site/real_game/class/multiClass/Map.js b/site/real_game/class/multiClass/Map.js index 1c7fcb2..c43b17a 100644 --- a/site/real_game/class/multiClass/Map.js +++ b/site/real_game/class/multiClass/Map.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* Map.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* 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 videoCanvasTexture = null; let materialCanvas = null; - - -// Plane - let textureLoaderPlane = null; let texturePlane = null; -// Border wall -// Gravity changer - - - -// Wall obstacle - -// Banner - -// Gravity changer animation +let ctx = null; +let path = []; +let spacingImages = []; +let clearVideo = false; class Map { @@ -62,7 +52,7 @@ class Map dispose() { - + videoList.forEach(elem => { elem.video.pause(); elem.video.src = ''; @@ -108,7 +98,7 @@ class Map clearInterval(interval2); scene = null; } - + constructor(sceneToSet, length, obstacles) { loader = new GLTFLoader(); @@ -218,7 +208,7 @@ class Map ring1.scale.set(0.2, 0.2, 0.2); material1.transparent = true; material1.opacity = 0.75; - + geometry2 = new THREE.TorusGeometry(1, 0.1, 12, 24); material2 = new THREE.MeshPhysicalMaterial({color: 0x00ff00}); ring2 = new THREE.Mesh(geometry2, material2); @@ -236,26 +226,26 @@ class Map ring3.scale.set(0.16, 0.16, 0.16); material3.transparent = true; material3.opacity = 0.35; - + 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); - + 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); - + 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); material6.transparent = true; material6.opacity = 0.1; - + groupJumper = new THREE.Group(); groupJumper.add(ring1); groupJumper.add(ring2); @@ -263,16 +253,16 @@ class Map groupJumper.add(circle1); groupJumper.add(circle2); groupJumper.add(collider); - + // 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 < groupJumper.children.length; i++) { @@ -285,7 +275,7 @@ class Map else 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}); scene.add(groupJumper); }; @@ -309,44 +299,89 @@ class Map /* Todo (Hugo) : - Faire une zone Player banner (importer un model blender) - Faire une zone pour les pub (s'inspirer de theFinals) (ok) - + - Effet gros pixel (ok) - - Effet de lumière en 2d - - Preparer une animation pour le but + - Effet de lumière en 2d (direct dans les videos) + - Preparer differents events */ #createBanner() { // Create canvas videoCanvas = document.createElement('canvas'); - const ctx = videoCanvas.getContext('2d'); + ctx = videoCanvas.getContext('2d'); videoCanvas.width = 100 * 2.33 * 20; videoCanvas.height = 100; - - const path = [ - '../textures/video/goal2.webm', - '../textures/video/pingpong.mp4', - '../textures/video/catch.mp4', - '../textures/video/easteregg.webm', - '../textures/video/fortnite.mp4', - '../textures/video/Composition 1_1.webm', + + path = [ + {name: 'goal', src:'../textures/video/goal2.webm'}, + {name: 'ping', src:'../textures/video/pingpong.mp4'}, + {name: 'catch', src:'../textures/video/catch.mp4'}, + {name: 'easteregg', src:'../textures/video/easteregg.webm'}, + {name: 'fortnite', src:'../textures/video/fortnite.mp4'}, + {name: 'outstanding', src:'../textures/video/outstanding.webm'}, ] path.sort(() => Math.random() - 0.5); - let spacingImages = [ - 100 * 2.33 * 10 - (100 * 2.33), // 2 images + spacingImages = [ + 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; - // const startIndex = 5; + + // const nbImages = 3; // 0 = 2 img, 1 = 4 img, 2 = 8 img, 3 = 16 img + + // // Create texture + // 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++) { - let videoTmp = new Video(path[i]).video; + let videoTmp = new Video(path[i].src).video; videoTmp.addEventListener('loadeddata', () => { videoTmp.play(); drawVideoOnCanvas(); @@ -354,18 +389,23 @@ class Map videoList.push({video: videoTmp, imageWidth: 100 * 2.33, imageHeight: 100}); } + console.log('videoList', videoList); + function drawVideoOnCanvas() { if (videoCanvas) { ctx.clearRect(0, 0, videoCanvas.width, videoCanvas.height); - + if (clearVideo) + { + return ; + } if (nbVideos == 0) return ; let nbDraw = 0; let vIndex = 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); nbDraw++; @@ -374,19 +414,18 @@ class Map if (vIndex >= nbVideos) vIndex = 0; } - - videoCanvasTexture.needsUpdate = true; + if (videoCanvasTexture) + videoCanvasTexture.needsUpdate = true; requestAnimationFrame(drawVideoOnCanvas); } } - // Create texture 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: true}); + materialCanvas = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide , transparent: false}); loader.load( '../blender/exported/banner.glb', (gltf) => { this.banner = gltf.scene.children[0]; @@ -403,7 +442,59 @@ class Map 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) { 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; 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; - + // Change the opacity of the wall let diff = ball.object.position.x - this.arrObject[i].mesh.position.x - 0.1; if (diff > 2) @@ -529,7 +620,7 @@ class Map const cylinder = this.arrObject[i].mesh.children[5]; const distance = ball.object.position.distanceTo(cylinder.position); const speed = 0.1; - + // Detect if the ball is on the jumper if (distance < 0.4 && this.ballIsOnJumper.can) { @@ -549,4 +640,4 @@ class Map }; }; -export { Map }; \ No newline at end of file +export { Map };