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

Game

Browse Source 
- Progressing on tv on home page
This commit is contained in:
Kum1ta
2024-08-23 02:24:41 +02:00
parent 8ead510627
commit 2167298eb6
4 changed files with 199 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
site/interface/site/home3D/Screen.js Normal file
View File

@ -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 };

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

@ -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 { OrbitControls } from 'three/examples/jsm/Addons.js';
const loader = new GLTFLoader();
import { Screen } from './Screen.js'
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({antialias: true});
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / innerWidth);
const ambiantLight = new THREE.AmbientLight(0xffffff, 0.1);
const spotLight = new THREE.SpotLight(0xffffff, 100, 0, 0.5);
const helper = new THREE.SpotLightHelper(spotLight);
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight);
const ambiantLight = new THREE.AmbientLight(0xffffff, 0.16);
const screen = new Screen(scene);
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)
camera.position.set(-10, 10, -10);
spotLight.position.set(-10, 10, -10);
spotLight.castShadow = true;
scene.add(spotLight);
helper.update();
scene.background = new THREE.Color(0x020202)
camera.position.set(0, 2.5, -5);
console.log(camera.rotation);
camera.rotation.set(Math.PI + 0.2, 0, Math.PI);
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 material = new THREE.MeshPhysicalMaterial({side: THREE.DoubleSide, color: 0xffffff});
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);
@ -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 };

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

Binary file not shown.

12
site/interface/site/node_modules/.vite/deps/_metadata.json generated vendored
View File

@ -1,25 +1,25 @@
{
"hash": "be749922",
"configHash": "1568657a",
"hash": "86ff4072",
"configHash": "2420ea4a",
"lockfileHash": "7685a2f8",
"browserHash": "e669c1bb",
"browserHash": "b6f3f384",
"optimized": {
"three": {
"src": "../../three/build/three.module.js",
"file": "three.js",
"fileHash": "477065fa",
"fileHash": "08180e93",
"needsInterop": false
},
"three/addons/loaders/GLTFLoader.js": {
"src": "../../three/examples/jsm/loaders/GLTFLoader.js",
"file": "three_addons_loaders_GLTFLoader__js.js",
"fileHash": "c1c83b3d",
"fileHash": "b6be6fe1",
"needsInterop": false
},
"three/examples/jsm/Addons.js": {
"src": "../../three/examples/jsm/Addons.js",
"file": "three_examples_jsm_Addons__js.js",
"fileHash": "fffba256",
"fileHash": "77d8b50e",
"needsInterop": false
}
},