diff --git a/site/interface/site/home3D/Screen.js b/site/interface/site/home3D/Screen.js index f7d273a..5b63767 100644 --- a/site/interface/site/home3D/Screen.js +++ b/site/interface/site/home3D/Screen.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* Screen.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: marvin +#+ +:+ +#+ */ +/* By: edbernar { 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 }; \ No newline at end of file +export { Screen, light }; \ No newline at end of file diff --git a/site/interface/site/home3D/home3D.js b/site/interface/site/home3D/home3D.js index d482ec4..2d4ce2f 100644 --- a/site/interface/site/home3D/home3D.js +++ b/site/interface/site/home3D/home3D.js @@ -3,19 +3,20 @@ /* ::: :::::::: */ /* home3D.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: marvin +#+ +:+ +#+ */ +/* By: edbernar { - 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(); } diff --git a/site/interface/site/modeles/easteregg.webm b/site/interface/site/modeles/easteregg.webm new file mode 100644 index 0000000..f2d9ab7 Binary files /dev/null and b/site/interface/site/modeles/easteregg.webm differ diff --git a/site/interface/site/modeles/notLogin.webm b/site/interface/site/modeles/notLogin.webm new file mode 100644 index 0000000..896ea73 Binary files /dev/null and b/site/interface/site/modeles/notLogin.webm differ diff --git a/site/interface/site/modeles/oldEffectTv.mp4 b/site/interface/site/modeles/oldEffectTv.mp4 new file mode 100644 index 0000000..86c4185 Binary files /dev/null and b/site/interface/site/modeles/oldEffectTv.mp4 differ