Game

- Progressing on tv on home page

site/interface/site/home3D/Screen.js

@@ -0,0 +1,140 @@
+/* ************************************************************************** */
+/*                                                                            */
+/*                                                        :::      ::::::::   */
+/*   Screen.js                                          :+:      :+:    :+:   */
+/*                                                    +:+ +:+         +:+     */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
+/*                                                +#+#+#+#+#+   +#+           */
+/*   Created: 2024/08/22 23:13:53 by edbernar          #+#    #+#             */
+/*   Updated: 2024/08/23 02:24:09 by edbernar         ###   ########.fr       */
+/*                                                                            */
+/* ************************************************************************** */
+
+import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import * as THREE from 'three'
+
+const loader = new GLTFLoader();
+
+class Screen
+{
+	screen = null;
+	tv = 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: 0x222222});
+			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, 5, 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.4, 0.4);
+		mesh.position.set(-0.155, 1.2, 1.3);
+		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.castShadow = true;
+		pointLight.shadow.mapSize.width = 2048;
+		pointLight.shadow.mapSize.height = 2048;
+		pointLight.shadow.radius = 20;
+		scene.add(pointLight);
+		setInterval(() => {
+			const	intensity = Math.random() * 2 + 5;
+			
+			pointLight.intensity = intensity < 5 ? 5 : (intensity > 7 ? 7 : intensity);
+		}, 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 });
+		
+		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() * 32 - 16;
+				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 };

site/interface/site/home3D/home3D.js

@@ -6,64 +6,80 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/22 17:19:17 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/22 19:33:44 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/23 02:23:55 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
 import * as THREE from 'three'
-import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
+import { Screen } from './Screen.js'
-import { OrbitControls } from 'three/examples/jsm/Addons.js';
-
-
-
-const loader = new GLTFLoader();
 
 const	scene			= new THREE.Scene();
 const	renderer		= new THREE.WebGLRenderer({antialias: true});
-const	camera			= new THREE.PerspectiveCamera(60, window.innerWidth / innerWidth);
+const	camera			= new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight);
-const	ambiantLight	= new THREE.AmbientLight(0xffffff, 0.1);
+const	ambiantLight	= new THREE.AmbientLight(0xffffff, 0.16);
-const	spotLight		= new THREE.SpotLight(0xffffff, 100, 0, 0.5);
+const	screen			= new Screen(scene);
-const	helper			= new THREE.SpotLightHelper(spotLight);
-
 
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 renderer.setSize(window.innerWidth, window.innerHeight);
-scene.add(helper);
 document.body.getElementsByClassName('homeSection')[0].appendChild(renderer.domElement);
-scene.background = new THREE.Color(0x325352)
+scene.background = new THREE.Color(0x020202)
-camera.position.set(-10, 10, -10);
+camera.position.set(0, 2.5, -5);
-spotLight.position.set(-10, 10, -10);
+console.log(camera.rotation);
-spotLight.castShadow = true;
+camera.rotation.set(Math.PI + 0.2, 0, Math.PI);
-scene.add(spotLight);
-helper.update();
 scene.add(ambiantLight);
-const controls = new OrbitControls(camera, renderer.domElement);
+
+
+document.addEventListener('resize', () => {
+	renderer.setSize(window.innerWidth, window.innerHeight);
+	camera.aspect = window.innerWidth / window.innerHeight;
+	camera.updateProjectionMatrix();
+});
+
+/***** FOR DEBUGGING PURPOSES *****/
+
+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 home3D()
 {
 	createPlane();
-	createBox();
-	loader.load( './modeles/tv.glb', (gltf) => {
-		const tv = gltf.scene.children[0];
-		console.log(tv);
-		tv.position.set(0, 0.68, 0);
-		tv.material = new THREE.MeshPhysicalMaterial({color: 0x222222});
-		tv.scale.set(0.1, 0.08, 0.12);
-		tv.castShadow = true;
-		tv.receiveShadow = true;
-		scene.add(tv);
-	}, undefined, function ( error ) {
-		console.error( error );
-	} );
-	
 	renderer.setAnimationLoop(loop)
 }
 
 function createPlane()
 {
-	const	geometry	= new THREE.PlaneGeometry(20, 20);
+	const	geometry	= new THREE.PlaneGeometry(500, 500);
-	const	material	= new THREE.MeshPhysicalMaterial({side: THREE.DoubleSide, color: 0xffffff});
+	const	material	= new THREE.MeshPhysicalMaterial({side: THREE.DoubleSide, color: 0x020202});
 	const	mesh		= new THREE.Mesh(geometry, material);
 
 	mesh.position.set(0, 0, 0);
@@ -72,22 +88,11 @@ function createPlane()
 	scene.add(mesh);
 }
 
-function createBox()
-{
-	const	geometry	= new THREE.BoxGeometry(1, 1, 1);
-	const	material	= new THREE.MeshPhysicalMaterial({color: 0xffffff});
-	const	mesh		= new THREE.Mesh(geometry, material);
-
-	mesh.position.set(-3, 0.5, -3);
-	mesh.receiveShadow = true;
-	scene.add(mesh);
-}
-
 
 function loop()
 {
-	controls.update();
 	renderer.render(scene, camera);
 }
 
+
 export { home3D };