site web, par Thomas

ALVARIZA-BILLAR_DESERT_KANY/projet.js

@@ -242,7 +242,7 @@ function house() {
 
     // Dimensions du cube principal (maison)
     const outerCubeWidth = 4000;
-    const outerCubeHeight = 3000;
+    const outerCubeHeight = 2000;
     const outerCubeDepth = 4000;
     const outerCubeMesh = new THREE.Mesh(
         new THREE.BoxGeometry(outerCubeWidth, outerCubeHeight, outerCubeDepth),
@@ -298,7 +298,7 @@ function house() {
 
     // creation de fenetre a gauche de la porte
     const windowLeftWidth = outerCubeWidth - innerCubeWidth + 1;
-    const windowLeftHeight = houseRoof1Width / 5;
+    const windowLeftHeight = doorHeight / 2;
     const windowLeftDepth = outerCubeDepth / 5;
     const windowLeftMesh = new THREE.Mesh(
         new THREE.BoxGeometry(windowLeftWidth, windowLeftHeight, windowLeftDepth),
@@ -337,6 +337,10 @@ function house() {
     windowCentralMesh.position.set(0, 0, 0);
     windowCentralMesh.updateMatrix();
 
+    // creation toit pentu
+    const roofConeWidth = houseRoof1Width;
+    const roofConeHeight = houseRoof1Height;
+
 
     // Opération entre les différents éléments
     let baseHesh = CSG.subtract(outerCubeMesh, innerCubeMesh);
@@ -348,7 +352,6 @@ function house() {
     baseHesh = CSG.subtract(baseHesh, windowCentralMesh);
 
 
-
     baseHesh.position.set(
         dallePosition.x,
         dallePosition.y + dalleHeight / 2 + outerCubeHeight / 2,  // Posé sur la dalle
@@ -377,7 +380,6 @@ function house() {
     scene.add(baseHesh);
     scene.add(roofHesh1);
     scene.add(roofHesh2);
-    //scene.add(doorHesh);
 }
 
 

ALVARIZA-BILLAR_DESERT_KANY/style.css

-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-/* Corps de la page */
-body {
-    font-family: 'Poppins', sans-serif;
-    background: linear-gradient(135deg, #2e3a59, #415a77);
-    color: white;
-}
-
-/* Header avec image de fond */
-header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 150px;  
-    background: linear-gradient(135deg, #1e3c72, #2a5298);
-    position: relative;
-    padding: 10px 0;
-}
-
-header .hopper-image {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    position: absolute;
-    left: 20px;  
-    top: 50%;
-    transform: translateY(-50%);  
-    transition: transform 0.3s ease;
-}
-
-header .hopper-image:hover {
-    transform: scale(1.1);  /* Zoom léger survol */
-}
-
-header .header-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-}
-
-header h1 {
-    font-size: 2.5rem;
-    background: linear-gradient(90deg, #ff8a00, #e52e71);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-left: 120px;  
-}
-
-/* Conteneur principal pour les sections */
-#webGL {
-    margin: 40px auto;
-    width: 80%;
-}
-
-/* Mise en page des sections en deux colonnes */
-.content-container {
-    display: flex;
-    justify-content: space-between;
-    gap: 20px;
-}
-
-/* Section de l'image */
-.image-section {
-    flex: 1;
-    background: rgba(255, 255, 255, 0.1);
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
-    text-align: center;
-}
-
-.image-section h2 {
-    font-size: 2rem;
-    color: #ff8a00;
-    margin-bottom: 15px;
-}
-
-.image-section img {
-    width: 100%;
-    height: auto;
-    border-radius: 10px;
-    max-height: 300px;
-    object-fit: cover;
-    transition: transform 0.3s ease, filter 0.3s ease;
-    cursor: pointer;
-}
-
-.image-section img:hover {
-    transform: scale(1.05);
-    filter: brightness(1.2);
-}
-
-/* Section du projet 3D */
-.project-section {
-    flex: 1;
-    background: rgba(255, 255, 255, 0.1);
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
-    text-align: center;
-}
-
-.project-section h2 {
-    font-size: 2rem;
-    color: #ff8a00;
-    margin-bottom: 15px;
-}
-
-.project-section p {
-    font-size: 1.2rem;
-    color: #ddd;
-}
-
-/* Animation et transition */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-header, .image-section, .project-section {
-    animation: fadeIn 1s ease-in-out;
-}
+body {
+    margin: 0;
+    background-color: #f0e6d9;
+    width: 100%;
+    overflow-x: hidden;
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+/* Header */
+header {
+    height: 80px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    background-color: #2c3e50;
+    padding-left: 40px;
+}
+
+/* Profil */
+.profile {
+    border-radius: 50%;
+    height: 75px;
+    width: 75px;
+    background-image: url(https://media.beauxarts.com/uploads/2019/12/autorretrato-2-964x1178.jpg);
+    background-size: cover;
+    background-position: center;
+    border: 2px solid #e74c3c;
+}
+
+/* Titre centré */
+.Titre {
+    font-size: 50px;
+    font-weight: bold;
+    background: #2c3e50;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+/* Section principale centrée */
+.presentation {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding-bottom: 5em;
+}
+
+/* Image centrée */
+.presentation img {
+    width: 1000px;
+    max-width: 90%;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px;
+}
+
+/* Centrage de l’image et de la checklist */
+.center-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+/* Checklist */
+.checklist {
+    max-width: 600px;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    background-color: #f9f9f9;
+    font-family: Arial, sans-serif;
+}
+
+/* Checklist texte */
+.checklist h3 {
+    font-size: 30px;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+/* Conteneur WebGL bien centré */
+#webGL {
+    width: 80%;
+    max-width: 1000px;
+    height: 500px;
+    background-color: #ccc; /* Placeholder */
+    margin: 20px auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+p {
+    text-align: center;
+    margin-top: 10px;
+    margin-left: 200px;
+    margin-right: 200px;
+}
+
+.sources {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.source-link {
+    display: inline-block;
+    text-decoration: none;
+    font-size: 18px;
+    color: white;
+    background: linear-gradient(to right, #2c3e50, #34495e);
+    padding: 10px 20px;
+    border-radius: 8px;
+    transition: transform 0.2s ease, background 0.3s ease;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.source-link:hover {
+    background: linear-gradient(to right, #34495e, #2c3e50);
+    transform: scale(1.05);
+}