Update three-scene.js

js/three-scene.js

@@ -1,19 +1,15 @@
 // Importa Three.js
 import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
-import { database } from "./firebase-config.js";
-import { ref, get } from "https://www.gstatic.com/firebasejs/9.21.0/firebase-database.js";
 
 // Variables globales
 let scene, camera, renderer;
 let cube, floor;
-let speed = 0.1;
-let cameraOffset = { x: 0, y: 5, z: 10 };
 
-// Cargar la escena principal
+// Función para cargar la escena principal
 export function loadThreeScene({ x = 0, y = 0, z = 0, color = 0xff4500, stats = { strength: 0, dexterity: 0, intelligence: 0 } }) {
   // Crear escena
   scene = new THREE.Scene();
-  scene.background = new THREE.Color(0x87ceeb);
+  scene.background = new THREE.Color(0x87ceeb); // Fondo azul cielo
 
   // Configurar cámara
   camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
@@ -26,11 +22,35 @@ export function loadThreeScene({ x = 0, y = 0, z = 0, color = 0xff4500, stats =
   document.body.innerHTML = ""; // Limpiar la interfaz anterior
   document.body.appendChild(renderer.domElement);
 
-  // Crear cubo con el color del personaje
+  // Agregar luz ambiental
+  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+  scene.add(ambientLight);
+
+  // Agregar luz direccional
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+  directionalLight.position.set(10, 20, 10);
+  directionalLight.castShadow = true;
+  scene.add(directionalLight);
+
+  // Crear suelo con textura
+  const floorTexture = new THREE.TextureLoader().load("https://threejs.org/examples/textures/grasslight-big.jpg");
+  floorTexture.wrapS = THREE.RepeatWrapping;
+  floorTexture.wrapT = THREE.RepeatWrapping;
+  floorTexture.repeat.set(10, 10);
+
+  const floorMaterial = new THREE.MeshStandardMaterial({ map: floorTexture });
+  const floorGeometry = new THREE.PlaneGeometry(50, 50);
+  floor = new THREE.Mesh(floorGeometry, floorMaterial);
+  floor.rotation.x = -Math.PI / 2;
+  floor.receiveShadow = true;
+  scene.add(floor);
+
+  // Crear cubo con color del personaje
   const geometry = new THREE.BoxGeometry();
   const material = new THREE.MeshStandardMaterial({ color });
   cube = new THREE.Mesh(geometry, material);
   cube.position.set(x, y + 0.5, z);
+  cube.castShadow = true;
   scene.add(cube);
 
   // Mostrar estadísticas
@@ -42,6 +62,7 @@ export function loadThreeScene({ x = 0, y = 0, z = 0, color = 0xff4500, stats =
   statsDiv.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
   statsDiv.style.padding = "10px";
   statsDiv.style.borderRadius = "10px";
+  statsDiv.style.fontFamily = "Arial, sans-serif";
   statsDiv.innerHTML = `
     <strong>Estadísticas del Personaje:</strong><br>
     Fuerza: ${(stats.strength * 100).toFixed(0)}<br>
@@ -53,3 +74,17 @@ export function loadThreeScene({ x = 0, y = 0, z = 0, color = 0xff4500, stats =
   // Iniciar animación
   animate();
 }
+
+// Función para animar la escena
+function animate() {
+  requestAnimationFrame(animate);
+  renderer.render(scene, camera);
+}
+
+// Desmontar la escena
+export function unloadThreeScene() {
+  if (renderer) {
+    renderer.dispose();
+    document.body.innerHTML = ""; // Limpiar la interfaz
+  }
+}