diff --git a/js/menu.js b/js/menu.js index 4d77692a..a98b018a 100644 --- a/js/menu.js +++ b/js/menu.js @@ -1,6 +1,5 @@ -// Importar Three.js y GSAP +// Importar Three.js import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.module.js"; -import { gsap } from "https://cdn.jsdelivr.net/npm/gsap@3.11.5/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() {