Update menu.js

js/menu.js

@@ -1,6 +1,5 @@
-// Importar Three.js y GSAP
+// Importar Three.js
 import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
-import { gsap } from "https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js";
 
 // Crear la escena, cámara y renderizador
 const scene = new THREE.Scene();
@@ -11,7 +10,7 @@ document.body.appendChild(renderer.domElement);
 
 // Crear un plano para el menú
 const planeGeometry = new THREE.PlaneGeometry(2, 1);
-const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); // Color de fondo del menú
+const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
 const plane = new THREE.Mesh(planeGeometry, planeMaterial);
 plane.position.set(0, -1, -5);
 scene.add(plane);
@@ -53,25 +52,23 @@ function onMouseClick(event) {
 
 window.addEventListener("click", onMouseClick);
 
-// Función para animar el menú
-function animateMenu() {
-  gsap.to(plane.scale, {
-    x: 2,
-    duration: 0.5,
-    ease: "power2.out"
-  });
-}
-
-// Crear un botón para activar la animación del menú
+// Agregar un botón de animación al DOM
 const menuButton = document.createElement("button");
 menuButton.id = "menu-button";
 menuButton.innerText = "Mostrar Menú";
 menuButton.style.position = "absolute";
 menuButton.style.top = "10px";
 menuButton.style.left = "10px";
+menuButton.style.padding = "10px 20px";
+menuButton.style.cursor = "pointer";
+menuButton.style.fontSize = "16px";
 document.body.appendChild(menuButton);
 
-menuButton.addEventListener("click", animateMenu);
+// Animación sencilla con CSS
+menuButton.addEventListener("click", () => {
+  plane.scale.x = plane.scale.x === 1 ? 2 : 1;
+  plane.scale.y = plane.scale.y === 1 ? 2 : 1;
+});
 
 // Función de renderizado
 function animate() {