零代码生成 3D 游戏：基于 Amazon Q Developer CLI 和 Three.js 的实践

亚马逊云开发者2025-08-05 9:17

Amazon Q Developer 是一个由生成式人工智能（AI）驱动的对话助手，可帮助你理解、构建、扩展和运维亚马逊云科技应用程序。你可以向它询问关于亚马逊云科技架构、你的亚马逊云科技资源、最佳实践、官方文档、技术支持等问题。Amazon Q 不断更新其能力，确保为你的问题提供最具上下文相关性和可操作性的答案。

Amazon Q Developer CLI 能整合上下文信息，使 Amazon Q 更深入理解你的使用场景，从而提供相关且具有上下文感知的响应。当你开始输入命令时，Amazon Q 会自动补全相关的子命令、选项和参数。

three.js 是一个构建于 WebGL 之上的轻量级 3D 游戏引擎。它是一个 JavaScript 3D 库，使开发者可以轻松地在浏览器中使用 WebGL 创建和展示动画 3D 图形。three.js 屏蔽了底层图形 API 的复杂性，允许开发者用简洁、高层次的代码构建沉浸式、交互式的 3D 体验。无论你是在创建数据可视化、仿真系统、游戏，还是产品展示，three.js 都能以高性能、灵活性和易用性，帮助你将创意变为现实。

📢限时插播：Amazon Q Developer 来帮你做应用啦！

🌟10分钟帮你构建智能番茄钟应用，1小时搞定新功能拓展、测试优化、文档注程和部署

⏩快快点击进入《Agentic Al 帮你做应用 -- 从0到1打造自己的智能番茄钟》实验

免费体验企业级 AI 开发工具的真实效果吧

构建无限，探索启程!

客户场景

游戏行业的客户，在发行游戏产品时，需要制作大量的广告视频素材用于投放。因为广告素材的生命一般都很短，只有几天时间。客户为了保证广告投放效果稳定，必须持续制作大量视频素材，进行 AB Test。这占用了他们大量的研发和美术人力资源。所以，客户为了提升生产效率，降低人力成本，希望利用生成式 AI 来帮助他们。

又因为游戏行业的特性，这些广告素材的内容区别于其他行业的传统广告。它们通常使用的是自己游戏的美术设计，例如：角色的 3D 模型、卡通界面、技能特效等。因为和真实世界的场景差别很大，这使得目前主流的生成式模型无法帮助他们生成广告视频。并且在视频中，客户经常要求视频中的多个游戏角色，按照剧本进行互动，推进剧情发展。这也超出了目前主流的生成式模型的能力范围。

解决方案

使用 Amazon Q Developer CLI 的方式，引入 Amazon Q 强大的人工智能能力，结合 three.js 3D 游戏引擎，生成 mini 游戏。再通过视频录制，生成视频广告素材。客户通过替换自己游戏的美术资源，实现批量生成视频素材，满足 AB Test 的数量需求。通过 Amazon Q Developer CLI 的对话方式，可以在不写代码的情况下改编演出剧本，使广告创意人员可以独立实现效果。

three.js 的渲染可运行于云端的 Headless 浏览器环境（如 Puppeteer + Headless Chrome），实现离线式、自动化的视频渲染流程，适合批量生成广告素材，支持多线程渲染和扩展性部署。同时因为 three.js 是开源项目，Amazon Q 可以理解和参考 three.js 的全部代码和文档，获得比其他商用闭源引擎更好的准确性。

方案实施步骤

  1. 安装 Amazon Q for command line
  2. 克隆 three.js git 仓库到本地电脑
  3. 使用 Amazon Q Developer CLI 理解 three.js 工程的代码和文档
  4. 使用 Amazon Q Developer CLI 编写一个游戏创建计划
  5. 使用 Amazon Q Developer CLI 根据计划创建一个 mini 游戏工程

实验验证

以下实验过程中，人工没有编写任何一行代码。也没有浏览过任何工程代码。本地环境中不需要任何编程 IDE。

以下是使用到的关键提示词：

1、使用 Amazon Q Developer CLI 理解 three.js 工程的代码和文档。示例：

这个路径下,是从three.js clone的git库,其中包含全部的代码和文档.我想用之后利用这些信息,指导你来制作一款基于three.js的游戏.那这些资料应该如何整理?我可以使用亚马逊云科技上的服务,比如Bedrock,也可以使用KnowledgeBases.给出最合理和最正确的建议.我需要稳定和可靠的工作质量.

2、提出创建小游戏的具体要求，并要求 Amazon Q Developer 先制定计划。此步骤结束时，mini 游戏工程已经创建完成，并可以在浏览器中运行。示例：

创建一个赛车的小游戏,放到这个路径 /Users/valyli/three-js-demo . 创建之前,先做规划,确定创建的步骤.把这个计划写入一个markdown文档.后续创建过程中,每一个步骤都重新与这个计划文档进行核对,并标注完成的状态.通过这个方法来确保创建过程的质量,保证最终输出的游戏工程可以正确运行.在这个版本中,最重要的是做出这个小游戏,能够正常演示.并不需要复杂的玩法和功能.

3、修复 BUG。可以看到，对于 3D 场景，模型在坐标系上的处理还稍显逊色。需要辅助输入更多的调试信息才能修正。示例：

现在游戏已经能够运行,车子也可以控制.但是有一些bug:

车子的左右方向控制反了车子的方向控制,参照系好像不是车子本身新的问题,镜头跑到车的下面了.应该是在车的上方,跟随在斜后方的位置

前进和后退的参照系,需要以车体的坐标系为准

W和S键,控制方向的逻辑不对.当车体发生方向旋转后,W和S的操作结果就混乱了.重新检查这2个按键的控制逻辑.一定要根据车头当前的方向来判断.

W产生的推力,必须沿车头方向向前;S产生的推力,必须沿车尾方向向后.你现在提供的程序,没有实现这个效果.这部分代码重新生成

还是一模一样的问题,没有修复.发现一个现象,当车从初始位置出发,转向超过180度后,W和S键作用对调了

这次修改后,W和S键已经无效了

还是不动

4、添加物理碰撞。结束整个生成过程。示例：

现在按键控制已经正确.我还是希望能有物理模型,以及碰撞的功能.请添加

生成效果展示

生成过程记录

github.com/valyli/aws-...

生成的 demo 工程

github.com/valyli/aws-...

本地渲染原型设计（验证思路）

在本项目中，我们不仅实现了基于 Three.js 的 3D 游戏，还提供了一个强大的功能：将游戏画面渲染为视频文件。这个功能对于生成广告素材特别有用，让创意人员可以轻松录制游戏场景，用于营销推广。下面我们来详细解析这个功能的实现原理和使用方法。

渲染服务器与客户端代码分析

渲染服务器（render_server）

渲染服务器主要由以下几个部分组成：

1、server.js：核心服务器代码

  • 使用 Express 创建 Web 服务器，提供静态文件服务
  • 使用 Socket.IO 建立与客户端的实时通信
  • 接收客户端发送的每一帧画面，并写入 FIFO 管道
  • 与 FFmpeg 协同工作，将帧序列转换为视频文件

2、render.sh：渲染脚本

  • 接收参数：视频尺寸、输出文件名、帧率
  • 创建 FIFO 管道用于数据传输
  • 启动 Node.js 服务器并将其输出通过管道传给 FFmpeg
  • FFmpeg 负责将原始帧数据编码为视频文件

客户端代码（three-js-demo）

客户端代码主要在 main.js 文件中实现了与渲染服务器的通信：

1、Socket.IO 连接：

  • 检测 URL 参数中是否包含 size 参数，以确定是否处于渲染模式
  • 建立与渲染服务器的 Socket.IO 连接

2、帧捕获逻辑：

  • 在游戏循环中捕获每一帧的渲染结果
  • 将渲染结果转换为 PNG 格式的数据 URL
  • 通过 Socket.IO 发送给服务器

实现原理

整个视频渲染过程的工作流程如下：

  1. 用户执行 render.sh 脚本，指定视频参数
  2. 脚本创建 FIFO 管道，启动 Node.js 服务器
  3. 服务器启动 Chrome 浏览器，加载游戏页面
  4. 游戏页面检测到渲染模式，连接到 Socket.IO 服务器
  5. 服务器请求第一帧，客户端渲染并发送
  6. 服务器接收帧数据，转换后写入 FIFO 管道
  7. FFmpeg 从管道读取数据，编码为视频文件
  8. 重复步骤 5-7 直到游戏结束或用户中断

如何在 Three.js 项目中添加视频渲染功能

要在自己的 Three.js 项目中添加类似的视频渲染功能，可以按照以下步骤操作：

1、准备渲染服务器：

  • 复制 render_server 目录到你的项目中
  • 安装必要的依赖：npm install express socket.io get-pixels

2、修改客户端代码：

  • 在游戏的主 JavaScript 文件中添加以下代码：
markdown 复制代码 
1.  // 全局变量，用于存储socket连接
2.  let socket;
3.  
4.  // 在初始化函数中添加
5.  function init() {
6.    // 原有的初始化代码...
7.    
8.    // 检查是否处于渲染模式
9.    if (location.search.includes('?size=')) {
10.      initRenderMode();
11.    }
12.  }
13.  
14.  // 渲染模式初始化
15.  function initRenderMode() {
16.    // 解析尺寸参数
17.    const sizeParam = location.search.split('?size=')[1];
18.    const [width, height] = sizeParam.split('x').map(Number);
19.    
20.    // 调整渲染器尺寸
21.    renderer.setSize(width, height);
22.    
23.    // 连接到Socket.IO服务器
24.    socket = io();
25.    
26.    // 发送问候
27.    socket.emit('greetings', {});
28.    
29.    // 监听服务器请求
30.    socket.on('nextFrame', function(ready) {
31.      // 渲染一帧并发送
32.      renderer.render(scene, camera);
33.      const dataURL = renderer.domElement.toDataURL('image/png');
34.      socket.emit('newFrame', { png: dataURL });
35.    });
36.  }
37.  
38.  // 在游戏循环中添加（可选，用于持续发送帧）
39.  function gameLoop() {
40.    // 原有的游戏循环代码...
41.    
42.    // 渲染场景
43.    renderer.render(scene, camera);
44.    
45.    // 如果在渲染模式下，发送当前帧
46.    if (socket && socket.connected) {
47.      const dataURL = renderer.domElement.toDataURL('image/png');
48.      socket.emit('newFrame', { png: dataURL });
49.    }
50.  }

3、使用方法：

  • 确保 FFmpeg 已安装在系统中
  • 执行渲染脚本：``./render.sh -s 640x480 -o output.mp4 -f 24`
  • 参数说明：-s: 视频尺寸（宽x高）-o: 输出文件名-f: 帧率

通过这种方式，你可以轻松地将任何 Three.js 项目转换为视频生成工具，为广告创意提供更多可能性。

云端渲染部署方案

为满足云上自动化生产需求，我们可将渲染流程部署在亚马逊云端主机上：

  • 使用 EC2 或 Fargate 容器 启动 Node.js + Puppeteer 服务
  • 云端 Headless Chrome 加载 three.js 页面，自动运行指定剧本
  • 使用 FFmpeg 录制帧序列为高质量视频
  • 最终输出上传至 Amazon S3，供后续使用

该方案具备以下优势：

  • 可横向扩展，适配 AB Test 批量素材生成
  • 可追踪、复现渲染过程（容器 ID + 剧本输入 + Git 哈希）
  • 可与 Step Functions / EventBridge 编排流程，或结合 Bedrock 自动生成剧本与文案

Node.js + Puppeteer + FFmpeg 示例代码

javascript 复制代码 
// render.js - Node.js 脚本，用于云端自动渲染并录制

const puppeteer = require('puppeteer');
const { spawn } = require('child_process');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-gpu'],
  });

  const page = await browser.newPage();
  const width = 1280, height = 720;
  await page.setViewport({ width, height });

  // 载入 three.js 游戏页面
  await page.goto('https://your-s3-site-url/game.html?record=true');

  // 启动 FFmpeg 进程，录制屏幕帧
  const ffmpeg = spawn('ffmpeg', [
    '-y',
    '-f', 'image2pipe',
    '-r', '24',
    '-i', '-',             // 从 stdin 接收图像帧
    '-c:v', 'libx264',
    '-pix_fmt', 'yuv420p',
    'output.mp4'
  ]);

  // 持续抓取页面帧并传入 FFmpeg
  for (let i = 0; i < 240; i++) {  // 录制 10 秒（24fps）
    const screenshot = await page.screenshot({ type: 'png' });
    ffmpeg.stdin.write(screenshot);
  }

  ffmpeg.stdin.end();
  await browser.close();
})();

使用说明

  • 将 render.js 脚本部署在 EC2 或 Fargate 容器中运行
  • 将 game.html 托管在 Amazon S3 并启用静态网站托管功能
  • 渲染完成后生成的 output.mp4 可通过 Amazon CLI 上传至 S3：
bash 复制代码 
aws s3 cp output.mp4 s3://your-bucket/ads/output.mp4

对照组测试

在对照组测试中，我们向 Amazon Q Developer CLI 提出同样的要求，但不再提供 three.js 的代码和文档。观察它的生成过程。

1、移除理解 three.js 工程和文档的部分。然后输入一样的提升词，要求生成一个小游戏。示例：

创建一个赛车的小游戏,放到这个路径 /Users/valyli/three-js-demo-2 . 创建之前,先做规划,确定创建的步骤.把这个计划写入一个markdown文档.后续创建过程中,每一个步骤都重新与这个计划文档进行核对,并标注完成的状态.通过这个方法来确保创建过程的质量,保证最终输出的游戏工程可以正确运行.在这个版本中,最重要的是做出这个小游戏,能够正常演示.并不需要复杂的玩法和功能.

2、观察生成过程，发行这次 Amazon Q Developer CLI 执行了 three.js 的安装步骤。

sql 复制代码 
1.  🛠️  Using tool: execute_bash (trusted)
2.  ⋮ 
3.  ● I will run the following shell command: 
4.  cd /Users/valyli/three-js-demo-2 && npm install three@0.159.0 serve@14.2.1
5.  ⋮ 
6.  ↳ Purpose: 安装项目依赖
7.  
8.  
9.  added 91 packages, and audited 92 packages in 7s
10.  
11.  24 packages are looking for funding
12.  run `npm fund` for details
13.  
14.  3 high severity vulnerabilities
15.  
16.  To address all issues, run:
17.  npm audit fix --force
18.  
19.  Run `npm audit` for details.

3、我们利用其中的关键步骤，js 的库引用方式进行分析。

  • 对照组

npm install three@0.159.0 serve@14.2.1

这个安装命令在 three.js 官方文档无法找到。所以是 Amazon Q Developer CLI 根据模型已有的知识生成。

  • demo
xml 复制代码 
 <!-- 引入 Three.js 库 -->
 <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>

这个引用方式可以在官方文档中找到，说明 Amazon Q Developer CLI 在按照要求理解文档后执行的生成。

相关文档：threejs.org/manual/#en/...

所以，通过要求 Amazon Q Developer CLI 理解指定文档和代码的方式，能够更准确地按照我们的意愿生成内容。我们可以通过这样的方式，为模型输入更高质量的信息，以及我们需求中特有的信息。

*前述特定亚马逊云科技生成式人工智能相关的服务目前在亚马逊云科技海外区域可用。亚马逊云科技中国区域相关云服务由西云数据和光环新网运营，具体信息以中国区域官网为准。

附录

本篇作者

本期最新实验为《Agentic AI 帮你做应用 ------ 从0到1打造自己的智能番茄钟》

✨ 自然语言玩转命令行，10分钟帮你构建应用，1小时搞定新功能拓展、测试优化、文档注释和部署

💪 免费体验企业级 AI 开发工具，质量+安全全掌控

⏩️[点击进入实验] 即刻开启 AI 开发之旅

构建无限, 探索启程！

相关推荐
新智元几秒前
奥特曼深夜「放鸽子」！不发GPT-5，竟是给7亿用户「防沉迷」？
人工智能·openai
白仑色33 分钟前
JavaScript案例（乘法答题游戏）
开发语言·javascript·游戏
小白嘎嘎35 分钟前
智能手表：小恐龙游戏
游戏·智能手表
Jackson_Mseven38 分钟前
Instruction Tuning & RLHF：大侠成长之路的“武功秘籍”
人工智能·chatgpt·llm
人工智能训练师41 分钟前
Fay数字人如何使用GPT-SOVITS进行TTS转换以及遇到的一些问题
人工智能·gpt·语音识别
eric-sjq41 分钟前
0.08B参数以小博大：用小模型生成媲美GPT-4o的古典诗词
人工智能
数据知道44 分钟前
百度翻译详解：包括PaddleNLP、百度AI开放平台、接口逆向（包括完整代码）
人工智能·百度·语言模型·自然语言处理·机器翻译
舒一笑1 小时前
企业AI落地不顺问题可能出在你没搞懂知识库
人工智能
涛思数据（TDengine）1 小时前
可信数据库大会现场，TDengine 时序数据库展示核电场景下的高性能与 AI 创新
大数据·运维·数据库·人工智能·时序数据库·tdengine·涛思数据
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02全球最强模型Grok4，国内已可免费使用！（附教程）03UV安装并设置国内源04VMware Workstation Pro虚拟机的下载和安装图文保姆级教程(附下载链接)05KGG转MP3工具|非KGM文件|解密音频06如何在 Cursor 中继续使用 Claude07Coze 开源了，送上保姆级私有化部署方案【建议收藏】08腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）09Claude Code+智谱GLM-4.5接入指南（附实测体验）10扣子开源本地部署教程 丨Coze智能体小白喂饭级指南