diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js index a1b99df..1b86832 100644 --- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js +++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Map.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* Map.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ -/* Updated: 2024/09/17 13:59:13 by edbernar ### ########.fr */ +/* Updated: 2024/09/17 17:23:53 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -55,6 +55,9 @@ class Map ballObject = null; mapLength = 0; banner = null; + firework = null; + fireworkMixer = null; + fireworkAnimations = null; centerPos = { x: -1, y: -1, @@ -474,6 +477,26 @@ class Map scene.remove(this.banner); } + animationGoal() + { + loader.load('/static/models3D/multiOnlineGame/fireworkv1.glb', (gltf) => { + this.firework = gltf.scene.children[0]; + this.fireworkAnimations = gltf.animations; // Récupérez les animations du modèle + gltf = null; + this.firework.material = new THREE.MeshPhysicalMaterial({color: 0xff0000}); + scene.add(this.firework); + + this.fireworkMixer = new THREE.AnimationMixer(this.firework); + this.fireworkAnimations.forEach((clip) => { + this.fireworkMixer.clipAction(clip).play(); // Joue toutes les animations + }); + + console.log(this.firework); + }, undefined, function (error) { + console.error(error); + }); + } + #animationGravityChanger(group, onTop) { let geometryGC = new THREE.TorusGeometry(1.5, 0.05, 12, 24); @@ -541,6 +564,9 @@ class Map update(ball) { + if (this.mixer) { + this.mixer.update(0.016); // Le deltaTime, ajustez selon le temps entre les frames + } for (let i = 0; this.arrObject && i < this.arrObject.length; i++) { if (this.arrObject[i].name == "wallLeft") diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js index 33e58de..6316da8 100644 --- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js +++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js @@ -3,15 +3,17 @@ /* ::: :::::::: */ /* multiOnlineGamePage.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ -/* Updated: 2024/09/17 15:38:02 by edbernar ### ########.fr */ +/* Updated: 2024/09/17 18:02:20 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ import { createNotification as CN } from "/static/javascript/notification/main.js"; import * as THREE from '/static/javascript/three/build/three.module.js' +import Stats from '/static/javascript/three/examples/jsm/libs/stats.module.js' +import { OrbitControls } from '/static/javascript/three/examples/jsm/Addons.js'; import { sendRequest } from "/static/javascript/websocket.js"; import { Player } from '/static/javascript/multiOnlineGame/Player.js' import { Map } from '/static/javascript/multiOnlineGame/Map.js' @@ -55,6 +57,15 @@ let ambiantLight = null; let opponent = null; let interval = null; +// ------------------- (need to be remove) -------------------- // +const stats = new Stats(); +stats.showPanel(0); +document.body.appendChild(stats.dom); + +const cameraTmp = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight); +let controls = null; +// ------------------------------------------------------------ // + class MultiOnlineGamePage { static create() @@ -88,6 +99,12 @@ class MultiOnlineGamePage ball.initMoveBallTmp(); map.ballObject = ball.object; + ////////////////////////// + controls = new OrbitControls(cameraTmp, renderer.domElement) + 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') @@ -99,7 +116,10 @@ class MultiOnlineGamePage if (e.key == 'p') map.putVideoOnCanvas(0, null); if (e.key == 'o') + { map.putVideoOnCanvas(3, 'goal'); + map.animationGoal(); + } if (e.key == 'i') map.putVideoOnCanvas(3, 'outstanding'); if (e.key == 'u') @@ -182,11 +202,25 @@ function changeBarColor(bar, color) function loop() { + ///////////// + stats.begin(); + ///////////// + player.update(); opponent.update(); ball.update(); map.update(ball); - renderer.render(scene, player.camera); + if (debug) + { + controls.update(); + renderer.render(scene, cameraTmp); + } + else + renderer.render(scene, player.camera); + + ///////////// + stats.end(); + //////////// } export { MultiOnlineGamePage, opponent, ball }; diff --git a/docker-compose/requirements/nginx/static/models3D/multiOnlineGame/fireworkv1.glb b/docker-compose/requirements/nginx/static/models3D/multiOnlineGame/fireworkv1.glb new file mode 100644 index 0000000..8bdff76 Binary files /dev/null and b/docker-compose/requirements/nginx/static/models3D/multiOnlineGame/fireworkv1.glb differ