From ea7c77d5ae3166e76843b64c51ea910dfee70b21 Mon Sep 17 00:00:00 2001 From: hubourge Date: Tue, 10 Sep 2024 17:18:05 +0200 Subject: [PATCH] Game - add changeColor for player - add changeGround for plane --- site/real_game/class/MultiGame.js | 10 +++--- site/real_game/class/SoloGame.js | 12 +++---- site/real_game/class/soloClass/Map.js | 42 ++++++++++++++++++----- site/real_game/class/soloClass/Players.js | 15 +++++--- 4 files changed, 52 insertions(+), 27 deletions(-) diff --git a/site/real_game/class/MultiGame.js b/site/real_game/class/MultiGame.js index cf76535..4ae92a2 100644 --- a/site/real_game/class/MultiGame.js +++ b/site/real_game/class/MultiGame.js @@ -6,7 +6,7 @@ /* By: hubourge +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/18 00:53:53 by edbernar #+# #+# */ -/* Updated: 2024/08/29 17:54:30 by hubourge ### ########.fr */ +/* Updated: 2024/09/10 17:16:22 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -36,7 +36,7 @@ Controls : - 4 : balle vers la gauche - 6 : balle vers ladroite - 9 : inversion gravite - + - p : clear video - o : goal video - i : outstanding video @@ -105,7 +105,6 @@ 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); @@ -117,7 +116,7 @@ class MultiGame map.putVideoOnCanvas(0, null); if (e.key == 'o') map.putVideoOnCanvas(3, 'goal'); - if (e.key == 'i') + if (e.key == 'i') map.putVideoOnCanvas(3, 'outstanding'); if (e.key == 'u') map.putVideoOnCanvas(3, 3); @@ -129,7 +128,7 @@ class MultiGame renderer.setAnimationLoop(loop) } - + static dispose() { debug = false; @@ -165,7 +164,6 @@ class MultiGame } } - function createBarPlayer(color) { const geometry = new THREE.BoxGeometry(1, 0.1, 0.1); diff --git a/site/real_game/class/SoloGame.js b/site/real_game/class/SoloGame.js index 96bb601..b678887 100644 --- a/site/real_game/class/SoloGame.js +++ b/site/real_game/class/SoloGame.js @@ -3,16 +3,16 @@ /* ::: :::::::: */ /* SoloGame.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/28 12:07:39 by edbernar #+# #+# */ -/* Updated: 2024/09/08 17:02:58 by edbernar ### ########.fr */ +/* Updated: 2024/09/10 17:16:02 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ import * as THREE from 'three'; -import { Map } from './soloClass/Map.js' -import { Players } from './soloClass/Players.js' +import { Map, ground } from './soloClass/Map.js' +import { Players, player1, player2 } from './soloClass/Players.js' import { Ball } from './soloClass/Ball.js' import { stats } from './MultiGame.js'; @@ -38,13 +38,12 @@ class SoloGame { static create() { - scene = new THREE.Scene(); renderer = new THREE.WebGLRenderer({antialias: true}); renderer.domElement.style.animation = 'fadeOutStart 1s'; renderer.domElement.style.filter = 'brightness(1)'; document.getElementById('score').style.animation = 'fadeOutStart 1s'; - + renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; Ball.create(scene); @@ -91,7 +90,6 @@ class SoloGame } }; - function loop() { stats.begin(); diff --git a/site/real_game/class/soloClass/Map.js b/site/real_game/class/soloClass/Map.js index a9db39e..895b5ad 100644 --- a/site/real_game/class/soloClass/Map.js +++ b/site/real_game/class/soloClass/Map.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* Map.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/28 12:23:48 by edbernar #+# #+# */ -/* Updated: 2024/09/08 17:04:12 by edbernar ### ########.fr */ +/* Updated: 2024/09/10 17:16:43 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -40,13 +40,12 @@ let initialSpeed = 3; class Map { - static create(scene) { world = new CANNON.World({ gravity: new CANNON.Vec3(0, -9.81, 0), }); - ground = createGround(scene); + ground = createGround(scene, '/textures/pastel.jpg'); wallBottom = createWall(false); wallTop = createWall(true); spotLight = new THREE.SpotLight({color: 0xffffff}); @@ -213,7 +212,6 @@ class Map return; } }); - } static dispose() @@ -302,14 +300,40 @@ class Map scoreElement.style.color = 'rgb(255, 255, 255, 0.1)'; }, 1200); } + + static changeGround(ground, texture) + { + if (ground.material) + ground.material.dispose(); + if (typeof(texture) == 'string') + { + const textureLoader = new THREE.TextureLoader(); + texture = textureLoader.load(texture); + ground.material.map = texture; + } + else if (typeof(texture) == 'number') + ground.material.color.set(texture); + } } -function createGround(scene) +function createGround(scene, texture) { const geometry = new THREE.PlaneGeometry(width, height); - const material = new THREE.MeshPhysicalMaterial({color: 0x222222}); - const mesh = new THREE.Mesh(geometry, material); + let material = null; + let mesh = null; + if (typeof(texture) == 'string') + { + const textureLoader = new THREE.TextureLoader(); + texture = textureLoader.load(texture); + material = new THREE.MeshPhysicalMaterial({ map: texture }); + } + else if (typeof(texture) == 'number') + material = new THREE.MeshPhysicalMaterial({ color: texture }); + else + material = new THREE.MeshPhysicalMaterial({color: 0x222222}); + + mesh = new THREE.Mesh(geometry, material); mesh.rotateX(-Math.PI / 2); mesh.position.set(0, 0, 0); scene.add(mesh); @@ -324,4 +348,4 @@ function createWall(onTop) return (mesh); } -export { Map, wallBottom, wallTop }; +export { Map, wallBottom, wallTop, ground }; diff --git a/site/real_game/class/soloClass/Players.js b/site/real_game/class/soloClass/Players.js index 0c1131a..48d3196 100644 --- a/site/real_game/class/soloClass/Players.js +++ b/site/real_game/class/soloClass/Players.js @@ -6,7 +6,7 @@ /* By: hubourge +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/28 15:12:25 by edbernar #+# #+# */ -/* Updated: 2024/09/04 16:35:30 by hubourge ### ########.fr */ +/* Updated: 2024/09/10 16:37:09 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -21,8 +21,8 @@ class Players { static create(scene) { - player1 = newBarPlayer(1); - player2 = newBarPlayer(2); + player1 = newBarPlayer(1, 0xffffff); + player2 = newBarPlayer(2, 0xffffff); scene.add(player1); scene.add(player2); @@ -58,12 +58,17 @@ class Players i++; } } + + static changeColor(player, color) + { + player.material.color.set(color); + } } -function newBarPlayer(nbPlayer) +function newBarPlayer(nbPlayer, color) { const geometry = new THREE.BoxGeometry(0.3, 0.4, 2.5); - const material = new THREE.MeshPhysicalMaterial({color: 0xffffff}); + const material = new THREE.MeshPhysicalMaterial({color: color}); const mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true;