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. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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;
tv = null;
pointLightIntensity = 1;
screenMaterial = null;
constructor(scene)
{
@ -31,7 +33,9 @@ class Screen
tv.geometry.center();
this.tv = tv;
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.castShadow = true;
tv.receiveShadow = true;
@ -50,7 +54,7 @@ class Screen
const vertices = positionAttribute.array;
const material = new THREE.MeshStandardMaterial({color: 0xbbbbbb});
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)
{
@ -62,20 +66,20 @@ class Screen
}
positionAttribute.needsUpdate = true;
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.z = Math.PI;
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.shadow.mapSize.width = 2048;
pointLight.shadow.mapSize.height = 2048;
pointLight.shadow.radius = 20;
console.log(pointLight.shadow)
scene.add(pointLight);
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);
return (mesh);
}
@ -86,7 +90,7 @@ class Screen
const context = canvas.getContext('2d', { willReadFrequently: true });
const video = document.createElement('video');
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.height = 360;
@ -102,7 +106,7 @@ class Screen
updateCanvas();
}).catch(err => console.error("Error playing video: ", err));
});
function addNoiseOnImage(context)
{
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
@ -113,7 +117,7 @@ class Screen
const g = data[i + 1];
const b = data[i + 2];
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;
}
context.putImageData(imageData, 0, 0);
@ -127,10 +131,9 @@ class Screen
context.drawImage(video, 0, 0, canvas.width, canvas.height);
addNoiseOnImage(context);
texture.needsUpdate = true;
requestAnimationFrame(updateCanvas);
}
requestAnimationFrame(updateCanvas);
}
texture.offset.set(0.02, 0);
this.screen.material = material;
video.load();

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

@ -6,29 +6,86 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 { 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 renderer = new THREE.WebGLRenderer({antialias: true});
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 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(0, 2.5, -5);
console.log(camera.rotation);
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.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', () => {
renderer.setSize(window.innerWidth, window.innerHeight);
@ -36,38 +93,44 @@ document.addEventListener('resize', () => {
camera.updateProjectionMatrix();
});
/***** FOR DEBUGGING PURPOSES *****/
let isInFade = false;
document.addEventListener('keydown', (e) => {
if (e.key === 'w')
camera.position.z += 0.1;
if (e.key === 's')
camera.position.z -= 0.1;
if (e.key === 'a')
camera.position.x -= 0.1;
if (e.key === 'd')
camera.position.x += 0.1;
if (e.key === 'q')
camera.position.y += 0.1;
if (e.key === 'e')
camera.position.y -= 0.1;
if (e.key === 'ArrowUp')
camera.rotation.x += 0.1;
if (e.key === 'ArrowDown')
camera.rotation.x -= 0.1;
if (e.key === 'ArrowLeft')
camera.rotation.y += 0.1;
if (e.key === 'ArrowRight')
camera.rotation.y -= 0.1;
if (e.key === 'p')
{
console.log(camera.position);
console.log(camera.rotation);
}
function fadeInOut()
{
if (isInFade)
return;
let interval = null;
isInFade = true;
interval = setInterval(() => {
screen.pointLightIntensity -= 0.2;
screen.screen.material.opacity -= 0.05;
if (screen.screen.material.opacity <= 0)
{
clearInterval(interval);
setTimeout(() => {
interval = setInterval(() => {
screen.pointLightIntensity += 0.2;
screen.screen.material.opacity += 0.05;
if (screen.screen.material.opacity >= 1)
{
clearInterval(interval);
isInFade = false;
}
}, 20);
}, 500);
}
}, 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()
@ -91,7 +154,8 @@ function createPlane()
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 :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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)`;
});
document.getElementById('closePopupBtn').addEventListener('click', function() {
document.getElementById('loginPopup').style.display = 'none';
});
// document.getElementById('closePopupBtn').addEventListener('click', function() {
// document.getElementById('loginPopup').style.display = 'none';
// });
document.addEventListener('DOMContentLoaded', () => {
liveChat();

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* home.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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;
inset-inline: 0;
top: 0;
z-index: 999;
}
#topButton{