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

Site

Browse Source 
- Added move on camera with effect
This commit is contained in:
Kum1ta
2024-08-24 02:56:55 +02:00
parent 6364f2e9ec
commit ad71b653b6
4 changed files with 122 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
site/interface/site/home3D/Screen.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */ /* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */
/* Updated: 2024/08/23 02:24:09 by edbernar ### ########.fr */ /* Updated: 2024/08/24 02:36:42 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -19,6 +19,8 @@ class Screen
{ {
screen = null; screen = null;
tv = null; tv = null;
pointLightIntensity = 1;
screenMaterial = null;
constructor(scene) constructor(scene)
{ {
@ -31,7 +33,9 @@ class Screen
tv.geometry.center(); tv.geometry.center();
this.tv = tv; this.tv = tv;
tv.position.set(0, 0.99, 2); tv.position.set(0, 0.99, 2);
// tv.material = new THREE.MeshPhysicalMaterial({color: 0x222222}); tv.material = new THREE.MeshPhysicalMaterial({color: 0xaaaaaa});
tv.material.roughness = 10;
tv.material.metalness = 1;
tv.scale.set(0.05, 0.05, 0.05); tv.scale.set(0.05, 0.05, 0.05);
tv.castShadow = true; tv.castShadow = true;
tv.receiveShadow = true; tv.receiveShadow = true;
@ -50,7 +54,7 @@ class Screen
const vertices = positionAttribute.array; const vertices = positionAttribute.array;
const material = new THREE.MeshStandardMaterial({color: 0xbbbbbb}); const material = new THREE.MeshStandardMaterial({color: 0xbbbbbb});
const mesh = new THREE.Mesh(geometry, material); const mesh = new THREE.Mesh(geometry, material);
const pointLight = new THREE.PointLight( 0xffffff, 5, 0, 2); const pointLight = new THREE.PointLight( 0xffffff, 10 * this.pointLightIntensity, 0, 2);
for (let i = 0; i < vertices.length; i += 3) for (let i = 0; i < vertices.length; i += 3)
{ {
@ -62,20 +66,20 @@ class Screen
} }
positionAttribute.needsUpdate = true; positionAttribute.needsUpdate = true;
mesh.scale.set(0.4, 0.4); mesh.scale.set(0.4, 0.4);
mesh.position.set(-0.155, 1.2, 1.3); mesh.position.set(-0.155, 1.2, 1.15);
mesh.rotation.x = Math.PI + 0.05; mesh.rotation.x = Math.PI + 0.05;
mesh.rotation.z = Math.PI; mesh.rotation.z = Math.PI;
scene.add(mesh); scene.add(mesh);
pointLight.position.set(-0.155, 1.2, 0.8); pointLight.position.set(-0.05, 1.2, 0.95);
pointLight.castShadow = true; pointLight.castShadow = true;
pointLight.shadow.mapSize.width = 2048; pointLight.shadow.mapSize.width = 2048;
pointLight.shadow.mapSize.height = 2048; pointLight.shadow.mapSize.height = 2048;
pointLight.shadow.radius = 20; console.log(pointLight.shadow)
scene.add(pointLight); scene.add(pointLight);
setInterval(() => { setInterval(() => {
const intensity = Math.random() * 2 + 5; const intensity = Math.random() * 2 + 10;
pointLight.intensity = intensity < 5 ? 5 : (intensity > 7 ? 7 : intensity); pointLight.intensity = intensity * this.pointLightIntensity > 13 * this.pointLightIntensity ? 13 * this.pointLightIntensity : intensity * this.pointLightIntensity;
}, 100); }, 100);
return (mesh); return (mesh);
} }
@ -86,7 +90,7 @@ class Screen
const context = canvas.getContext('2d', { willReadFrequently: true }); const context = canvas.getContext('2d', { willReadFrequently: true });
const video = document.createElement('video'); const video = document.createElement('video');
const texture = new THREE.CanvasTexture(canvas); const texture = new THREE.CanvasTexture(canvas);
const material = new THREE.MeshBasicMaterial({ map: texture,color: 0xffffff }); const material = new THREE.MeshBasicMaterial({ map: texture,color: 0xffffff, transparent: true, opacity: 1 });
canvas.width = 534; canvas.width = 534;
canvas.height = 360; canvas.height = 360;
@ -102,7 +106,7 @@ class Screen
updateCanvas(); updateCanvas();
}).catch(err => console.error("Error playing video: ", err)); }).catch(err => console.error("Error playing video: ", err));
}); });
function addNoiseOnImage(context) function addNoiseOnImage(context)
{ {
const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
@ -113,7 +117,7 @@ class Screen
const g = data[i + 1]; const g = data[i + 1];
const b = data[i + 2]; const b = data[i + 2];
const brightness = (3 * r + 4 * g + b) >>> 3; const brightness = (3 * r + 4 * g + b) >>> 3;
const noise = Math.random() * 32 - 16; const noise = Math.random() * 128 - 32;
data[i] = data[i + 1] = data[i + 2] = brightness + noise; data[i] = data[i + 1] = data[i + 2] = brightness + noise;
} }
context.putImageData(imageData, 0, 0); context.putImageData(imageData, 0, 0);
@ -127,10 +131,9 @@ class Screen
context.drawImage(video, 0, 0, canvas.width, canvas.height); context.drawImage(video, 0, 0, canvas.width, canvas.height);
addNoiseOnImage(context); addNoiseOnImage(context);
texture.needsUpdate = true; texture.needsUpdate = true;
requestAnimationFrame(updateCanvas);
} }
requestAnimationFrame(updateCanvas);
} }
texture.offset.set(0.02, 0); texture.offset.set(0.02, 0);
this.screen.material = material; this.screen.material = material;
video.load(); video.load();

132
site/interface/site/home3D/home3D.js
View File

@ -6,29 +6,86 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */ /* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
/* Updated: 2024/08/23 02:23:55 by edbernar ### ########.fr */ /* Updated: 2024/08/24 02:46:49 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import * as THREE from 'three' import * as THREE from 'three'
import { Screen } from './Screen.js' import { Screen } from './Screen.js'
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({antialias: true}); const renderer = new THREE.WebGLRenderer({antialias: true});
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight);
const ambiantLight = new THREE.AmbientLight(0xffffff, 0.16); const ambiantLight = new THREE.AmbientLight(0xffffff, 3);
const screen = new Screen(scene); const screen = new Screen(scene);
const cube = createCube();
renderer.toneMapping = THREE.LinearToneMapping;
renderer.shadowMap.enabled = true; renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
document.body.getElementsByClassName('homeSection')[0].appendChild(renderer.domElement); document.body.getElementsByClassName('homeSection')[0].appendChild(renderer.domElement);
scene.background = new THREE.Color(0x020202) scene.background = new THREE.Color(0x020202)
camera.position.set(0, 2.5, -5); camera.position.set(6, 1, -5.5);
console.log(camera.rotation);
camera.rotation.set(Math.PI + 0.2, 0, Math.PI); camera.rotation.set(Math.PI + 0.2, 0, Math.PI);
scene.add(ambiantLight); 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.020,
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', () => { document.addEventListener('resize', () => {
renderer.setSize(window.innerWidth, window.innerHeight); renderer.setSize(window.innerWidth, window.innerHeight);
@ -36,38 +93,44 @@ document.addEventListener('resize', () => {
camera.updateProjectionMatrix(); camera.updateProjectionMatrix();
}); });
/***** FOR DEBUGGING PURPOSES *****/ let isInFade = false;
document.addEventListener('keydown', (e) => { function fadeInOut()
if (e.key === 'w') {
camera.position.z += 0.1; if (isInFade)
if (e.key === 's') return;
camera.position.z -= 0.1; let interval = null;
if (e.key === 'a') isInFade = true;
camera.position.x -= 0.1; interval = setInterval(() => {
if (e.key === 'd') screen.pointLightIntensity -= 0.2;
camera.position.x += 0.1; screen.screen.material.opacity -= 0.05;
if (e.key === 'q') if (screen.screen.material.opacity <= 0)
camera.position.y += 0.1; {
if (e.key === 'e') clearInterval(interval);
camera.position.y -= 0.1; setTimeout(() => {
if (e.key === 'ArrowUp') interval = setInterval(() => {
camera.rotation.x += 0.1; screen.pointLightIntensity += 0.2;
if (e.key === 'ArrowDown') screen.screen.material.opacity += 0.05;
camera.rotation.x -= 0.1; if (screen.screen.material.opacity >= 1)
if (e.key === 'ArrowLeft') {
camera.rotation.y += 0.1; clearInterval(interval);
if (e.key === 'ArrowRight') isInFade = false;
camera.rotation.y -= 0.1; }
if (e.key === 'p') }, 20);
{ }, 500);
console.log(camera.position); }
console.log(camera.rotation); }, 20);
} }
}); 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);
}
function home3D() function home3D()
@ -91,7 +154,8 @@ function createPlane()
function loop() function loop()
{ {
renderer.render(scene, camera); composer.render();
// renderer.render(scene, camera);
} }

10
site/interface/site/main.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* main.js :+: :+: :+: */ /* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */ /* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/08/23 17:47:37 by madegryc ### ########.fr */ /* Updated: 2024/08/23 23:36:33 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -25,9 +25,9 @@ window.addEventListener('scroll', () => {
parallaxElement2.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('closePopupBtn').addEventListener('click', function() {
document.getElementById('loginPopup').style.display = 'none'; // document.getElementById('loginPopup').style.display = 'none';
}); // });
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
liveChat(); liveChat();

5
site/interface/site/style/home.css
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* home.css :+: :+: :+: */ /* home.css :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */ /* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */
/* Updated: 2024/08/23 18:32:53 by madegryc ### ########.fr */ /* Updated: 2024/08/24 02:10:59 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -65,6 +65,7 @@ body {
position: absolute; position: absolute;
inset-inline: 0; inset-inline: 0;
top: 0; top: 0;
z-index: 999;
} }
#topButton{ #topButton{