diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js index 60e0508..75afc15 100644 --- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js +++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Ball.js @@ -59,6 +59,7 @@ class Ball mesh.receiveShadow = true; mesh.castShadow = true; + mesh.material.transparent = true; mesh.position.set(this.centerPos.x, this.centerPos.y, this.centerPos.z); return (mesh); } @@ -73,6 +74,23 @@ class Ball this.object.scale.set(1, 1, 1); }; + setVisibility(bool) + { + if (bool) + this.object.material.opacity = 1; + else + this.object.material.opacity = 0; + } + + setCastShadow(bool) + { + if (bool) + this.object.castShadow = true; + else + this.object.castShadow = false; + console.log("this.object.castShadow", bool); + } + setPosition(x, y, z) { this.object.position.set(x, y, z); @@ -86,7 +104,12 @@ class Ball const slower = speed / 3; if (diffBot > diffTop) + { speed *= -1; + this.setCastShadow(true); + } + else + this.setCastShadow(false); if (this.interval) clearInterval(this.interval); this.interval = setInterval(() => { diff --git a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js index ee7fe67..f07ff12 100644 --- a/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js +++ b/docker-compose/requirements/nginx/static/javascript/multiOnlineGame/Player.js @@ -12,7 +12,7 @@ import { fetchProfile, MotionController } from '/static/javascript/three/examples/jsm/libs/motion-controllers.module.js' import { XRControllerModelFactory } from '/static/javascript/three/examples/jsm/webxr/XRControllerModelFactory.js' -import { scene, renderer, isInVrMode } from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js' +import { scene, renderer, isInVrMode, ball } from '/static/javascript/multiOnlineGame/multiOnlineGamePage.js' import { lastSelectedGoal, availableGoals } from '/static/javascript/lobbyPage/3d.js'; import * as THREE from '/static/javascript/three/build/three.module.js' import { layoutSelected } from '/static/javascript/lobbyPage/main.js' @@ -147,6 +147,9 @@ class Player setTimeout(() => { this.mapVar.putVideoOnCanvas(0, null); }, 4000); + + ball.setVisibility(false); + if (isOpponent) { this.mapVar.reCreate("opponent"); @@ -171,7 +174,7 @@ class Player document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeInGames 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)'; - + setTimeout(() => { document.getElementsByTagName('canvas')[canvasIndex].style.animation = null; document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOutGames 0.199s'; @@ -208,6 +211,9 @@ class Player document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)'; setTimeout(() => { + ball.setVisibility(true); + ball.setCastShadow(true); + this.camera = tmp; this.object.material.color.copy(startColor); isOnPointAnim = false; @@ -246,6 +252,7 @@ class Player document.getElementsByTagName('canvas')[canvasIndex].style.animation = 'fadeOut 0.199s'; document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(1)'; }, 300) + setTimeout(() => { tmpCamera.position.set(this.limits.left, this.limits.up / 2 + 0.5, map.centerPos.z); isOnPointAnim = true; @@ -272,6 +279,9 @@ class Player document.getElementsByTagName('canvas')[canvasIndex].style.filter = 'brightness(0)'; setTimeout(() => { + ball.setVisibility(true); + ball.setCastShadow(true); + this.camera = tmp; oppponentObject.material.color.copy(startColor); isOnPointAnim = false;