From 0200a360e9d5692d92b1cff56db8cfde0f0c20b7 Mon Sep 17 00:00:00 2001 From: Kum1ta Date: Sat, 5 Oct 2024 01:09:29 +0200 Subject: [PATCH] Game - add vr support - add gamepad support and vr controller (only in vr for that) --- .../djangoserver/file/server/server/urls.py | 2 +- .../javascript/multiOnlineGame/Player.js | 108 ++++++++++++++++-- .../multiOnlineGame/multiOnlineGamePage.js | 102 ++++++++++++----- .../jsm/webxr/XRControllerModelFactory.js | 4 +- .../nginx/static/style/game/games.css | 14 ++- 5 files changed, 191 insertions(+), 39 deletions(-) diff --git a/docker-compose/requirements/djangoserver/file/server/server/urls.py b/docker-compose/requirements/djangoserver/file/server/server/urls.py index 4fb9a9a..01c8e72 100644 --- a/docker-compose/requirements/djangoserver/file/server/server/urls.py +++ b/docker-compose/requirements/djangoserver/file/server/server/urls.py @@ -25,7 +25,7 @@ urlpatterns = [ path("multiOnlineGamePage", views.multiOnlineGamePage, name='multiOnlineGamePage'), path("waitingGamePage", views.waitingGamePage, name='waitingGamePage'), path("profilPage", views.profilPage, name='profilPage'), - path("game", views.game, name='game'), + # path("game", views.game, name='game'), path("wait_game", views.game, name='wait_game'), path("login42", views.login42, name='login42'), path("logout", views.logout, name='logout'), diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js index 6d5cd8e..5ce18d7 100644 --- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js +++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js @@ -6,13 +6,16 @@ /* By: edbernar 0.75 || this.buttonAAction) + addKeyInArr({key: key.down}) + else + remKeyInArr({key: key.down}); + if (yAxis < -0.75 || this.buttonAAction) + addKeyInArr({key: key.up}) + else + remKeyInArr({key: key.up}); + if (xAxis > 0.5) + addKeyInArr({key: key.right}) + else + remKeyInArr({key: key.right}); + if (xAxis < -0.5) + addKeyInArr({key: key.left}) + else + remKeyInArr({key: key.left}); } setCameraPosition(x, y, z) @@ -369,6 +430,37 @@ class Player }, i * 10); } } + + configureVrController() + { + controller1 = renderer.xr.getController(0); + controller2 = renderer.xr.getController(1); + + scene.add(controller1); + scene.add(controller2); + + for (let i = 0; i < scene.children.length; i++) + { + if (scene.children[i].name === 'vrHeadset') + { + const controllerGrip1 = renderer.xr.getControllerGrip(0); + controllerGrip1.add(controllerModelFactory.createControllerModel(controllerGrip1)); + scene.children[i].add(controllerGrip1); + + const controllerGrip2 = renderer.xr.getControllerGrip(1); + controllerGrip2.add(controllerModelFactory.createControllerModel(controllerGrip2)); + scene.children[i].add(controllerGrip2); + } + } + + controller1.addEventListener('connected', (event) => { + controller1.userData.inputSource = event.data; + }); + + controller2.addEventListener('connected', (event) => { + controller2.userData.inputSource = event.data; + }); + } }; function addKeyInArr(e) diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js index 80d9a3d..086fc0c 100644 --- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js +++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/multiOnlineGamePage.js @@ -6,20 +6,20 @@ /* By: edbernar { + mutationsList.forEach((mutation) => { + if (VrButton.innerText == 'VR NOT SUPPORTED') + document.getElementById('newButtonVr').style.display = 'none'; + if (mutation.attributeName === 'style') + VrButton.style.display = 'none'; + }); +}); // ------------------- (need to be remove) -------------------- // const cameraTmp = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight); @@ -75,7 +85,6 @@ class MultiOnlineGamePage { static create(skin) { - console.log(lastSelectedGoal); if (!skin) skin = {player: 0, opponent: 0}; const bar1 = createBarPlayer(availableSkins[skin.player]); @@ -89,6 +98,8 @@ class MultiOnlineGamePage renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.domElement.style.animation = 'fadeOutStartGames 1s'; renderer.domElement.style.filter = 'brightness(1)'; + + vrMode(); opponent = new Opponent(bar2, map, Math.floor(Math.random() * 100 % 6)); player = new Player(bar1, map, opponent, Math.floor(Math.random() * 100 % 6), skin.goalId); spotLight = new THREE.SpotLight(0xffffff, 10000, 0, 0.2); @@ -175,6 +186,8 @@ class MultiOnlineGamePage static dispose() { + observer.disconnect(); + VrButton = null; window.removeEventListener('resize', windowUpdater); if (interval) clearInterval(interval); @@ -298,7 +311,6 @@ function loop() renderer.render(scene, player.camera); } -let lastFpsArr = [10, 3, 5]; function showFps() { @@ -316,4 +328,40 @@ function showFps() lastFpsTime = now; } -export { MultiOnlineGamePage, player, opponent, ball, map}; \ No newline at end of file +function vrMode() +{ + const supportsXR = 'xr' in window.navigator; + const newButton = configButton(); + + if (!supportsXR) + return ; + renderer.xr.enabled = true; + document.body.appendChild( VRButton.createButton(renderer) ); + VrButton = document.getElementById('VRButton'); + observer.observe(VrButton, { attributes: true }); + if (VrButton.innerText !== 'VR NOT SUPPORTED') + document.body.append(newButton); +} + +function configButton() +{ + const newButton = document.createElement('button'); + const cameraGroup = new THREE.Group(); + + cameraGroup.name = "vrHeadset"; + newButton.innerText = "Vr mode"; + newButton.setAttribute('id', 'newButtonVr'); + newButton.addEventListener('click', () => { + VrButton.click(); + scene.add(cameraGroup); + scene.remove(player.camera); + player.configureVrController(); + cameraGroup.add(player.camera); + cameraGroup.position.set(0, 0.5, 7.5); + isInVrMode = true; + }); + return (newButton); +} + + +export { MultiOnlineGamePage, player, opponent, ball, map, scene, renderer, isInVrMode }; \ No newline at end of file diff --git a/docker-compose/requirements/nginx/static/javascript/three/examples/jsm/webxr/XRControllerModelFactory.js b/docker-compose/requirements/nginx/static/javascript/three/examples/jsm/webxr/XRControllerModelFactory.js index 9f60521..3fc8efd 100644 --- a/docker-compose/requirements/nginx/static/javascript/three/examples/jsm/webxr/XRControllerModelFactory.js +++ b/docker-compose/requirements/nginx/static/javascript/three/examples/jsm/webxr/XRControllerModelFactory.js @@ -150,14 +150,14 @@ function findNodes( motionController, scene ) { // If the extents cannot be found, skip this animation if ( ! visualResponse.minNode ) { - console.warn( `Could not find ${minNodeName} in the model` ); + // console.warn( `Could not find ${minNodeName} in the model` ); return; } if ( ! visualResponse.maxNode ) { - console.warn( `Could not find ${maxNodeName} in the model` ); + // console.warn( `Could not find ${maxNodeName} in the model` ); return; } diff --git a/docker-compose/requirements/nginx/static/style/game/games.css b/docker-compose/requirements/nginx/static/style/game/games.css index 3d6aa47..cd0a7b7 100644 --- a/docker-compose/requirements/nginx/static/style/game/games.css +++ b/docker-compose/requirements/nginx/static/style/game/games.css @@ -6,7 +6,7 @@ /* By: edbernar