零代码生成 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 开发之旅

构建无限, 探索启程！

相关推荐
无风听海4 分钟前
行向量和列向量在神经网络应用中的选择
人工智能·深度学习·神经网络·行向量·列向量
一点一木16 分钟前
主流 AI 提示词优化工具推荐（2025 全面对比指南）
人工智能·openai·ai编程
全栈小525 分钟前
【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统
ide·人工智能·ai编程
能力越小责任越小YA1 小时前
服务器(Linux)新账户搭建Pytorch深度学习环境
人工智能·pytorch·深度学习·环境搭建
小五1271 小时前
机器学习-线性回归
人工智能·机器学习
攻城狮7号1 小时前
昆仑万维开源 Matrix-3D大模型，正在开启“造物主”模式
人工智能·matrix-3d·昆仑万维开源大模型
A7bert7772 小时前
【YOLOv5部署至RK3588】模型训练→转换RKNN→开发板部署
c++·人工智能·python·深度学习·yolo·目标检测·机器学习
闲不住的李先森2 小时前
AI 应用演进：从基础调用到自主智能体
人工智能·llm·aigc
数巨小码人2 小时前
AI+数据库：国内DBA职业发展与国产化转型实践
数据库·人工智能·ai·dba
黑客影儿2 小时前
使用UE5开发2.5D开放世界战略养成类游戏的硬件配置指南
开发语言·c++·人工智能·游戏·智能手机·ue5·游戏引擎
热门推荐
01UV安装并设置国内源02如何在Windows/Linux系统上安装adb03【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）04不再让Windows更新！&Edge游戏助手卸载及关闭自动更新05Cursor 快速入门指南：从安装到核心功能06Claude Code VSCode集成开发指南：AI编程助手完整配置07【踩坑笔记】50系显卡适配的 PyTorch 安装082025最新国内服务器可用docker源仓库地址大全（2025年8月更新）09Redis 下载与安装 教程 windows版10KGG转MP3工具|非KGM文件|解密音频