Update index.html

davespser · Dec 5, 2024 · bdf2cb4 · bdf2cb4
1 parent ce4bf12
commit bdf2cb4
Showing 1 changed file with 40 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -5,21 +5,48 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mundo Interactivo 3D</title>
 
-  <!-- Carga de la librería Three.js -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-
-  <!-- Carga de Firebase -->
-<script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js"></script>
-  <script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-database.js"></script>
-
-
-  <!-- Carga de tus propios scripts -->
-  <script src="js/firebase-config.js"></script> <!-- Configuración de Firebase -->
-  <script src="js/app.js"></script>            <!-- Lógica de Three.js -->
+  <!-- Carga de librerías externas -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <!-- Three.js -->
+  <script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js"></script> <!-- Firebase App -->
+  <script src="https://www.gstatic.com/firebasejs/11.0.2/firebase-database.js"></script> <!-- Firebase Database -->
 
+  <!-- Estilos básicos -->
+  <style>
+    body {
+      margin: 0;
+      overflow: hidden; /* Quita las barras de desplazamiento */
+      font-family: Arial, sans-serif;
+      background-color: #111; /* Fondo oscuro */
+      color: #fff; /* Texto blanco */
+    }
+    #threeCanvas {
+      display: block;
+      width: 100vw;
+      height: 100vh;
+    }
+    #ui {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      z-index: 100; /* Encima del canvas */
+    }
+    h1, p {
+      margin: 0;
+    }
+  </style>
 </head>
 <body>
-  <h1>Bienvenido al Mundo 3D</h1>
-  <p>Usa las teclas de flecha para moverte.</p>
+  <!-- Interfaz básica -->
+  <div id="ui">
+    <h1>Mundo Interactivo 3D</h1>
+    <p>Usa las teclas de flecha para moverte.</p>
+  </div>
+
+  <!-- Canvas para renderizar con Three.js -->
+  <canvas id="threeCanvas"></canvas>
+
+  <!-- Carga de tus scripts -->
+  <script src="js/firebase-config.js"></script> <!-- Configuración de Firebase -->
+  <script src="js/app.js"></script> <!-- Lógica de la aplicación 3D -->
 </body>
 </html>