在这里插入图片描述

  ◆ 博主名称: QuZhengRong
  AI俘虏,样式苦手



在这里插入图片描述

最近视频网站给我推送了不少 Claude Fable 5 和 Kimi K3 生成的游戏 —— Minecraft 克隆、太空射击、赛博朋克城市,效果都挺不错的。输入几句话,让编码 Agent 运行几个小时,就能跑出一个看起来还不错的 demo。但刷多了就发现一个规律:这些 3D 游戏几乎大部分都基于 Three.js

市面上已经有 Unity3D、Unreal 这些成熟的游戏引擎,为什么 AI 在没指定技术栈的情况下,默认会选 Three.js 来开发 3D 游戏?


一、构建简单

Three.js 项目构建起来非常的简单,先建一个 HTML 文件,再通过 CDN 或 NPM I 引入 Three.js,增加些 JS 或者 TS 脚本,项目的骨架就搭建好了,打开浏览器就能运行

对比一下其他引擎。Unity 项目的文件要按目录组织,C# 脚本、预制体、场景文件、资源配置互相关联,涉及的文件广度深度复杂度远超 Three.js,还得用 Editor 编译,缺了东西就跑不起来。Unreal 更复杂,.uproject 加上 C++ 构建系统加上 Blueprint 资源,而且 Unity 和 Unreal 的纹理、模型、音频这些二进制资源还得走导入管线处理。相对来说 Three.js 的构建要简单的多

<!-- Three.js 运行示例 -->
<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/three@0.185.0/build/three.module.js"
  }
}
</script>
<script type="module">
  import * as THREE from 'three';
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  scene.add(new THREE.AmbientLight(0xffffff, 0.4));
  const dirLight = new THREE.DirectionalLight(0xffffff, 1.0);
  dirLight.position.set(5, 10, 7.5);
  scene.add(dirLight);
  camera.position.z = 5;
  renderer.setAnimationLoop(() => {
    cube.rotation.x += 0.01;
    renderer.render(scene, camera);
  });
</script>


二、训练数据里 Three.js 最多

Three.js 在 Web 3D 领域有绝对的话语权:

  • NPM 周下载量 400 多万人次,Babylon.js 的 @babylonjs/core 不到它的十分之一
  • 开放网络上超过 70% 的 3D 内容是 Three.js 渲染的,从 Apple 产品页到独立浏览器游戏都有
  • GitHub 上 Three.js 相关仓库数量比 Babylon.js、PlayCanvas 这些加起来还多

Three.js 有完善的教程、网上的 Stack Overflow 问答、GitHub 开源项目也不少,这些内容被爬进训练集之后,Three.js 的代码样本比其他 3D 库和引擎多得多。让模型搭建一个 3D 游戏,它大概率会选 Three.js,因为参数里的3D游戏和 Three.js 一起出现的频率最高。

DAIR.AI 的 Elvis Saravia 评价 Fable 5 是"生成 3D 模拟/世界的最强 LLM",他演示用的就是 Three.js:

“Fable 5 is an absolute beast at threejs. It’s the best LLM at generating 3D simulations/worlds.”

参考:DAIR.AI Demos Fable 5 Generating Interactive 3D Worlds


三、反馈链路短

基于 Three.js 生成的游戏可以在浏览器里运行,从生成代码到看到效果,中间步骤少,通过截图和 DevTools 即可观察渲染效果,有完整的调试和修正回路。

Kimi K3 的发布博客里提到,模型生成代码后会截图看渲染效果,再根据截图修正代码。浏览器环境下这个流程非常顺畅:

1、模型生成 Three.js 代码
2、代码在浏览器中渲染
3、截图捕获渲染结果
4、模型分析截图,判断是否符合要求
5、修正代码,ReStart

参考:Kimi K3 Uses Three.js WebGPU for an AI-Built 3D Game Demo


四、总结

Three.js 成为 AI 生成游戏的默认选择,原因如下:
1、构建简单,HTML + JavaScript 就能搞定
2、训练数据多,模型熟悉 Three.js
3、反馈链路短,浏览器截图配置 DevTools 快速调试

不过这也说明 AI 选 Three.js 做 3D 游戏并不是因为它最适合,而是因为 Unity 和 Unreal 的 AI 开发路线尚不成熟。
目前 AI 生成的 Three.js 作品大部分都是 demo 级别的,想要让 AI 生成企业级别的游戏,还有待 Unity MCP、Unreal 插件的工具链的发展,让 AI 能操作编辑器、读取场景结构、理解资源引用,等工具链成熟之后,AI 在引擎里的成功率会提高不少
当然,游戏最重要的还是玩法,缺少有趣的灵魂,拿 AI 做出来的东西也只是电子废料,在 AI 时代,创意既昂贵,也廉价

五、LuckReport 项目推荐

在这里插入图片描述

导航:LuckReport专栏

1、项目简介

Luck-Report 是一款基于开源项目 UReport2 重构的 Java 高性能报表引擎,通过迭代单元格可以实现任意复杂的中国式报表。相较于 UReport2,Luck-Report 在技术架构上进行了全新升级,后端基于 SpringBoot 框架开发、前端采用 Vue 框架构建,技术选型贴合当下主流项目开发标准,可精准适配各类实际开发需求。

Luck-Report 提供了全新的基于网页的报表设计器,可以在 Chrome、Firefox、Edge 等各种主流浏览器运行(IE 浏览器除外)。使用 Luck-Report,打开浏览器即可完成各种复杂报表的设计制作。

Luck-Report 基于 Apache-2.0 开源协议开源

2、在线体验

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐