Build 3D Games Without Writing Code Using Amazon Q Developer CLI

Overview

Amazon Q Developer CLI provides generative‑AI‑driven conversational assistance that can read a codebase and generate commands, plans, and source files without manual coding.

Use case

Game publishers need to produce many short advertisement videos for A/B testing. The ads have a short lifespan, requiring fast, low‑cost generation. Manual creation consumes significant development and art resources.

Solution

Combine Amazon Q Developer CLI with the three.js WebGL‑based 3D engine to generate a mini‑game, replace its assets with client‑specific models, and record gameplay to video files, all without writing code or opening an IDE.

Implementation steps

Install Amazon Q Developer CLI (see AWS documentation for installation).

Clone the three.js repository: git clone https://github.com/mrdoob/three.js.git.

Run the CLI so that it reads the three.js source and documentation.

Prompt the CLI to create a game‑creation plan (e.g., a racing mini‑game).

Execute the plan; the CLI generates a complete three.js project in a target directory.

Experimental verification

During the experiment the user issued prompts such as:

1. Use Amazon Q Developer CLI to understand the three.js project.
2. Ask the CLI to create a racing‑game mini‑project at /Users/valyli/three-js-demo.
3. Iterate on bug fixes (reverse steering, camera position, force direction).
4. Add physics and collision handling.

No manual code was written and no IDE was opened.

Rendering server architecture

The server consists of server.js (Express + Socket.IO) that receives PNG frames from the client and pipes them to FFmpeg, and render.sh which launches the Node server, creates a FIFO pipe, and starts FFmpeg with the requested video size, output name, and frame rate.

Server code ( server.js )

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const { spawn } = require('child_process');
const fs = require('fs');
const app = express();
app.use(express.static('public'));
const server = http.createServer(app);
const io = socketIo(server);
io.on('connection', socket => {
  socket.on('newFrame', data => {
    // write PNG data to FIFO pipe
  });
});
server.listen(3000);

Render script ( render.sh )

#!/bin/bash
# Parse arguments: -s WIDTHxHEIGHT -o OUTPUT -f FRAMERATE
mkfifo /tmp/framepipe
node server.js &
ffmpeg -y -f image2pipe -r $FRAMERATE -i /tmp/framepipe -c:v libx264 -pix_fmt yuv420p $OUTPUT

Client side (three.js demo)

In main.js the code checks for a ?size= query parameter to enable render mode, establishes a Socket.IO connection, and on each animation frame captures the canvas as a data URL and sends it to the server.

// Global socket variable
let socket;
function init(){
  // existing init code…
  if (location.search.includes('?size=')) {
    initRenderMode();
  }
}
function initRenderMode(){
  const sizeParam = location.search.split('?size=')[1];
  const [width, height] = sizeParam.split('x').map(Number);
  renderer.setSize(width, height);
  socket = io();
  socket.emit('greetings', {});
  socket.on('nextFrame', () => {
    renderer.render(scene, camera);
    const dataURL = renderer.domElement.toDataURL('image/png');
    socket.emit('newFrame', { png: dataURL });
  });
}

Video rendering pipeline

Run ./render.sh -s 640x480 -o output.mp4 -f 24.

The script launches a headless Chrome instance (via Puppeteer) that loads the game page.

The page detects render mode, connects to the Socket.IO server, and begins sending PNG frames.

The server writes frames to the FIFO pipe; FFmpeg reads from the pipe and encodes output.mp4.

Steps 3‑4 repeat until the game ends or the script is stopped.

Adding video rendering to any three.js project

Copy the render_server directory into the project.

Install dependencies: npm install express socket.io get-pixels.

Modify the client entry point to detect the ?size= parameter, open a Socket.IO connection, and emit PNG frames as shown above.

Execute ./render.sh with desired parameters.

Cloud deployment

The rendering workflow can be containerised and run on Amazon EC2 or Amazon Fargate. A headless Chrome instance loads the three.js page, FFmpeg records the frame stream, and the final video is uploaded to Amazon S3. The solution scales horizontally for batch A/B‑test material generation and can be orchestrated with Step Functions, EventBridge, or Amazon Bedrock for script and copy generation.

Control‑group test

When the three.js source code and documentation were omitted from the CLI context, the same prompts produced a less accurate result. The CLI still attempted to install three.js ( npm install [email protected] [email protected]) but the generated command was not found in the official three.js documentation, demonstrating the benefit of providing the full code base to the model.

Key code snippets

Node.js rendering script (cloud)

const puppeteer = require('puppeteer');
const { spawn } = require('child_process');
(async () => {
  const browser = await puppeteer.launch({headless:true, args:['--no-sandbox','--disable-gpu']});
  const page = await browser.newPage();
  await page.setViewport({width:1280, height:720});
  await page.goto('https://your-s3-site-url/game.html?record=true');
  const ffmpeg = spawn('ffmpeg', ['-y','-f','image2pipe','-r','24','-i','-','-c:v','libx264','-pix_fmt','yuv420p','output.mp4']);
  for (let i=0; i<240; i++) { // 10 s at 24 fps
    const screenshot = await page.screenshot({type:'png'});
    ffmpeg.stdin.write(screenshot);
  }
  ffmpeg.stdin.end();
  await browser.close();
})();

Three.js CDN inclusion (reference)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

References

Amazon Q Developer CLI record: https://github.com/valyli/aws-qcli-three.js/blob/main/amazon-q-cli-record.md

Generated demo project: https://github.com/valyli/aws-qcli-three.js/tree/main/three-js-demo

Three.js documentation: https://threejs.org/manual/en/installation

Three.js source repository: https://github.com/mrdoob/three.js