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

Game

Browse Source 
- Updating home page
This commit is contained in:
Kum1ta
2024-08-22 19:36:32 +02:00
parent facacc1407
commit cfe2bf219a
11 changed files with 120 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
site/interface/site/home3D/home3D.js Normal file
View File

@ -0,0 +1,93 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* home3D.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
/* Updated: 2024/08/22 19:33:44 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();
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);
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.add(ambiantLight);
const controls = new OrbitControls(camera, renderer.domElement);
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 mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
mesh.rotateX(-(Math.PI / 2));
mesh.receiveShadow = true;
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 };

1
site/interface/site/index.html
View File

@ -40,7 +40,6 @@
</div>
</div>
<section class="homeSection">
<p>THREEJS</p>
</section>
<section class="homeSection relative">
<img id="firstBall" src="style/ball3D2.png">

19
site/interface/site/main.js
View File

@ -3,33 +3,30 @@
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/08/14 18:25:04 by madegryc ### ########.fr */
/* Updated: 2024/08/22 18:01:38 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification } from "./notification/main.js";
import { liveChat } from "./liveChat/main.js";
import { liveChat } from "/liveChat/main.js";
import { login } from "./login/main.js";
import { home3D } from "./home3D/home3D.js"
window.addEventListener('scroll', function() {
window.addEventListener('scroll', () => {
const scrollPosition = window.scrollY;
const rotationAngle = scrollPosition * 0.1; // Ajustez ce facteur pour contrôler l'angle de rotation
const rotationAngle = scrollPosition * 0.1;
const parallaxElement = document.querySelector('#firstBall');
const parallaxElement2 = document.querySelector('#secondBall');
const parallaxSpeed = scrollPosition * -0.17; // Ajustez ce facteur pour ralentir le défilement
const parallaxSpeed = scrollPosition * -0.17;
// Appliquer la rotation en fonction de la position de défilement
parallaxElement.style.transform = `translateX(-50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
parallaxElement2.style.transform = `translateX(50%) translateY(${-parallaxSpeed}px) rotate(${rotationAngle}deg)`;
// Ajuster la position de l'arrière-plan pour l'effet de parallaxe
// parallaxElement.style.backgroundPositionY = `${parallaxSpeed}px`;
});
document.addEventListener('DOMContentLoaded', () => {
liveChat();
login();
home3D();
});

BIN
site/interface/site/modeles/tv.glb Normal file
View File

Binary file not shown.

23
site/interface/site/package-lock.json generated
View File

@ -5,6 +5,7 @@
"packages": {
"": {
"dependencies": {
"@rollup/rollup-darwin-arm64": "^4.21.0",
"stats": "^1.0.0",
"stats.js": "^0.17.0"
},
@ -433,15 +434,13 @@
]
},
"node_modules/@rollup/rollup-darwin-arm64": {
"version": "4.19.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.19.1.tgz",
"integrity": "sha512-8o6eqeFZzVLia2hKPUZk4jdE3zW7LCcZr+MD18tXkgBBid3lssGVAYuox8x6YHoEPDdDa9ixTaStcmx88lio5Q==",
"version": "4.21.0",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.0.tgz",
"integrity": "sha512-zOnKWLgDld/svhKO5PD9ozmL6roy5OQ5T4ThvdYZLpiOhEGY+dp2NwUmxK0Ld91LrbjrvtNAE0ERBwjqhZTRAA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
]
@ -788,6 +787,20 @@
"fsevents": "~2.3.2"
}
},
"node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": {
"version": "4.19.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.19.1.tgz",
"integrity": "sha512-8o6eqeFZzVLia2hKPUZk4jdE3zW7LCcZr+MD18tXkgBBid3lssGVAYuox8x6YHoEPDdDa9ixTaStcmx88lio5Q==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
]
},
"node_modules/source-map-js": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",

1
site/interface/site/package.json
View File

@ -7,6 +7,7 @@
"vite": "^5.4.0"
},
"dependencies": {
"@rollup/rollup-darwin-arm64": "^4.21.0",
"stats": "^1.0.0",
"stats.js": "^0.17.0"
}