Site :

- Add ThreeJS login page

site/interface/site/login/createThreeDiv.js

@@ -6,16 +6,53 @@
 /*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 18:09:36 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/10 17:13:41 by marvin           ###   ########.fr       */
+/*   Updated: 2024/08/10 18:30:31 by marvin           ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+import * as THREE from 'three';
+
 function	createThreeDiv()
 {
 	const	divThree	= document.createElement("div");
 
 	divThree.setAttribute("id", "threeDiv");
+	const scene = new THREE.Scene();
+	// const camera = new THREE.PerspectiveCamera(75, divThree.innerWidth / divThree.innerHeight, 0.1, 1000);
+	const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+	const renderer = new THREE.WebGLRenderer( {antialias: true} );
+	// renderer.setSize(divThree.innerWidth, divThree.innerHeight);
+	renderer.setSize(200, 700);
+	divThree.appendChild(renderer.domElement);
+	renderer.setClearColor(0x020202);
+
+	let geometrie = new THREE.BoxGeometry(1, 1, 1);
 	
+	let materiel = new THREE.MeshBasicMaterial({color:0xffffff});
+	
+	const mesh = new THREE.Mesh( geometrie, materiel)
+
+	camera.position.set(0, 0 ,4);
+
+	renderer.antialias
+
+	loop()
+
+	function loop(){
+		requestAnimationFrame(loop);
+		let xsize = divThree.offsetWidth;
+		let ysize = divThree.offsetHeight;
+		renderer.setSize(xsize, ysize);
+		camera.aspect = xsize / ysize;
+		camera.updateProjectionMatrix()
+		console.log(xsize, ysize);
+		mesh.rotation.y += 0.001;
+		mesh.rotation.x += 0.0005;
+		renderer.render(scene, camera);
+	}
+
+	scene.add(mesh);
+	renderer.render(scene, camera);
 	return (divThree);
 }
 

site/interface/site/node_modules/.vite/deps/_metadata.json

@@ -1,8 +1,15 @@
 {
-  "hash": "18d18468",
+  "hash": "17b2b3a5",
-  "configHash": "2420ea4a",
+  "configHash": "da99a08f",
   "lockfileHash": "85de0c4c",
-  "browserHash": "8029a87c",
+  "browserHash": "340d3876",
-  "optimized": {},
+  "optimized": {
+    "three": {
+      "src": "../../three/build/three.module.js",
+      "file": "three.js",
+      "fileHash": "535eed9e",
+      "needsInterop": false
+    }
+  },
   "chunks": {}
 }

site/interface/site/style/loginPage.css

@@ -6,7 +6,7 @@
 /*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:15:28 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/10 14:12:44 by marvin           ###   ########.fr       */
+/*   Updated: 2024/08/10 18:32:08 by marvin           ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -160,7 +160,7 @@
 #threeDiv {
 	width: 30%;
 	height: 100%;
-	background-color: #e0e0e0;
+	background-color: #020202;
 }