# Como fazer um jogo 3D para navegador

## Descreva o mundo, a câmera e os controles, mantenha o escopo pequeno e traga seus modelos em GLB; o Go Bananas cria o jogo com three.js e adiciona os controles de celular.

Um jogo 3D roda no navegador como qualquer outra página da web, desenhado com WebGL. O Go Bananas cria jogos 3D com three.js, a biblioteca 3D mais usada na web, então você pode descrever um jogo de corrida, um labirinto ou um pequeno mundo aberto e jogar poucos minutos depois. Este guia cobre o que deixa o 3D mais difícil que o 2D, como pedir um jogo 3D, como usar seus próprios modelos 3D e cenas escaneadas, e como manter o jogo rodando bem no celular.

## Por que o 3D é mais difícil que o 2D

Três coisas ficam mais difíceis no momento em que você adiciona uma dimensão:

- **A câmera.** No 2D, a tela é o mundo. No 3D, você escolhe onde a câmera fica: atrás do jogador, acima da cena ou dentro da cabeça do jogador. Uma câmera ruim deixa um bom jogo impossível de jogar.
- **Os controles.** No 3D, é preciso andar e olhar em volta. No teclado, isso é WASD ou setas mais o mouse. No celular, são dois polegares numa tela lisa.
- **O desempenho.** Cada quadro desenha todos os objetos visíveis. Modelos detalhados, texturas grandes e muitas luzes deixam o jogo lento, e os celulares ficam lentos primeiro.

Bons jogos 3D mantêm isso sob controle: uma câmera clara, controles simples e um mundo do tamanho que um celular consegue desenhar.

## Como o Go Bananas faz jogos 3D

Quando você pede um jogo 3D, a IA escreve o jogo com three.js, com loaders para arquivos de modelos 3D. Ela segue regras que importam no 3D:

- **Os controles de celular já vêm incluídos.** Jogos 3D ganham um joystick virtual no lado esquerdo da tela para andar, arrastar para olhar no lado direito e botões de ação de uns 60 pixels de largura, para os polegares acertarem.
- **As teclas não rolam a página.** As setas e a barra de espaço vão para o jogo em vez de rolar o navegador.
- **O jogo ocupa a tela inteira** e se ajusta quando a janela muda de tamanho ou o celular gira.
- **As capturas de tela funcionam.** A imagem de prévia do jogo é tirada da cena 3D alguns segundos depois do início da primeira partida.
- **Os modelos podem ser movidos no editor.** O editor tem uma aba **3D Position** (posição 3D) onde você posiciona os modelos na cena.

### Pedindo um jogo 3D

Diga a câmera, os controles e o objetivo. Por exemplo:

> Um jogo 3D em terceira pessoa em que você é um robozinho explorando uma ilha flutuante. A câmera segue atrás do robô. Colete 10 cristais brilhantes antes de o sol se pôr, em 3 minutos. Estilo low-poly com cores suaves.

> Um labirinto 3D em primeira pessoa. As paredes são cercas vivas, e o chão é grama. Encontre a saída antes que o tempo acabe. Mostre uma pequena bússola apontando para a saída.

Alguns hábitos ajudam:

- **Escolha uma câmera.** "A câmera segue atrás", "vista de cima", "primeira pessoa".
- **Mantenha o mundo pequeno.** Uma ilha, uma arena, uma pista. Um jogo 3D pequeno terminado vale mais que um grande pela metade, e todo jogo tem um limite de tamanho.
- **Escolha um estilo simples.** Low-poly e cores chapadas ficam bonitos e rodam rápido. Peça "realista" só quando você trouxer seus próprios modelos ou cenas.
- **Diga o que o jogador faz a cada poucos segundos.** Coletar, desviar, correr, mirar.

## Usando seus próprios modelos 3D

Você pode enviar seus próprios modelos e usá-los em qualquer jogo que criar. Envie pelo painel de criação (o botão 📎, ou arraste o arquivo para o chat), pela aba Assets (arquivos) com **Upload Asset** (enviar arquivo), ou no editor. Você precisa de uma conta verificada.

| Formato | O que o Go Bananas faz com ele |
| --- | --- |
| [GLB](/formats/glb) | Mantém como está. Recomendado. |
| [glTF](/formats/gltf) | Empacota num único GLB. Ele precisa ser autocontido, ou enviado num ZIP com os arquivos dele. |
| [FBX](/formats/fbx) | Converte para GLB. As texturas são reduzidas para no máximo 512 por 512 pixels; as animações são mantidas. |
| [OBJ](/formats/obj) | Mantém como está, mas sem materiais nem texturas. |
| [ZIP](/formats/zip) | Um pacote com um modelo, as texturas e os buffers dele. Um modelo é mantido. |

**GLB é o formato para usar.** Ele guarda a malha, os materiais, as texturas e as animações num só arquivo, e o site o analisa quando você envia. Ele lê os nomes das animações, a altura e a orientação do modelo, e calcula uma escala, uma rotação e um ajuste de altura em relação ao chão para que o modelo fique em pé num tamanho razoável. Essa informação vai para a IA, então seu modelo aparece do lado certo, na escala certa e no chão.

Para usar um modelo, digite **@** na caixa de criação ou de edição e escolha o modelo. O nome dele vai entre aspas:

> Faça de "knight" o personagem do jogador. Quando o jogador apertar espaço, rode a animação de ataque do cavaleiro.

No código, um jogo encontra seu modelo em `window.GAME_ASSETS.models['knight'].url`, em que o nome é o nome do arquivo sem a extensão. Renomear o arquivo nos seus assets muda esse nome.

Limites: cada envio pode ter até 200 MB, e o armazenamento da sua conta comporta 100 MB numa conta gratuita ou 1 GB no Pro. Você pode enviar até 20 arquivos por hora.

## Cenas fotorrealistas com Gaussian splats

Gaussian splats são um tipo mais novo de 3D: em vez de triângulos, a cena é uma nuvem de milhões de pontinhos coloridos e suaves, capturados de fotos reais. Eles parecem fotos de verdade, principalmente para lugares e objetos escaneados da vida real.

O Go Bananas aceita splats de três jeitos:

- **Arquivos [PLY](/formats/ply)** de ferramentas de captura de splats. Eles são reduzidos a 500.000 pontos e empacotados num formato que carrega rápido.
- **Arquivos [SPZ](/formats/spz)**, um formato compacto de splats. Eles são reduzidos a 300.000 splats.
- **Uma foto.** Envie um JPG ou PNG no painel de criação e escolha **Turn into 3D** (transformar em 3D). O site transforma essa única foto numa cena de splats.

Você pode ver os splats e os modelos no visualizador 3D do site antes de usá-los. Cenas de splats são ótimos cenários: um quarto escaneado para um jogo de escape room, uma rua de verdade para uma perseguição. Elas não têm formas de colisão como as fases modeladas, então descreva por onde o jogador pode andar, ou coloque paredes invisíveis simples em volta da área de jogo.

## Mantendo jogos 3D rápidos no celular

O celular é onde os jogos 3D sofrem primeiro. Estas dicas deixam seu jogo fluido:

- **Fique de olho na quantidade de polígonos.** Um personagem low-poly de alguns milhares de triângulos já basta. Cenas feitas de muitos modelos detalhados pesam rápido.
- **Use texturas pequenas.** 512 ou 1024 pixels de lado bastam para a maioria dos objetos do jogo. Envios em FBX são reduzidos para 512 pixels automaticamente; no GLB, diminua as texturas antes de enviar.
- **Use poucas luzes e sombras.** Cada luz e cada sombra custam tempo de desenho. Uma luz de sol com sombras simples costuma ficar bom.
- **Reaproveite modelos.** Vinte cópias de uma árvore custam menos que vinte árvores diferentes.
- **Cuidado com os splats.** Mesmo reduzida a 300.000 ou 500.000 pontos, uma cena de splats é pesada. Uma cena de splats por jogo é um bom limite, e vale testar num celular mais antigo.
- **Teste num celular de verdade.** Abra o jogo no seu celular e teste os controles com os polegares. Se o joystick ou os botões parecerem apertados, peça para aumentá-los.

## Resolvendo problemas comuns no 3D

- **O modelo está grande demais, pequeno demais ou deitado.** Envie em GLB para o site conseguir medi-lo, ou diga à IA: "Diminua "knight" para metade do tamanho e deixe ele em pé."
- **O modelo está invisível.** Ele pode estar dentro do chão ou atrás da câmera. Peça: "Mova "knight" para ele ficar em pé no chão na frente da câmera", ou use a aba 3D Position.
- **O OBJ não tem cores.** Arquivos OBJ chegam sem materiais. Converta o modelo para GLB e envie de novo.
- **O jogo trava no celular.** Peça menos objetos, menos detalhes ou nada de sombras no celular.

## Leia também

- [Como criar um jogo](/guides/how-to-make-a-video-game)
- [Noções de game design](/guides/game-design-basics)
- [Como descrever um jogo para a IA criar o que você quer](/guides/how-to-describe-a-game)
- [Como fazer um jogo multiplayer para navegador](/guides/multiplayer-games)
- [Efeitos sonoros e música](/guides/sound-and-music)
- [Como fazer jogos que funcionam no celular](/guides/games-on-phones)
- [Como publicar e compartilhar seu jogo](/guides/publish-and-share)
- [Como usar o Go Bananas pelo ChatGPT ou pelo Claude](/guides/chatgpt-and-claude)
- Formatos de arquivo: [GLB](/formats/glb), [glTF](/formats/gltf), [FBX](/formats/fbx), [OBJ](/formats/obj), [ZIP](/formats/zip), [PLY](/formats/ply), [SPZ](/formats/spz), [todos os formatos](/formats)