add part of site to docker and login works using sessions
This commit is contained in:
143
docker-compose/requirements/nginx/static/home3D/Screen.js
Normal file
143
docker-compose/requirements/nginx/static/home3D/Screen.js
Normal file
@ -0,0 +1,143 @@
|
||||
/* ************************************************************************** */
|
||||
/* */
|
||||
/* ::: :::::::: */
|
||||
/* Screen.js :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */
|
||||
/* Updated: 2024/08/24 11:39:09 by marvin ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||||
import * as THREE from 'three'
|
||||
|
||||
const loader = new GLTFLoader();
|
||||
|
||||
class Screen
|
||||
{
|
||||
screen = null;
|
||||
tv = null;
|
||||
pointLightIntensity = 1;
|
||||
screenMaterial = null;
|
||||
|
||||
constructor(scene)
|
||||
{
|
||||
|
||||
this.screen = this.#createScreen(scene);
|
||||
loader.load( './modeles/tv.glb', (gltf) => {
|
||||
const tv = gltf.scene.children[0];
|
||||
const boundingBox = new THREE.Box3().setFromObject(tv);
|
||||
const center = boundingBox.getCenter(new THREE.Vector3());
|
||||
tv.geometry.center();
|
||||
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.scale.set(0.05, 0.05, 0.05);
|
||||
tv.castShadow = true;
|
||||
tv.receiveShadow = true;
|
||||
scene.add(tv);
|
||||
}, undefined, function ( error ) {
|
||||
console.error( error );
|
||||
throw Error("Can't open file 'tv.glb'");
|
||||
} );
|
||||
this.#showVideo('/modeles/pong.mp4')
|
||||
}
|
||||
|
||||
#createScreen(scene)
|
||||
{
|
||||
const geometry = new THREE.PlaneGeometry(4.1, 3, 50, 50);
|
||||
const positionAttribute = geometry.attributes.position;
|
||||
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);
|
||||
|
||||
for (let i = 0; i < vertices.length; i += 3)
|
||||
{
|
||||
const x = vertices[i];
|
||||
const y = vertices[i + 1];
|
||||
const distance = (Math.sqrt(x * x + y * y));
|
||||
const height = Math.pow(distance, 2) * -0.02;
|
||||
vertices[i + 2] = height;
|
||||
}
|
||||
positionAttribute.needsUpdate = true;
|
||||
mesh.scale.set(0.41, 0.42);
|
||||
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.05, 1.2, 0.95);
|
||||
pointLight.castShadow = true;
|
||||
pointLight.shadow.mapSize.width = 2048;
|
||||
pointLight.shadow.mapSize.height = 2048;
|
||||
console.log(pointLight.shadow)
|
||||
scene.add(pointLight);
|
||||
setInterval(() => {
|
||||
const intensity = Math.random() * 2 + 10;
|
||||
|
||||
pointLight.intensity = intensity * this.pointLightIntensity > 13 * this.pointLightIntensity ? 13 * this.pointLightIntensity : intensity * this.pointLightIntensity;
|
||||
}, 100);
|
||||
return (mesh);
|
||||
}
|
||||
|
||||
#showVideo(path)
|
||||
{
|
||||
const canvas = document.createElement('canvas');
|
||||
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, transparent: true, opacity: 1 });
|
||||
|
||||
canvas.width = 534;
|
||||
canvas.height = 360;
|
||||
video.src = path + '?t=' + new Date().getTime();
|
||||
video.loop = true;
|
||||
video.muted = true;
|
||||
video.crossOrigin = 'anonymous';
|
||||
|
||||
video.addEventListener('loadedmetadata', () => {
|
||||
const texture = this.screen.material.map;
|
||||
texture.needsUpdate = true;
|
||||
video.play().then(() => {
|
||||
updateCanvas();
|
||||
}).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 updateCanvas()
|
||||
{
|
||||
if (!video.paused && !video.ended)
|
||||
{
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
addNoiseOnImage(context);
|
||||
texture.needsUpdate = true;
|
||||
}
|
||||
requestAnimationFrame(updateCanvas);
|
||||
}
|
||||
texture.offset.set(0.02, 0);
|
||||
this.screen.material = material;
|
||||
video.load();
|
||||
}
|
||||
};
|
||||
|
||||
export { Screen };
|
||||
162
docker-compose/requirements/nginx/static/home3D/home3D.js
Normal file
162
docker-compose/requirements/nginx/static/home3D/home3D.js
Normal file
@ -0,0 +1,162 @@
|
||||
/* ************************************************************************** */
|
||||
/* */
|
||||
/* ::: :::::::: */
|
||||
/* home3D.js :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
|
||||
/* Updated: 2024/08/24 11:41:18 by marvin ### ########.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, 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.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);
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
});
|
||||
|
||||
let isInFade = false;
|
||||
|
||||
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()
|
||||
{
|
||||
createPlane();
|
||||
renderer.setAnimationLoop(loop)
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
mesh.position.set(0, 0, 0);
|
||||
mesh.rotateX(-(Math.PI / 2));
|
||||
mesh.receiveShadow = true;
|
||||
scene.add(mesh);
|
||||
}
|
||||
|
||||
|
||||
function loop()
|
||||
{
|
||||
composer.render();
|
||||
// renderer.render(scene, camera);
|
||||
}
|
||||
|
||||
|
||||
export { home3D };
|
||||
Reference in New Issue
Block a user