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

Site

Browse Source 
- Fixed brightness on tv when change video
This commit is contained in:
Kum1ta
2024-08-24 17:06:13 +02:00
parent 9d3476d027
commit 13432440dc
5 changed files with 160 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* Screen.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */
/* Updated: 2024/08/24 11:39:09 by marvin ### ########.fr */
/* Updated: 2024/08/24 16:56:57 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -15,12 +15,18 @@ import * as THREE from 'three'
const loader = new GLTFLoader();
let light = {
point: 1,
};
class Screen
{
screen = null;
tv = null;
pointLightIntensity = 1;
screenMaterial = null;
canvasVideo = null;
interval = null;
constructor(scene)
{
@ -34,17 +40,17 @@ class Screen
this.tv = tv;
tv.position.set(0, 0.99, 2);
tv.material = new THREE.MeshPhysicalMaterial({color: 0xaaaaaa});
tv.material.roughness = 10;
tv.material.metalness = 1;
tv.material.roughness = 1;
tv.material.metalness = 1.05;
tv.scale.set(0.05, 0.05, 0.05);
tv.castShadow = true;
tv.receiveShadow = true;
scene.add(tv);
this.showVideo('/modeles/pong.mp4');
}, undefined, function ( error ) {
console.error( error );
throw Error("Can't open file 'tv.glb'");
} );
this.#showVideo('/modeles/pong.mp4')
}
#createScreen(scene)
@ -54,7 +60,8 @@ 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, 10 * this.pointLightIntensity, 0, 2);
// const pointLight = new THREE.PointLight( 0xffffff, 10 * light.point, 0, 2);
const pointLight = new THREE.SpotLight(0xffffff, 10 * light.point, 0, Math.PI / 1.6);
for (let i = 0; i < vertices.length; i += 3)
{
@ -74,17 +81,27 @@ class Screen
pointLight.castShadow = true;
pointLight.shadow.mapSize.width = 2048;
pointLight.shadow.mapSize.height = 2048;
console.log(pointLight.shadow)
const targetObject = new THREE.Object3D();
targetObject.position.set(0, 1.2, 0);
pointLight.target = targetObject;
pointLight.target.updateMatrixWorld();
scene.add(pointLight);
setInterval(() => {
const intensity = Math.random() * 2 + 10;
pointLight.intensity = intensity * this.pointLightIntensity > 13 * this.pointLightIntensity ? 13 * this.pointLightIntensity : intensity * this.pointLightIntensity;
pointLight.intensity = intensity * light.point > 13 * light.point ? 13 * light.point : intensity * light.point;
}, 100);
return (mesh);
}
#showVideo(path)
changeVideo(path)
{
this.#disposeVideo();
this.showVideo(path);
}
showVideo(path)
{
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d', { willReadFrequently: true });
@ -92,9 +109,12 @@ class Screen
const texture = new THREE.CanvasTexture(canvas);
const material = new THREE.MeshBasicMaterial({ map: texture,color: 0xffffff, transparent: true, opacity: 1 });
canvas.video = video;
canvas.context = context;
canvas.width = 534;
canvas.height = 360;
video.src = path + '?t=' + new Date().getTime();
this.canvasVideo = canvas;
video.src = path;
video.loop = true;
video.muted = true;
video.crossOrigin = 'anonymous';
@ -107,37 +127,70 @@ class Screen
}).catch(err => console.error("Error playing video: ", err));
});
function addNoiseOnImage(context)
{
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4)
{
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const brightness = (3 * r + 4 * g + b) >>> 3;
const noise = Math.random() * 128 - 32;
data[i] = data[i + 1] = data[i + 2] = brightness + noise;
}
context.putImageData(imageData, 0, 0);
}
// function addNoiseOnImage(context)
// {
// const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
// const data = imageData.data;
// for (let i = 0; i < data.length; i += 4)
// {
// const r = data[i];
// const g = data[i + 1];
// const b = data[i + 2];
// const brightness = (3 * r + 4 * g + b) >>> 3;
// const noise = Math.random() * 128 - 32;
// data[i] = data[i + 1] = data[i + 2] = brightness + noise;
// }
// context.putImageData(imageData, 0, 0);
// }
function updateCanvas()
{
if (!video.paused && !video.ended)
if (canvas.video != null || canvas.video == undefined)
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(video, 0, 0, canvas.width, canvas.height);
addNoiseOnImage(context);
texture.needsUpdate = true;
if (canvas.video && !canvas.video.paused && !canvas.video.ended)
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(canvas.video, 0, 0, canvas.width, canvas.height);
// addNoiseOnImage(context);
texture.needsUpdate = true;
}
requestAnimationFrame(updateCanvas);
}
requestAnimationFrame(updateCanvas);
}
texture.offset.set(0.02, 0);
texture.offset.set(0.05, 0);
this.screen.material = material;
video.load();
canvas.video.load();
}
#disposeVideo()
{
if (this.canvasVideo)
{
const canvas = this.canvasVideo;
const video = canvas.video;
const texture = this.screen.material.map;
if (video)
{
video.pause();
video.src = '';
video.removeAttribute('src');
video.load();
}
if (texture)
texture.dispose();
canvas.video = null;
canvas.context = null;
if (this.screen)
{
this.screen.material.map = null;
this.screen.material.dispose();
}
this.canvasVideo = null;
}
}
};
export { Screen };
export { Screen, light };

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

@ -3,19 +3,20 @@
/* ::: :::::::: */
/* home3D.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
/* Updated: 2024/08/24 11:41:18 by marvin ### ########.fr */
/* Updated: 2024/08/24 16:47:41 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import * as THREE from 'three'
import { Screen } from './Screen.js'
import { Screen, light } 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';
import Stats from 'stats.js';
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({antialias: true});
@ -24,6 +25,10 @@ const ambiantLight = new THREE.AmbientLight(0xffffff, 35);
const screen = new Screen(scene);
const cube = createCube();
const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mémoire
document.body.appendChild(stats.dom);
renderer.toneMapping = THREE.LinearToneMapping;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
@ -41,7 +46,7 @@ composer.addPass(new RenderPass(scene, camera));
const dofPass = new BokehPass(scene, camera, {
focus: 10.0,
aperture: 0.020,
aperture: 0.02,
maxblur: 0.01,
});
composer.addPass(dofPass);
@ -102,18 +107,23 @@ function fadeInOut()
let interval = null;
isInFade = true;
interval = setInterval(() => {
screen.pointLightIntensity -= 0.2;
light.point -= 0.2;
screen.screen.material.opacity -= 0.05;
if (screen.screen.material.opacity <= 0)
{
clearInterval(interval);
setTimeout(() => {
interval = setInterval(() => {
screen.pointLightIntensity += 0.2;
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);
@ -132,6 +142,15 @@ function createCube()
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()
{
@ -151,11 +170,57 @@ function createPlane()
scene.add(mesh);
}
const video = {
pong: '/modeles/pong.mp4',
login: '/modeles/notLogin.webm'
}
let actualVideo = -1;
if (Math.random() % 100 > 0.97)
video.pong = './modeles/easteregg.webm'
setTimeout(() => {
screen.changeVideo(video.pong);
actualVideo = 0;
}, 100);
function loop()
{
stats.begin()
raycaster.setFromCamera( mouse, camera );
const intersects = raycaster.intersectObjects( scene.children, false );
if (!screen.canvasVideo)
{
composer.render();
stats.end();
return ;
}
if (intersects.length === 0)
{
if (actualVideo != 0)
{
console.log("change 1");
screen.changeVideo(video.pong);
actualVideo = 0;
}
}
else if (intersects[0].object == screen.screen)
{
if (actualVideo != 1)
{
console.log("change 2");
screen.changeVideo(video.login);
actualVideo = 1;
}
}
else if (actualVideo != 0)
{
console.log("change 3");
screen.changeVideo(video.pong);
actualVideo = 0;
}
composer.render();
// renderer.render(scene, camera);
stats.end();
}

BIN
site/interface/site/modeles/easteregg.webm Normal file
View File

Binary file not shown.

BIN
site/interface/site/modeles/notLogin.webm Normal file
View File

Binary file not shown.

BIN
site/interface/site/modeles/oldEffectTv.mp4 Normal file
View File

Binary file not shown.