index.html

  
 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Projet webGL</title>
    <style>
        body { 
            margin: 0; 
            background-color: #111;
            color: #eee;
            font-family: 'Times New Roman', serif;
        }
        canvas { 
            width: 100%; 
            height: 100%;
            display: block;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        .centre {
            text-align: center;
        }
        h1 {
            font-size: 32px;
            margin-bottom: 20px;
            color: #d4af37; /* Gold color */
        }
        p {
            margin-bottom: 20px;
            line-height: 1.6;
        }
        #webGL {
            border: 2px solid #d4af37;
            margin: 20px auto;
            width: 846px;
            height: 494px;
        }
    </style>
    </head>
    <body>
        <!-- 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>
        <!-- Un titre centre -->
        <h1 class="centre"> Projet webGL</h1>
        <div id="webGL" class="centre"></div>
        <!-- Mon script avec un chemin relatif -->
        <script type="module" src="script.js"></script>
        
</body>
</html>