diff --git a/MEHIAOUI/app.css b/MEHIAOUI/app.css index feb1f650413035667a45e3f55c6abc36e9d6cdba..0f84bde582850299f00ce8b2b0bb122fa4a99a62 100644 --- a/MEHIAOUI/app.css +++ b/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; } } } diff --git a/MEHIAOUI/index.html b/MEHIAOUI/index.html index 2ffd8b94a7986e364bb41c61358b9d880b720f5c..7ce7a769e8822b9597bbd13da5441158e7da55d6 100644 --- a/MEHIAOUI/index.html +++ b/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> diff --git a/MEHIAOUI/projet.js b/MEHIAOUI/projet.js index 1521110317212ad51a9be94b1f492ffe53f1a295..029a41c437dc876e1a88728c6be4dc1e72097bcf 100644 --- a/MEHIAOUI/projet.js +++ b/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