# How to make a 3D browser game

## Describe the world, the camera and the controls, keep the scope small, and bring your own models as GLB files; Go Bananas builds the game with three.js and adds phone controls.

A 3D game runs in the browser like any other web page, drawn with WebGL. Go Bananas builds 3D games with three.js, the most widely used 3D library on the web, so you can describe a racing game, a maze or a small open world and play it a few minutes later. This guide covers what makes 3D harder than 2D, how to ask for a 3D game, how to use your own 3D models and scanned scenes, and how to keep it running smoothly on phones.

## Why 3D is harder than 2D

Three things get harder the moment you add a dimension:

- **The camera.** In 2D the screen is the world. In 3D you choose where the camera sits: behind the player, above the scene, or inside the player's head. A bad camera makes a good game unplayable.
- **Controls.** Moving in 3D needs both movement and looking around. On a keyboard that's WASD or arrows plus the mouse. On a phone it's two thumbs on a flat screen.
- **Performance.** Every frame draws every visible object. Detailed models, large textures and many lights slow a game down, and phones slow down first.

Good 3D games keep these in check: one clear camera, simple controls, and a world sized to what a phone can draw.

## How Go Bananas makes 3D games

When you ask for a 3D game, the AI writes it with three.js, with loaders for 3D model files. It follows rules that matter for 3D:

- **Phone controls are built in.** 3D games get a virtual joystick on the left side of the screen for moving, drag-to-look on the right side, and action buttons about 60 pixels wide so thumbs can hit them.
- **Keys don't scroll the page.** Arrow keys and the space bar go to the game instead of scrolling the browser.
- **The game fills the screen** and adjusts when the window or phone is rotated.
- **Screenshots work.** The game's preview picture is taken from the 3D scene a few seconds into the first play.
- **Models can be moved in the editor.** The editor has a **3D Position** tab where you can place the models in the scene.

### Asking for a 3D game

Name the camera, the controls and the goal. For example:

> A 3D third-person game where you play a small robot exploring a floating island. The camera follows behind the robot. Collect 10 glowing crystals before the sun sets in 3 minutes. Low-poly style with soft colors.

> A first-person 3D maze. The walls are hedges, the floor is grass. Find the exit before the timer runs out. Show a small compass pointing to the exit.

A few habits help:

- **Pick one camera.** "Camera follows behind", "top-down", "first-person".
- **Keep the world small.** One island, one arena, one track. A finished small 3D game beats an unfinished big one, and every game has a size budget.
- **Choose a simple style.** Low-poly and flat colors look clean and run fast. Ask for "realistic" only when you bring your own models or scenes.
- **Say what the player does every few seconds.** Collecting, dodging, racing, aiming.

## Using your own 3D models

You can upload your own models and use them in any game you make. Upload them from the create panel (the 📎 button, or drag the file onto the chat), from the Assets tab with **Upload Asset**, or in the editor. You need a verified account.

| Format | What Go Bananas does with it |
| --- | --- |
| [GLB](/formats/glb) | Kept as it is. Recommended. |
| [glTF](/formats/gltf) | Packed into a single GLB. It must be self-contained, or uploaded as a ZIP with its files. |
| [FBX](/formats/fbx) | Converted to GLB. Textures are reduced to at most 512 by 512 pixels; animations are kept. |
| [OBJ](/formats/obj) | Kept as it is, but without materials or textures. |
| [ZIP](/formats/zip) | A bundle of one model with its textures and buffers. One model is kept. |

**GLB is the format to use.** It holds the mesh, materials, textures and animations in one file, and the site analyzes it when you upload. It reads the model's animation names, height and orientation, and works out a scale, a rotation and a ground offset so the model stands upright at a sensible size. That information goes to the AI, so your model shows up the right way up, at the right scale and on the ground.

To use a model, type **@** in the create or edit box and pick it. The model's name goes in quotes:

> Make "knight" the player character. When the player presses space, play the knight's attack animation.

In code, a game finds your model at `window.GAME_ASSETS.models['knight'].url`, where the name is the file name without its extension. Renaming the file in your assets changes that name.

Limits: each upload can be up to 200 MB, and your account's storage holds 100 MB on a free account or 1 GB on Pro. You can upload up to 20 files an hour.

## Photo-real scenes with Gaussian splats

Gaussian splats are a newer kind of 3D: instead of triangles, a scene is a cloud of millions of soft colored dots captured from real photos. They look photo-real, especially for places and objects scanned from life.

Go Bananas takes splats in three ways:

- **[PLY](/formats/ply) files** from splat capture tools. They're thinned to 500,000 points and packed into a fast-loading format.
- **[SPZ](/formats/spz) files**, a compact splat format. They're thinned to 300,000 splats.
- **A photo.** Upload a JPG or PNG in the create panel and choose **Turn into 3D**. The site turns the single photo into a splat scene.

You can preview splats and models in the site's 3D viewer before using them. Splat scenes make great backdrops: a scanned room for an escape game, a real street for a chase. They don't have collision shapes the way modeled levels do, so describe where the player can walk, or put simple invisible walls around the play area.

## Keeping 3D games fast on phones

Phones are where 3D games struggle first. These tips keep your game smooth:

- **Watch the polygon count.** A low-poly character of a few thousand triangles is plenty. Scenes made of many detailed models add up fast.
- **Keep textures small.** 512 or 1024 pixels on a side is enough for most game objects. FBX uploads are reduced to 512 pixels for you; for GLB, shrink textures before you upload.
- **Use few lights and shadows.** Each light and each shadow costs drawing time. One sun light with simple shadows usually looks fine.
- **Reuse models.** Twenty copies of one tree are cheaper than twenty different trees.
- **Be careful with splats.** Even thinned to 300,000 or 500,000 points, a splat scene is heavy. One splat scene per game is a good limit, and it's worth testing on an older phone.
- **Test on a real phone.** Open the game on your phone and try the controls with your thumbs. If the joystick or buttons feel cramped, ask for them to be bigger.

## Fixing common 3D problems

- **The model is too big, too small, or lying down.** Upload it as GLB so the site can measure it, or tell the AI: "Scale "knight" down to half its size and stand it upright."
- **The model is invisible.** It may be inside the floor or behind the camera. Ask: "Move "knight" so it stands on the ground in front of the camera", or use the 3D Position tab.
- **The OBJ has no colors.** OBJ files arrive without materials. Convert the model to GLB and upload it again.
- **The game stutters on a phone.** Ask for fewer objects, lower detail or no shadows on phones.

## Related

- [How to make a video game](/guides/how-to-make-a-video-game)
- [Game design basics](/guides/game-design-basics)
- [How to describe a game so the AI builds it](/guides/how-to-describe-a-game)
- [How to make a multiplayer browser game](/guides/multiplayer-games)
- [Sound effects and music](/guides/sound-and-music)
- [Making games work on phones](/guides/games-on-phones)
- [Publishing and sharing your game](/guides/publish-and-share)
- [Using Go Bananas from ChatGPT or Claude](/guides/chatgpt-and-claude)
- File formats: [GLB](/formats/glb), [glTF](/formats/gltf), [FBX](/formats/fbx), [OBJ](/formats/obj), [ZIP](/formats/zip), [PLY](/formats/ply), [SPZ](/formats/spz), [all formats](/formats)