tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site

Browse Source 
- Updated functions in class with function create/dispose
This commit is contained in:
Kum1ta
2024-08-25 02:25:50 +02:00
parent 59fc6a9ffb
commit 9b563d4855
6 changed files with 361 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docker-compose/requirements/nginx/static/javascript/Page.js Normal file
View File

@ -0,0 +1,24 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* Page.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/25 00:00:21 by edbernar #+# #+# */
/* Updated: 2024/08/25 00:27:21 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
class Page
{
actualPage = null;
constructor()
{
}
};
export { Page }

15
docker-compose/requirements/nginx/static/javascript/home3D/Screen.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:27:42 by edbernar ### ########.fr */
/* Updated: 2024/08/25 02:16:17 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -25,15 +25,17 @@ let light = {
class Screen
{
scene = null;
screen = null;
tv = null;
screenMaterial = null;
canvasVideo = null;
interval = null;
intervalLight = null;
constructor(scene)
{
this.scene = scene;
this.screen = this.#createScreen(scene);
loader.load(tvModel, (gltf) => {
const tv = gltf.scene.children[0];
@ -89,7 +91,7 @@ class Screen
pointLight.target = targetObject;
pointLight.target.updateMatrixWorld();
scene.add(pointLight);
setInterval(() => {
this.intervalLight = setInterval(() => {
const intensity = Math.random() * 2 + 10;
pointLight.intensity = intensity * light.point > 13 * light.point ? 13 * light.point : intensity * light.point;
@ -175,6 +177,13 @@ class Screen
}
}
dispose()
{
this.#disposeVideo();
if (this.intervalLight)
clearInterval(this.intervalLight);
}
};

446
docker-compose/requirements/nginx/static/javascript/home3D/home3D.js
View File

@ -6,212 +6,308 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:24:22 by edbernar ### ########.fr */
/* Updated: 2024/08/25 02:19:56 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from '/static/javascript/three/build/three.module.js'
import { Screen, light } from '/static/javascript/home3D/Screen.js'
import { EffectComposer } from '/static/javascript/three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from '/static/javascript/three/examples/jsm/postprocessing/RenderPass.js';
import { BokehPass } from '/static/javascript/three/examples/jsm/postprocessing/BokehPass.js';
import * as THREE from '/static/javascript/three/build/three.module.js'
import { Screen, light } from '/static/javascript/home3D/Screen.js'
let scene = null;
let renderer = null;
let camera = null;
let screen = null;
let raycaster = null;
let interval = null;
let intervalFade = null;
let isInFade = false;
let composer = null;
let mouse = null;
let renderPass = null;
let dofPass = null;
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({antialias: true});
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight);
const ambiantLight = new THREE.AmbientLight(0xffffff, 35);
const screen = new Screen(scene);
const cube = createCube();
renderer.toneMapping = THREE.LinearToneMapping;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.getElementsByClassName('homeSection')[0].appendChild(renderer.domElement);
scene.background = new THREE.Color(0x020202)
camera.position.set(6, 1, -5.5);
camera.rotation.set(Math.PI + 0.2, 0, Math.PI);
scene.add(ambiantLight);
let globalSpeed = 0.75;
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
const dofPass = new BokehPass(scene, camera, {
focus: 10.0,
aperture: 0.02,
maxblur: 0.01,
});
composer.addPass(dofPass);
setTimeout(() => {
let interval = setInterval(() => {
camera.position.x -= (0.01 * globalSpeed);
camera.lookAt(screen.tv.position);
if (camera.position.x < 3.3)
fadeInOut();
if (dofPass.materialBokeh.uniforms.aperture.value > 0)
dofPass.materialBokeh.uniforms.aperture.value -= 0.0001;
if (camera.position.x < 3)
{
clearInterval(interval);
camera.position.set(-2, 4, -6);
interval = setInterval(() => {
camera.lookAt(screen.tv.position);
camera.position.x += (0.01 * globalSpeed);
camera.position.y -= (0.005 * globalSpeed);
if (camera.position.x > 1.7)
fadeInOut();
if (camera.position.x > 2)
{
camera.position.set(0, 1.2, 0);
clearInterval(interval);
interval = setInterval(() => {
camera.lookAt(screen.tv.position);
camera.position.y += (0.005 * globalSpeed);
camera.position.z -= (0.01 * globalSpeed);
if (camera.position.x < -2.3)
fadeInOut();
if (camera.position.z < -2)
{
globalSpeed -= 0.001;
if (globalSpeed < 0)
clearInterval(interval);
}
}, 10);
}
}, 10);
}
}, 10);
}, 500)
document.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
});
let isInFade = false;
function fadeInOut()
class Home3D
{
if (isInFade)
return;
let interval = null;
isInFade = true;
interval = setInterval(() => {
light.point -= 0.2;
screen.screen.material.opacity -= 0.05;
if (screen.screen.material.opacity <= 0)
{
static create()
{
home3D();
}
static dispose()
{
document.removeEventListener('resize', windowUpdater);
document.removeEventListener('mousemove', mouseTracker);
if (interval)
clearInterval(interval);
setTimeout(() => {
interval = setInterval(() => {
light.point += 0.2;
screen.screen.material.opacity += 0.05;
if (screen.screen.material.opacity >= 1)
{
clearInterval(interval);
interval = setInterval(() => {
light.point += 0.2;
if (light.point >= 1)
clearInterval(interval);
}, 10);
isInFade = false;
}
}, 20);
}, 500);
interval = null;
if (intervalFade)
clearInterval(intervalFade);
intervalFade = null;
if (screen)
screen.dispose();
screen = null;
if (composer)
{
if (dofPass)
composer.removePass(dofPass);
if (renderPass)
composer.removePass(renderPass);
composer.dispose();
dofPass = null;
composer = null;
}
}, 20);
isInFade = false;
if (renderer)
renderer.dispose();
renderer = null;
if (scene)
{
scene.children.forEach(child => {
scene.remove(child);
if (child.geometry)
child.geometry.dispose();
if (child.material)
child.material.dispose();
if (child.texture)
child.texture.dispose();
});
}
scene = null;
camera = null;
mouse = null;
}
}
function createCube()
{
const geometry = new THREE.BoxGeometry(5, 5, 0.1);
const material = new THREE.MeshStandardMaterial({color: 0x020202});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(8, 1, -5);
scene.add(mesh);
}
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
document.addEventListener( 'mousemove', (event) => {
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
});
function home3D()
{
let actualVideo = -1;
let globalSpeed = 0.75;
const ambiantLight = new THREE.AmbientLight(0xffffff, 35);
const video = {
pong: '/static/video/homePage/pong.mp4',
login: '/static/video/homePage/notLogin.webm'
};
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({antialias: true});
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight);
screen = new Screen(scene);
raycaster = new THREE.Raycaster();
interval = null;
mouse = new THREE.Vector2();
isInFade = false;
if (Math.random() % 100 > 0.97)
video.pong = '/static/video/homePage/easteregg.webm'
renderer.toneMapping = THREE.LinearToneMapping;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.set(6, 1, -5.5);
camera.rotation.set(Math.PI + 0.2, 0, Math.PI);
scene.background = new THREE.Color(0x020202)
scene.add(ambiantLight);
createPlane();
renderer.setAnimationLoop(loop)
}
createCube();
document.body.getElementsByClassName('homeSection')[0].appendChild(renderer.domElement);
function createPlane()
{
const geometry = new THREE.PlaneGeometry(500, 500);
const material = new THREE.MeshPhysicalMaterial({side: THREE.DoubleSide, color: 0x020202});
const mesh = new THREE.Mesh(geometry, material);
document.addEventListener('resize', windowUpdater);
document.addEventListener('mousemove', mouseTracker);
mesh.position.set(0, 0, 0);
mesh.rotateX(-(Math.PI / 2));
mesh.receiveShadow = true;
scene.add(mesh);
}
composer = new EffectComposer(renderer);
renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
dofPass = new BokehPass(scene, camera, {
focus: 10.0,
aperture: 0.02,
maxblur: 0.01,
});
composer.addPass(dofPass);
const video = {
pong: '/static/video/homePage/pong.mp4',
login: '/static/video/homePage/notLogin.webm'
}
let actualVideo = -1;
if (Math.random() % 100 > 0.97)
video.pong = '/static/video/homePage/easteregg.webm'
setTimeout(() => {
interval = setInterval(() => {
if (screen == null)
{
clearInterval(interval);
return ;
}
camera.position.x -= (0.01 * globalSpeed);
camera.lookAt(screen.tv.position);
if (camera.position.x < 3.3)
fadeInOut();
if (dofPass.materialBokeh.uniforms.aperture.value > 0)
dofPass.materialBokeh.uniforms.aperture.value -= 0.0001;
if (camera.position.x < 3)
{
clearInterval(interval);
camera.position.set(-2, 4, -6);
interval = setInterval(() => {
if (screen == null)
{
clearInterval(interval);
return ;
}
camera.lookAt(screen.tv.position);
camera.position.x += (0.01 * globalSpeed);
camera.position.y -= (0.005 * globalSpeed);
if (camera.position.x > 1.7)
fadeInOut();
if (camera.position.x > 2)
{
camera.position.set(0, 1.2, 0);
clearInterval(interval);
interval = setInterval(() => {
if (screen == null)
{
clearInterval(interval);
return ;
}
camera.lookAt(screen.tv.position);
camera.position.y += (0.005 * globalSpeed);
camera.position.z -= (0.01 * globalSpeed);
if (camera.position.x < -2.3)
fadeInOut();
if (camera.position.z < -2)
{
globalSpeed -= 0.001;
if (globalSpeed < 0)
clearInterval(interval);
}
}, 10);
}
}, 10);
}
}, 10);
}, 500);
setTimeout(() => {
screen.changeVideo(video.pong);
actualVideo = 0;
}, 100);
setTimeout(() => {
screen.changeVideo(video.pong);
actualVideo = 0;
}, 100);
function loop()
{
raycaster.setFromCamera( mouse, camera );
const intersects = raycaster.intersectObjects( scene.children, false );
if (!screen.canvasVideo)
function loop()
{
composer.render();
return ;
}
if (intersects.length === 0)
{
if (actualVideo != 0)
raycaster.setFromCamera( mouse, camera );
const intersects = raycaster.intersectObjects( scene.children, false );
if (!screen.canvasVideo)
{
composer.render();
return ;
}
if (intersects.length === 0)
{
if (actualVideo != 0)
{
screen.changeVideo(video.pong);
actualVideo = 0;
}
}
else if (intersects[0].object == screen.screen)
{
if (actualVideo != 1)
{
screen.changeVideo(video.login);
actualVideo = 1;
}
}
else if (actualVideo != 0)
{
screen.changeVideo(video.pong);
actualVideo = 0;
}
composer.render();
}
else if (intersects[0].object == screen.screen)
function createCube()
{
if (actualVideo != 1)
{
screen.changeVideo(video.login);
actualVideo = 1;
}
const geometry = new THREE.BoxGeometry(5, 5, 0.1);
const material = new THREE.MeshStandardMaterial({color: 0x020202});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(8, 1, -5);
scene.add(mesh);
}
else if (actualVideo != 0)
function createPlane()
{
screen.changeVideo(video.pong);
actualVideo = 0;
const geometry = new THREE.PlaneGeometry(500, 500);
const material = new THREE.MeshPhysicalMaterial({side: THREE.DoubleSide, color: 0x020202});
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
mesh.rotateX(-(Math.PI / 2));
mesh.receiveShadow = true;
scene.add(mesh);
}
composer.render();
function fadeInOut()
{
if (isInFade)
return;
intervalFade = null;
isInFade = true;
intervalFade = setInterval(() => {
if (screen == null)
{
clearInterval(intervalFade);
return ;
}
light.point -= 0.2;
screen.screen.material.opacity -= 0.05;
if (screen.screen.material.opacity <= 0)
{
clearInterval(intervalFade);
setTimeout(() => {
if (screen == null)
{
clearInterval(intervalFade);
return ;
}
interval = setInterval(() => {
light.point += 0.2;
screen.screen.material.opacity += 0.05;
if (screen.screen.material.opacity >= 1)
{
if (screen == null)
{
clearInterval(intervalFade);
return ;
}
clearInterval(intervalFade);
intervalFade = setInterval(() => {
light.point += 0.2;
if (light.point >= 1)
clearInterval(intervalFade);
}, 10);
isInFade = false;
}
}, 20);
}, 500);
}
}, 20);
}
renderer.setAnimationLoop(loop)
}
function windowUpdater()
{
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
};
export { home3D };
function mouseTracker (event)
{
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
};
export { Home3D };

43
docker-compose/requirements/nginx/static/javascript/homePage/main.js Normal file
View File

@ -0,0 +1,43 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/25 00:02:19 by edbernar #+# #+# */
/* Updated: 2024/08/25 02:06:24 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { Home3D } from "/static/javascript/home3D/home3D.js"
class HomePage
{
static create()
{
Home3D.create();
window.addEventListener('scroll', scrool);
}
static dispose()
{
Home3D.dispose();
window.addEventListener('scroll', scrool);
}
};
function scrool()
{
const scrollPosition = window.scrollY;
const rotationAngle = scrollPosition * 0.1;
const parallaxElement = document.querySelector('#firstBall');
const parallaxElement2 = document.querySelector('#secondBall');
const parallaxSpeed = scrollPosition * -0.17;
parallaxElement.style.transform = `translateX(-50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
parallaxElement2.style.transform = `translateX(50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
}
export { HomePage };

24
docker-compose/requirements/nginx/static/javascript/main.js
View File

@ -6,31 +6,19 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:24:33 by edbernar ### ########.fr */
/* Updated: 2024/08/25 02:21:47 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { liveChat } from "/static/javascript/liveChat/main.js";
import { login } from "/static/javascript/login/main.js";
import { home3D } from "/static/javascript/home3D/home3D.js"
window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
const rotationAngle = scrollPosition * 0.1;
const parallaxElement = document.querySelector('#firstBall');
const parallaxElement2 = document.querySelector('#secondBall');
const parallaxSpeed = scrollPosition * -0.17;
parallaxElement.style.transform = `translateX(-50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
parallaxElement2.style.transform = `translateX(50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
});
// document.getElementById('closePopupBtn').addEventListener('click', function() {
// document.getElementById('loginPopup').style.display = 'none';
// });
import { HomePage } from "/static/javascript/homePage/main.js"
document.addEventListener('DOMContentLoaded', () => {
liveChat();
login();
home3D();
HomePage.create();
setTimeout(() => {
HomePage.dispose();
}, 3000);
});

BIN
site/.DS_Store vendored
View File

Binary file not shown.