diff --git a/site/interface/site/node_modules/.vite/deps/_metadata.json b/site/interface/site/node_modules/.vite/deps/_metadata.json index f6d7604..751a842 100644 --- a/site/interface/site/node_modules/.vite/deps/_metadata.json +++ b/site/interface/site/node_modules/.vite/deps/_metadata.json @@ -1,37 +1,37 @@ { - "hash": "44aef43e", - "configHash": "da99a08f", + "hash": "7e40e66f", + "configHash": "1c0dd527", "lockfileHash": "7685a2f8", - "browserHash": "e0102bd3", + "browserHash": "983524d9", "optimized": { "three": { "src": "../../three/build/three.module.js", "file": "three.js", - "fileHash": "b1c96f0f", + "fileHash": "984f85ee", "needsInterop": false }, "three/addons/loaders/GLTFLoader.js": { "src": "../../three/examples/jsm/loaders/GLTFLoader.js", "file": "three_addons_loaders_GLTFLoader__js.js", - "fileHash": "cfe30105", + "fileHash": "66ec985f", "needsInterop": false }, "three/examples/jsm/postprocessing/BokehPass.js": { "src": "../../three/examples/jsm/postprocessing/BokehPass.js", "file": "three_examples_jsm_postprocessing_BokehPass__js.js", - "fileHash": "99b44bd7", + "fileHash": "217f0d5f", "needsInterop": false }, "three/examples/jsm/postprocessing/EffectComposer.js": { "src": "../../three/examples/jsm/postprocessing/EffectComposer.js", "file": "three_examples_jsm_postprocessing_EffectComposer__js.js", - "fileHash": "113be6c6", + "fileHash": "2b9f8294", "needsInterop": false }, "three/examples/jsm/postprocessing/RenderPass.js": { "src": "../../three/examples/jsm/postprocessing/RenderPass.js", "file": "three_examples_jsm_postprocessing_RenderPass__js.js", - "fileHash": "9b0442c1", + "fileHash": "5b030582", "needsInterop": false } }, diff --git a/site/real_game/class/Map.js b/site/real_game/class/Map.js index 39ce25b..64eb655 100644 --- a/site/real_game/class/Map.js +++ b/site/real_game/class/Map.js @@ -6,7 +6,7 @@ /* By: hubourge +#+ +:+ +#+ */ /* +#+#+#+#+#+ +#+ */ /* Created: 2024/08/20 14:52:55 by hubourge #+# #+# */ -/* Updated: 2024/08/23 19:01:35 by hubourge ### ########.fr */ +/* Updated: 2024/08/24 19:55:26 by hubourge ### ########.fr */ /* */ /* ************************************************************************** */ @@ -55,11 +55,10 @@ class Map scene.add(this.#createPlanes(7.5, length, (Math.PI / 2), "planeTop", false, '/textures/pastel.jpg')); scene.add(this.#createWall(-3.5, 0.4, -length/2, "wallLeft")); scene.add(this.#createWall(3.5, 0.4, -length/2, "wallRight")); - this.#createBanner(10, 1); + this.#createBanner(); if (obstacles) this.#generateObstacle(); - /***** JUST FOR TEST *****/ document.addEventListener('keypress', (e) => { if (e.key == 'q') @@ -192,7 +191,7 @@ class Map for (let i = 0; i < group.children.length && !onTop; i++) group.children[i].position.set(x, y, z); - let distanceY = [-0.02, -0.104, -0.204, 0.048, 0.049, -0.125]; + 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 @@ -228,71 +227,107 @@ class Map /* Todo (Hugo) : - Faire une zone Player banner (importer un model blender) - - Faire une zone pour les pub (s'inspirer de theFinals) + - 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 */ - #createBanner(radius1, height1) + #createBanner() { - const scene = this.scene; - const canvas = document.createElement('canvas'); - const context = canvas.getContext('2d'); - - canvas.width = 10000 / 10; - canvas.height = 512 / 10; - - const centerX = canvas.width / 2; - const centerY = canvas.height / 2; - - context.font = '25px Arial'; - context.fillStyle = 'white'; - context.textAlign = 'center'; - context.textBaseline = 'middle'; + // Create canvas + const videoCanvas = document.createElement('canvas'); + const ctx = videoCanvas.getContext('2d'); + videoCanvas.width = 100 * 2.33 * 20; + videoCanvas.height = 100; - // Geberate player banner content - let playerName = '1234567890123456'; - let text = '0 '; - for (let i = 0; i < -(playerName.length - 16); i++) - text += ' '; - text += playerName; - for (let i = 0; i < -(playerName.length - 16); i++) - text += ' '; - text += ' 0'; - context.fillText(text, centerX, centerY); + // Load videos + const video1 = document.createElement('video'); + video1.src = '../textures/video/catch.mp4'; + video1.muted = true; + video1.autoplay = true; + video1.loop = true; + video1.addEventListener('loadeddata', () => { + video1.play(); + drawVideoOnCanvas(); + }); - // Generate texture - const texture = new THREE.CanvasTexture(canvas); - texture.wrapS = THREE.RepeatWrapping; - texture.wrapT = THREE.RepeatWrapping; - texture.repeat.set(-2, 1); - - // let video = document.getElementById('video'); - // video.src = "video.webm"; - // let videoTexture = new THREE.VideoTexture(video); - // videoTexture.wrapS = THREE.RepeatWrapping; - // videoTexture.wrapT = THREE.RepeatWrapping; - // videoTexture.repeat.set(-2, 1); - - const material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide }); + const video2 = document.createElement('video'); + video2.src = '../textures/video/pingpong.mp4'; + video2.muted = true; + video2.autoplay = true; + video2.loop = true; + video2.addEventListener('loadeddata', () => { + video2.play(); + drawVideoOnCanvas(); + }); - canvas.innerHTML = 'Test'; + const nbVideos = 2; // 1, 2 + const nbImages = 2; // 0 = 2 img, 1 = 4 img, 2 = 8 img, 3 = 16 img + + let vSettings = [ + {video: video1, imageWidth: 100 * 2.33, imageHeight: 100}, // 2 images + {video: video2, imageWidth: 100 * 2.33, imageHeight: 100}, // 4 images + {video: video1, imageWidth: 100 * 2.33, imageHeight: 100}, // 8 images + {video: video2, imageWidth: 100 * 2.33, imageHeight: 100}, // 16 images + ]; + + let spacingImages = [ + 100 * 2.33 * 10 - (100 * 2.33), + 100 * 2.33 * 5 - (100 * 2.33), + 100 * 2.33 * 2.5 - (100 * 2.33), + 100 * 2.33 * 1.25 - (100 * 2.33), + ]; + + function drawVideoOnCanvas() { + ctx.clearRect(0, 0, videoCanvas.width, videoCanvas.height); + + let nbDraw = 0; + let vIndex = 0; + let y = 0; + for (let x = 0; x < videoCanvas.width; x += (vSettings[vIndex].imageWidth + spacingImages[nbImages])) + { + ctx.drawImage(vSettings[vIndex].video, x, y, vSettings[vIndex].imageWidth, vSettings[vIndex].imageHeight); + nbDraw++; + if (nbVideos > 1) + vIndex++; + if (vIndex >= nbVideos) + vIndex = 0; + } + + videoCanvasTexture.needsUpdate = true; + requestAnimationFrame(drawVideoOnCanvas); + } + + // Create texture + const videoCanvasTexture = new THREE.CanvasTexture(videoCanvas); + videoCanvasTexture.wrapS = THREE.RepeatWrapping; + videoCanvasTexture.wrapT = THREE.RepeatWrapping; + videoCanvasTexture.repeat.set(-1, 1); + + const material = new THREE.MeshBasicMaterial({ map: videoCanvasTexture, side: THREE.BackSide }); + + // videoCanvas.innerHTML = 'Test'; // ca sert ca eddy ? loader.load( '../blender/exported/banner.glb', (gltf) => { this.banner = gltf.scene.children[0]; this.banner.material = material; this.banner.position.y += 1.7; this.banner.rotation.x = (Math.PI); - this.banner.rotation.y += 4.7; - scene.add(gltf.scene); - // setInterval(() => { - // this.banner.rotation.y += 0.001; - // }, 10); + this.banner.rotation.y += -0.15; + this.scene.add(gltf.scene); + setInterval(() => { + this.banner.rotation.y += 0.001; + }, 10); }, undefined, function ( error ) { console.error( error ); } ); - } + function animate() { + requestAnimationFrame(animate); + } + animate(); + } + #animationGravityChanger(group, onTop) { const geometry1 = new THREE.TorusGeometry(1.5, 0.05, 12, 24); diff --git a/site/real_game/node_modules/.vite/deps/_metadata.json b/site/real_game/node_modules/.vite/deps/_metadata.json index 7a8f17b..032eec3 100644 --- a/site/real_game/node_modules/.vite/deps/_metadata.json +++ b/site/real_game/node_modules/.vite/deps/_metadata.json @@ -1,31 +1,31 @@ { - "hash": "aeb97021", - "configHash": "0b4c6e74", + "hash": "7e76cfec", + "configHash": "5fafa2f5", "lockfileHash": "cd36b699", - "browserHash": "7e895c56", + "browserHash": "646e677d", "optimized": { "stats.js": { "src": "../../stats.js/build/stats.min.js", "file": "stats__js.js", - "fileHash": "8ddcd2c8", + "fileHash": "88fb8476", "needsInterop": true }, "three": { "src": "../../three/build/three.module.js", "file": "three.js", - "fileHash": "f7b14752", + "fileHash": "4d7e3e6d", "needsInterop": false }, "three/addons/loaders/GLTFLoader.js": { "src": "../../three/examples/jsm/loaders/GLTFLoader.js", "file": "three_addons_loaders_GLTFLoader__js.js", - "fileHash": "529e8aba", + "fileHash": "14e5ff07", "needsInterop": false }, "three/examples/jsm/Addons.js": { "src": "../../three/examples/jsm/Addons.js", "file": "three_examples_jsm_Addons__js.js", - "fileHash": "834ab11f", + "fileHash": "513fd047", "needsInterop": false } }, diff --git a/site/real_game/textures/video.webm b/site/real_game/textures/video.webm deleted file mode 100644 index 6a2b601..0000000 Binary files a/site/real_game/textures/video.webm and /dev/null differ diff --git a/site/real_game/textures/video/catch.mp4 b/site/real_game/textures/video/catch.mp4 new file mode 100644 index 0000000..c10fe03 Binary files /dev/null and b/site/real_game/textures/video/catch.mp4 differ diff --git a/site/real_game/textures/video/fortnite.mp4 b/site/real_game/textures/video/fortnite.mp4 new file mode 100644 index 0000000..3ea80ad Binary files /dev/null and b/site/real_game/textures/video/fortnite.mp4 differ diff --git a/site/real_game/textures/video/pingpong.mp4 b/site/real_game/textures/video/pingpong.mp4 new file mode 100644 index 0000000..1a5dad1 Binary files /dev/null and b/site/real_game/textures/video/pingpong.mp4 differ