Update menu.js

js/menu.js

@@ -4,71 +4,60 @@ import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.m
 // Crear la escena, cámara y renderizador
 const scene = new THREE.Scene();
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+camera.position.z = 5;
+
 const renderer = new THREE.WebGLRenderer();
 renderer.setSize(window.innerWidth, window.innerHeight);
 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 });
-const plane = new THREE.Mesh(planeGeometry, planeMaterial);
-plane.position.set(0, -1, -5);
-scene.add(plane);
+// Crear un grupo para los elementos del menú
+const menuGroup = new THREE.Group();
+scene.add(menuGroup);
 
-// Crear un canvas y dibujar el menú
-const canvas = document.createElement("canvas");
-const context = canvas.getContext("2d");
-canvas.width = 256;
-canvas.height = 128;
+// Crear geometrías para cada ícono del menú
+const createMenuOption = (color, positionY) => {
+  const geometry = new THREE.BoxGeometry(0.3, 0.3, 0.1);
+  const material = new THREE.MeshBasicMaterial({ color });
+  const box = new THREE.Mesh(geometry, material);
+  box.position.y = positionY;
+  return box;
+};
 
-context.fillStyle = "#ffffff";
-context.fillRect(0, 0, canvas.width, canvas.height);
-context.fillStyle = "#000000";
-context.font = "20px Arial";
-context.fillText("Opción 1", 10, 30);
-context.fillText("Opción 2", 10, 60);
-context.fillText("Opción 3", 10, 90);
+// Crear opciones del menú
+const menuColors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff];
+menuColors.forEach((color, index) => {
+  const option = createMenuOption(color, index * -0.5); // Separar cada opción
+  menuGroup.add(option);
+});
 
-const texture = new THREE.CanvasTexture(canvas);
-planeMaterial.map = texture;
-planeMaterial.needsUpdate = true;
+// Crear un plano de fondo
+const planeGeometry = new THREE.PlaneGeometry(3, 10);
+const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x222222 });
+const background = new THREE.Mesh(planeGeometry, planeMaterial);
+background.position.z = -0.2; // Colocar detrás del menú
+scene.add(background);
 
-// Crear un raycaster para detectar clics
+// Raycaster para detección de interacciones
 const raycaster = new THREE.Raycaster();
+const mouse = new THREE.Vector2();
 
-// Función para detectar clics y ejecutar acciones
-function onMouseClick(event) {
-  const mouse = new THREE.Vector2();
+function onMouseMove(event) {
   mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
   mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
 
   raycaster.setFromCamera(mouse, camera);
-  const intersects = raycaster.intersectObjects([plane]);
+  const intersects = raycaster.intersectObjects(menuGroup.children);
+
+  menuGroup.children.forEach((child) => {
+    child.material.color.set(0xffffff); // Resetear color
+  });
 
   if (intersects.length > 0) {
-    console.log("Has hecho clic en el plano");
+    intersects[0].object.material.color.set(0x00ffff); // Cambiar color al pasar el ratón
   }
 }
 
-window.addEventListener("click", onMouseClick);
-
-// 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);
-
-// 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;
-});
+window.addEventListener("mousemove", onMouseMove);
 
 // Función de renderizado
 function animate() {