Design du html

MEHIAOUI/app.css

@@ -52,32 +52,30 @@ body{
         flex-direction: column;
         justify-content: center;
         align-items: center;
-    
-        .projetAndOriginal {
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
-            gap: 20px; /* Espacement entre les deux éléments */
-            margin-top: 20px;
-        }
         
-        .scene, .original {
-            width: 50%;
-            text-align: center;
-            margin-bottom: 40px;
-        }
-        .projetAndOriginal{
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            gap: 20px;
-            width: 100%;
-            height: 100%;
-            .original{
-                width: 50%;
+        #webGL {
+            .accroche{
+                font-weight: bold;
+                padding: 40px;
+                font-size: 30px;
+            }
+
+            .projetAndOriginal {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+            
+            .explications{
+                text-align: center;
+                font-size: 17px;
+                padding: 20px;
+            }
+            
+            .original img {
+                max-width: 100%;
                 height: 500px;
-                border: 1px solid red;
-                background-image: url(img.jpg);
+                border: 2px solid black;
             }
         }
     }

MEHIAOUI/index.html

@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <title>TP 1</title>
         <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
-        <link rel="stylesheet" type="text/css" href="app.css">
+        <link rel="stylesheet" href="app.css">
         <style>
             body { margin: 0; }
             canvas { width: 100%; height: 100% }
@@ -18,26 +18,31 @@
             <h1 class="title">THREE.JS Project</h1>
             <p class="subtitle">Découvrez notre petit projet en three.js !</p>
         </header>
-        <main>
-            <!-- Un titre centre -->
-            <div id="webGL" class="centre">Juste un bol, des fruits, et des fleurs</div>
-
-            <!-- API importe du site de Three.js -->
-            <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
-            <script type="importmap">
-                {
-                    "imports": {
-                        "three": "https://threejs.org/build/three.module.js",
-                        "three/addons/": "https://threejs.org/examples/jsm/"
-                    }
+        <!-- API importe du site de Three.js -->
+        <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "https://threejs.org/build/three.module.js",
+                    "three/addons/": "https://threejs.org/examples/jsm/"
                 }
-            </script>
-            <!-- JQuery pour afficher les erreurs -->
-            <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-            <!-- Mon script avec un chemin relatif -->
-            <div class="projetAndOriginal">
-                <div class="scene"><script type="module" src="projet.js"></script></div>
-                <div class="original"></div>
+            }
+        </script>
+        
+        <main>
+            <div id="webGL" class="centre">
+                <p class="accroche">Juste un bol, des fruits, et des fleurs</p>
+                <p class="explications">Ceci est un projet, censé representer la scene originale présentée en photo en premier plan. Des modifications<br>ont été apportées tant bien
+                que mal. Ayant commencé le design des pommes avec blender, nous avons eu beaucoup de mal à les exporter en three.js. Mais nous avons fait de notre mieux et ésperont que vous apprecirez ce modeste design
+                </p>
+                <div class="projetAndOriginal">
+                    <div class="scene">
+                        <script type="module" src="projet.js"></script>
+                    </div>
+                    <div class="original">
+                        <img src="img.jpg" alt="Image originale">
+                    </div>
+                </div>
             </div>
         </main>
     </body>

MEHIAOUI/projet.js

@@ -431,8 +431,8 @@ function fillScene() {
 
 function init() {
 	// For grading the window is fixed in size; here's general code:
-	var canvasWidth = window.innerWidth/2;
-	var canvasHeight = window.innerHeight/2;
+	var canvasWidth = window.innerWidth;
+	var canvasHeight = window.innerHeight;
 	var canvasRatio = canvasWidth / canvasHeight;
 
 	// RENDERER