From ad71b653b6f5b6bc3feb3e897fe0fd6cce5949ad Mon Sep 17 00:00:00 2001 From: Kum1ta Date: Sat, 24 Aug 2024 02:56:55 +0200 Subject: [PATCH] Site - Added move on camera with effect --- site/interface/site/home3D/Screen.js | 29 +++--- site/interface/site/home3D/home3D.js | 132 ++++++++++++++++++++------- site/interface/site/main.js | 10 +- site/interface/site/style/home.css | 5 +- 4 files changed, 122 insertions(+), 54 deletions(-) diff --git a/site/interface/site/home3D/Screen.js b/site/interface/site/home3D/Screen.js index fb03467..9eb874c 100644 --- a/site/interface/site/home3D/Screen.js +++ b/site/interface/site/home3D/Screen.js @@ -6,7 +6,7 @@ /* By: edbernar { - 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(); diff --git a/site/interface/site/home3D/home3D.js b/site/interface/site/home3D/home3D.js index 537fa2b..6a2b1b4 100644 --- a/site/interface/site/home3D/home3D.js +++ b/site/interface/site/home3D/home3D.js @@ -6,29 +6,86 @@ /* By: edbernar { + 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); } diff --git a/site/interface/site/main.js b/site/interface/site/main.js index 8813aeb..208cdd0 100644 --- a/site/interface/site/main.js +++ b/site/interface/site/main.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* main.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: madegryc +#+ +:+ +#+ */ +/* By: edbernar { 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(); diff --git a/site/interface/site/style/home.css b/site/interface/site/style/home.css index d84d179..3cbb513 100644 --- a/site/interface/site/style/home.css +++ b/site/interface/site/style/home.css @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* home.css :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: madegryc +#+ +:+ +#+ */ +/* By: edbernar