Game

- Updating home page

site/interface/site/home3D/home3D.js

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

site/interface/site/index.html

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

site/interface/site/main.js

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

site/interface/site/package-lock.json

@@ -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",
+      "version": "4.21.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.19.1.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.21.0.tgz",
-      "integrity": "sha512-8o6eqeFZzVLia2hKPUZk4jdE3zW7LCcZr+MD18tXkgBBid3lssGVAYuox8x6YHoEPDdDa9ixTaStcmx88lio5Q==",
+      "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",

site/interface/site/package.json

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