# Cómo hacer un juego 3D para el navegador

## Describe el mundo, la cámara y los controles, mantén el juego pequeño y trae tus propios modelos como archivos GLB; Go Bananas crea el juego con three.js y agrega los controles para teléfono.

Un juego 3D funciona en el navegador como cualquier otra página web, dibujado con WebGL. Go Bananas crea los juegos 3D con three.js, la biblioteca 3D más usada en la web, así que puedes describir un juego de carreras, un laberinto o un pequeño mundo abierto y jugarlo unos minutos después. Esta guía cubre qué hace que el 3D sea más difícil que el 2D, cómo pedir un juego 3D, cómo usar tus propios modelos 3D y escenas escaneadas, y cómo hacer que funcione con fluidez en los teléfonos.

## Por qué el 3D es más difícil que el 2D

Tres cosas se complican en cuanto agregas una dimensión:

- **La cámara.** En 2D la pantalla es el mundo. En 3D eliges dónde va la cámara: detrás del jugador, por encima de la escena o dentro de la cabeza del jugador. Una mala cámara vuelve injugable un buen juego.
- **Los controles.** Moverse en 3D requiere desplazarse y también mirar alrededor. Con un teclado son WASD o las flechas más el mouse. En un teléfono son dos pulgares sobre una pantalla plana.
- **El rendimiento.** En cada fotograma se dibuja cada objeto visible. Los modelos detallados, las texturas grandes y muchas luces hacen más lento un juego, y los teléfonos son los primeros en ponerse lentos.

Los buenos juegos 3D mantienen esto bajo control: una cámara clara, controles sencillos y un mundo del tamaño que un teléfono puede dibujar.

## Cómo crea Go Bananas los juegos 3D

Cuando pides un juego 3D, la IA lo escribe con three.js, con cargadores para archivos de modelos 3D. Sigue reglas que importan en 3D:

- **Los controles para teléfono vienen incluidos.** Los juegos 3D tienen un joystick virtual en el lado izquierdo de la pantalla para moverse, arrastrar para mirar en el lado derecho, y botones de acción de unos 60 píxeles de ancho para que los pulgares les atinen.
- **Las teclas no desplazan la página.** Las flechas y la barra espaciadora van al juego en lugar de desplazar el navegador.
- **El juego llena la pantalla** y se ajusta cuando cambia el tamaño de la ventana o se gira el teléfono.
- **Las capturas funcionan.** La imagen de vista previa del juego se toma de la escena 3D unos segundos después de empezar la primera partida.
- **Los modelos se pueden mover en el editor.** El editor tiene una pestaña **3D Position** (posición 3D) donde puedes colocar los modelos en la escena.

### Cómo pedir un juego 3D

Nombra la cámara, los controles y el objetivo. Por ejemplo:

> Un juego 3D en tercera persona en el que eres un pequeño robot que explora una isla flotante. La cámara sigue al robot desde atrás. Recoge 10 cristales brillantes antes de que se ponga el sol en 3 minutos. Estilo low-poly con colores suaves.

> Un laberinto 3D en primera persona. Las paredes son setos y el suelo es césped. Encuentra la salida antes de que se acabe el tiempo. Muestra una pequeña brújula que apunte a la salida.

Algunos hábitos ayudan:

- **Elige una sola cámara.** «La cámara sigue desde atrás», «vista desde arriba», «primera persona».
- **Mantén el mundo pequeño.** Una isla, una arena, una pista. Un juego 3D pequeño terminado es mejor que uno grande sin terminar, y cada juego tiene un límite de tamaño.
- **Elige un estilo sencillo.** El low-poly y los colores planos se ven limpios y funcionan rápido. Pide «realista» solo cuando traigas tus propios modelos o escenas.
- **Di qué hace el jugador cada pocos segundos.** Recoger, esquivar, correr, apuntar.

## Cómo usar tus propios modelos 3D

Puedes subir tus propios modelos y usarlos en cualquier juego que crees. Súbelos desde el panel de crear (el botón 📎, o arrastrando el archivo al chat), desde la pestaña Assets (recursos) con **Upload Asset** (subir recurso), o en el editor. Necesitas una cuenta verificada.

| Formato | Qué hace Go Bananas con él |
| --- | --- |
| [GLB](/formats/glb) | Lo conserva tal cual. Recomendado. |
| [glTF](/formats/gltf) | Lo empaqueta en un solo GLB. Debe ser autónomo, o subirse como ZIP con sus archivos. |
| [FBX](/formats/fbx) | Lo convierte a GLB. Las texturas se reducen a 512 por 512 píxeles como máximo; las animaciones se conservan. |
| [OBJ](/formats/obj) | Lo conserva tal cual, pero sin materiales ni texturas. |
| [ZIP](/formats/zip) | Un paquete con un modelo y sus texturas y buffers. Se conserva un modelo. |

**GLB es el formato que conviene usar.** Guarda la malla, los materiales, las texturas y las animaciones en un solo archivo, y el sitio lo analiza cuando lo subes. Lee los nombres de las animaciones del modelo, su altura y su orientación, y calcula una escala, una rotación y un ajuste respecto del suelo para que el modelo quede de pie y con un tamaño razonable. Esa información se le pasa a la IA, así que tu modelo aparece del lado correcto, a la escala correcta y sobre el suelo.

Para usar un modelo, escribe **@** en el cuadro de crear o de editar y elígelo. El nombre del modelo va entre comillas:

> Haz que "caballero" sea el personaje del jugador. Cuando el jugador presione espacio, reproduce la animación de ataque del caballero.

En el código, un juego encuentra tu modelo en `window.GAME_ASSETS.models['caballero'].url`, donde el nombre es el nombre del archivo sin su extensión. Si cambias el nombre del archivo en tus recursos, cambia ese nombre.

Límites: cada archivo subido puede pesar hasta 200 MB, y el almacenamiento de tu cuenta tiene 100 MB en una cuenta gratuita o 1 GB en Pro. Puedes subir hasta 20 archivos por hora.

## Escenas fotorrealistas con Gaussian splats

Los Gaussian splats son un tipo más nuevo de 3D: en lugar de triángulos, una escena es una nube de millones de puntos suaves de color capturados a partir de fotos reales. Se ven fotorrealistas, sobre todo en lugares y objetos escaneados de la vida real.

Go Bananas acepta splats de tres maneras:

- **Archivos [PLY](/formats/ply)** de herramientas de captura de splats. Se reducen a 500,000 puntos y se empaquetan en un formato que carga rápido.
- **Archivos [SPZ](/formats/spz)**, un formato de splats compacto. Se reducen a 300,000 splats.
- **Una foto.** Sube un JPG o un PNG en el panel de crear y elige **Turn into 3D** (convertir en 3D). El sitio convierte esa sola foto en una escena de splats.

Puedes ver una vista previa de los splats y los modelos en el visor 3D del sitio antes de usarlos. Las escenas de splats son fondos geniales: una habitación escaneada para un juego de escape, una calle real para una persecución. No tienen formas de colisión como los niveles modelados, así que describe por dónde puede caminar el jugador, o pon paredes invisibles sencillas alrededor de la zona de juego.

## Cómo mantener rápidos los juegos 3D en teléfonos

Los teléfonos son donde los juegos 3D sufren primero. Estos consejos mantienen tu juego fluido:

- **Vigila la cantidad de polígonos.** Un personaje low-poly de unos pocos miles de triángulos es más que suficiente. Las escenas hechas con muchos modelos detallados suman rápido.
- **Usa texturas pequeñas.** 512 o 1024 píxeles por lado bastan para la mayoría de los objetos de un juego. Los archivos FBX subidos se reducen a 512 píxeles automáticamente; en el caso de GLB, reduce las texturas antes de subirlo.
- **Usa pocas luces y sombras.** Cada luz y cada sombra cuestan tiempo de dibujo. Una sola luz de sol con sombras sencillas suele verse bien.
- **Reutiliza modelos.** Veinte copias de un árbol cuestan menos que veinte árboles distintos.
- **Ten cuidado con los splats.** Incluso reducida a 300,000 o 500,000 puntos, una escena de splats es pesada. Una escena de splats por juego es un buen límite, y vale la pena probarla en un teléfono más viejo.
- **Prueba en un teléfono real.** Abre el juego en tu teléfono y prueba los controles con los pulgares. Si el joystick o los botones se sienten apretados, pide que los hagan más grandes.

## Cómo resolver problemas comunes del 3D

- **El modelo es demasiado grande, demasiado pequeño o está acostado.** Súbelo como GLB para que el sitio pueda medirlo, o dile a la IA: «Reduce "caballero" a la mitad de su tamaño y ponlo de pie.»
- **El modelo no se ve.** Puede estar dentro del suelo o detrás de la cámara. Pide: «Mueve "caballero" para que quede de pie sobre el suelo delante de la cámara», o usa la pestaña 3D Position.
- **El OBJ no tiene colores.** Los archivos OBJ llegan sin materiales. Convierte el modelo a GLB y vuelve a subirlo.
- **El juego se traba en un teléfono.** Pide menos objetos, menos detalle o que no haya sombras en los teléfonos.

## Relacionado

- [Cómo hacer un videojuego](/guides/how-to-make-a-video-game)
- [Fundamentos de diseño de juegos](/guides/game-design-basics)
- [Cómo describir un juego para que la IA lo cree](/guides/how-to-describe-a-game)
- [Cómo hacer un juego multijugador para el navegador](/guides/multiplayer-games)
- [Efectos de sonido y música](/guides/sound-and-music)
- [Cómo hacer que los juegos funcionen en teléfonos](/guides/games-on-phones)
- [Cómo publicar y compartir tu juego](/guides/publish-and-share)
- [Cómo usar Go Bananas desde ChatGPT o Claude](/guides/chatgpt-and-claude)
- Formatos de archivo: [GLB](/formats/glb), [glTF](/formats/gltf), [FBX](/formats/fbx), [OBJ](/formats/obj), [ZIP](/formats/zip), [PLY](/formats/ply), [SPZ](/formats/spz), [todos los formatos](/formats)