A 40kb+ webgl library, with concise code and extensive world sandbox! World engine prioritizes first-person view!The world is your viewpoint.
OpenWorld-JS is a JavaScript engine for building interactive 3D worlds directly in the browser. The project is still under active development, with many exciting features and optimizations on the way. If you’re interested in open-world rendering, creative coding, or just enjoy exploring ambitious web projects, I’d love for you to check it out and share your thoughts. Every star, follow, or suggestion really helps keep the project moving forward.
👉 demo: https://openworld.zone
👉 demo: https://ow.ccgxk.com/demo/house.html?id=biglib&logicadd=1
👉 demo: https://git.ccgxk.com/myWorkSpace/webgl_show/cyber_city/cbcity.html
2026 年 9 月 11 日,我重新尝试了一次这个项目。
这一次我使用 GPT-6 Astro 做出了一个比较完整的 3D 场景:
或者
效果比我之前预期的要好很多,也让我重新拾起了继续做 OpenWorld-JS 的信心。
两者的源码,均放到了 GPT-6-Astra 目录下。
这个场景其实没有使用很复杂的提示词。
我的想法很简单:让模型不要把大量 Token 花在解释、架构设计或者重新造轮子上,而是尽量把能力用在 3D 场景本身,尤其是空间布局和大量物体的位置上。
使用的提示词如下:
使用babylon.js给我一个第一人称的带屋里效果的FPS游戏小3D场景。里面是10w个方体(长宽高随意),简单贴图的组成的一个漂亮的5层建筑。我可以进入,里面有相应的生成场景、楼梯等等,,反正就是一个办公楼。要逼真一点。。。代码尽量使用现成的库。你只需要将大量的Token放到三维位置上即可。就像GTA罪恶都市一样的感觉。生成过程:
生成结果: https://t001.openworld.zone/office/
这次实验让我发现,大模型现在已经可以承担相当多的程序化 3D 建模工作。
尤其是当任务被限制得足够明确以后,它可以把大量代码直接用于建筑结构、家具、楼梯、室内空间和物体摆放。
之后,我没有继续使用 Babylon.js。
我让 GPT-6 Astro 直接进入我原来的 OpenWorld-JS 项目,在已经存在的角色控制、物理、相机、纹理和渲染机制上继续工作。
这次我的要求也更加严格。
主要原则是:
- 不修改已经成熟的角色、相机和移动系统。
- 不重新研究整个 OpenWorld-JS。
- 不引入新的 3D 引擎。
- 尽可能把 Token 用在建筑和室内建模上。
- 使用大量实例方块,同时控制 Draw Call 和物理碰撞数量。
- 保留原项目已经调整很久的操作手感。
最后整理出的完整提示词如下。
点击展开完整 GPT-6 Astro 提示词
你现在要修改这个仓库:
https://github.com/kohunglee/openworld-js
工作起点是:
demo/dev002
请先在本地复制一份完整的 demo/dev002,在复制出来的项目上工作。我要得到一个与现有参考版本高度相似的 3D 世界。目标相似度至少为 90%。
这是一个成熟的 OpenWorld-JS 项目。原角色、相机、第一人称、第三人称、走路动画、跳跃、疾跑、冻结、物理引擎、插件、纹理加载和操作参数,都经过长期调整。不要重新设计这些部分。
你的主要任务是建模。
请把至少 99% 的精力、Token 和代码量放在三个建筑的几何建模、家具、内部结构、物理碰撞和性能控制上。不要花大量时间解释项目架构。只读取完成任务所需的少量文件。
一、修改范围
游戏代码只允许修改:
demo/dev002/opz/script
允许在发布目录中额外增加一个说明页面,但是不要为了说明页面影响游戏。
绝对禁止修改:
src
Cannon 物理引擎
OpenWorld-JS 核心渲染代码
原有插件源码
原角色控制参数
原走路动画
原第一人称与第三人称逻辑
原 Q 疾跑、E 跳跃、F 冻结
原纹理文件
原相机配置
不要安装新的 3D 引擎。不要引入 Three.js、Babylon.js 或新的物理引擎。
保留并照常加载原项目插件。不要用自己的简化角色替换原人物。
二、你只需要快速理解这些接口
找到原来的初始化入口,以及:
k.loadTexture(...)
参考原项目在纹理加载完成后调用建模函数的方式。
增加一个总入口:
buildLibrary()
在纹理加载完成后调用它。
推荐结构:
opz/script/library/
├── bootstrap.js 三个建筑的调度、显隐和载体
├── blocks.js 万数块登记、W 实例载体、物理盒
├── model.js 迷你图书馆
├── mixue.js 蜜雪冰城
└── studio.js 私人工作室
不要为了追求漂亮架构重构整个 DEV002。只需要让新增代码可以自然接入原项目。
三、关闭旧城市,保留原人物
原 DEV002 有几千个城市建筑、天际线和旧室内模型。为了保证帧率,这些旧实验模型不再生成。
可以在原人物和万数块面板创建完成以后,使用提前 return,跳过旧城市实验部分。
必须保留:
原主人公完整模型
原走路动画
原关节动画
第一人称和第三人称切换
Q 疾跑
E 跳跃
F 冻结
原键盘、鼠标和虚拟按键
万数块侧栏指标
不要关闭人物。不要重新写运动系统。不要修改 Q 疾跑的计算方法。
四、纹理与颜色
所有普通建筑方块继续使用原项目的纹理:
demo/dev002/opz/assets/texture.jpeg
参考原项目使用 window.dls 和纹理的方式。
实例载体统一使用:
mix: 0.8
颜色应当与原纹理混合。不要创建一套脱离原项目的纯色材质系统。
当前建筑不使用任何透明立方体。玻璃位置使用深蓝色、深绿色、乳白色等不透明窗板表达。
不要让两个平面或立方体表面重合。相邻表面要留出明确距离,建议至少相差 0.02 到 0.05 单位。必须避免 Z-fighting。地板装饰、墙面线条、桌面和窗框尤其需要检查。
五、建筑一:FOLIO 迷你图书馆
中心位置:
X = 32
Z = 0
尺寸大约:
宽 18
深 15
两层
主体高度约 8.5
屋顶约 Y = 9
这是主要建筑。进入游戏后,角色出生在图书馆入口附近,面向入口。
图书馆应包含:
两层可行走空间
一楼与二楼楼板
可正常上下的实体楼梯
书柜
大量书本
阅读桌
椅子
台灯
服务台
儿童阅读区
安静阅读区
单人学习位
沙发卡座
档案柜
展示桌
植物
灯具
阳台或二层栏杆
室外庭院
长椅
入口标识
FOLIO LIBRARY 招牌
当前参考结果有 32 个书柜分区。图书馆进入后参与渲染的方块约为 83,232 个。
参考组成:
室外壳、立面、庭院、入口遮挡:约 3,929
普通家具和两层室内:约 5,815
书柜粗模:约 8,208
书本装帧细节:约 65,280
书本可以保留封面、侧板、上下纸口、少量金线、出版社标记和包角。
关闭以下高成本细节:
逐层纸张边缘循环
每本书的标题字母
过密的书脊字符
书柜必须在进入图书馆时一次全部显示。不要使用“走近某一个书柜才加载”的方式。
图书馆的楼梯、楼板、护栏、墙、桌椅和重要家具要有物理。之前发现过二楼局部踩空,所以楼梯出口和二层楼板必须连续检查。
六、建筑二:蜜雪冰城
中心位置:
X = 70
Z = 0
占地面积与图书馆接近。它是一层门店,屋顶可以到达。
必须包含:
红白色门店外观
MIXUE 招牌
“蜜雪冰城”中文招牌
雪王标识
柜台
收银机
菜单屏
冷柜
饮料设备
杯子
水槽
咖啡设备
桌子
椅子
吊灯
植物
完整地板
外部楼梯
可行走屋顶
屋顶护栏
屋顶桌椅与简单休息设施
参考数量:
室外与屋顶:约 6,798+
室内:约 13,474
总数:约 20,272+
物理碰撞体:约 114
中文招牌可以用 Canvas 采样后生成小方块,所以不同系统字体可能造成少量数量变化。
入口走廊天花板不能挡住“蜜雪冰城”招牌。入口顶部要低于招牌,或者向外错开。
七、建筑三:私人工作室
中心位置:
X = 90
Z = 0
尺寸大约:
宽 9
深 15
两层
总方块预算为 5,000。实际数量必须在 4,800 到 5,000 之间,目标值约为 4,976。
这是一个靠开发软件和制作视频致富的个人工作室。家具丰富,有个性,但是不能用密密麻麻的重复纹理填充预算。
四个主要房间:
一楼:工作室
一楼:餐厅与厨房
二楼:卧室
二楼:卫生间
必须包含:
大型办公桌
三台显示器
电脑主机
键盘
平板
音箱
摄影机
三脚架
柔光灯
拍摄背景
镜头和摄影器材柜
厨房橱柜
冰箱
烤箱或灶台
水槽
餐桌和椅子
床
床头板
衣柜
沙发
浴缸
马桶
洗手台
镜子
毛巾
植物
二楼楼梯
通向楼顶的第二段楼梯
简单屋顶护栏
屋顶不需要额外娱乐设施。只需要可到达、楼板完整、四周有护栏。
用户对密集重复图案敏感。不要增加大面积斑点、金砖、细线阵列和密集复制结构。方块预算应当花在家具形状与房间细节上。
八、实例载体与万数块
三个建筑总共只使用 6 个主要实例载体:
folio-outside
folio-interior
mixue-outside
mixue-interior
studio-outside
studio-interior
每个建筑分成室外和室内两个载体。
单个建筑最多两个主要载体。三个建筑合计六个。不要把每个万数块创建为一个新的 W 渲染对象。
万数块用于登记数据。每 10,000 个实例申请一个根索引,并写入:
k.indexToArgs
渲染时,同一组完整实例仍然合并进一个:
k.W.cube({
n: name,
instances,
t: window.dls,
mix: 0.8
})
图书馆室内约 79,303 个实例,可以占用约 8 个万数块记录,但是只有一个 folio-interior 渲染载体。
侧栏需要显示:
万数块使用量
图书馆当前方块数
当前实例载体数
已登记物理体数量
图书馆室内是否显示
蜜雪冰城当前方块数
九、室内外显隐
所有建筑数据在启动时生成并上传一次。
角色通过入口时,不要重新创建几万方块。只切换:
k.W.next[name].hidden
室外时:
三个 outside 显示
三个 interior 隐藏
进入图书馆时:
folio-interior 显示
其他室内隐藏
进入蜜雪冰城时:
mixue-interior 显示
其他室内隐藏
进入工作室时:
studio-interior 显示
其他室内隐藏
在 animatePreFrame 中读取:
k.mainVPlayer.body.position
只有显隐状态发生变化时才调用 update()。不要每一帧重复写入全部实例。
边界需要少量滞后区间,防止角色站在边界时,模型反复闪现。
十、入口遮挡
图书馆直接显示 8 万方块时,可能产生明显切换感。每个入口都需要实体屏风或折返走廊。
至少使用两次转弯:
室外入口
→ 第一块屏风
→ 横向移动
→ 第二块屏风
→ 再转弯
→ 室内
游客站在远处或斜侧面时,不能直接看到室内模型突然出现。
屏风和走廊本身需要物理碰撞。它们不能挡住楼梯出口、招牌或桌椅。
图书馆入口、蜜雪冰城入口和工作室入口都要检查斜向视线。
十一、物理碰撞
视觉方块与物理碰撞盒分开。
不要给八万多个方块逐个添加物理。使用少量隐形大方块包住家具和建筑结构。
使用原项目的:
k.addTABox(...)
参考参数:
{
isPhysical: true,
isVisualMode: false,
mass: 0,
colliGroup: 2,
isInvisible: true
}
可以根据尺寸使用 DPZ 3 或 DPZ 4。
必须有物理的部分:
所有地板
二楼楼板
所有楼梯台阶
楼梯平台
屋顶
屋顶护栏
墙
服务台
书柜整体
桌子整体
椅子整体
床
沙发
大型设备
柜子
浴缸
入口屏风
参考物理数量:
图书馆:约 192
蜜雪冰城:约 114
工作室:约 101
总计:约 407
允许总量在 400 到 1,000 之间。物理数量可以适当增加,但是不要接近视觉方块数量。
十二、验收要求
完成后必须自行检查:
原主人公存在,走路动画正常。
第一人称和第三人称可以切换。
Q、E、F 保持原来的行为。
旧城市建筑没有生成。
三个建筑分别位于 X=32、X=70、X=90。
图书馆和工作室均可到达二楼。
蜜雪冰城和工作室均可到达屋顶。
楼梯全程有物理。
二楼楼板没有踩空位置。
一楼楼梯出口没有桌子阻挡。
所有书柜进入图书馆后一次显示。
室外看不到室内模型切换穿帮。
没有透明立方体。
没有重叠表面造成闪烁。
实例载体总数保持在 10 个以内。
万数块侧栏可以看到数据。
普通方块使用原纹理和 mix: 0.8。
不修改 src、Cannon 和插件源码。
使用本地 HTTP 环境运行,不需要帮助我部署。
最后生成一个包含完整当前版本的 ZIP。
工作方式要求:
先读取少量关键入口文件,确认 k.loadTexture、k.W.cube、k.addTABox、k.indexToArgs 和人物位置的用法。确认以后立即开始建模。
不要长时间研究引擎。不要重构成熟代码。不要写大篇架构分析。不要修改我花费很长时间调整过的角色、运动和插件。
请直接完成三个建筑、物理、显隐、万数块和本地验证。将大部分时间花在建筑内部结构和家具建模上。
最后简短报告:
修改了哪些 opz/script 文件
三个建筑各有多少方块
有多少物理碰撞体
有多少实例载体
哪些旧模型被关闭
本地如何启动
ZIP 文件路径结果 url : https://t001.openworld.zone/
这次实验对我比较重要。
这让我重新看到这个项目继续做下去的可能性。
以后 OpenWorld-JS 也许不需要我亲手摆放世界里的每一块东西。
我只需要维护引擎、规则和世界运行方式。
至于这个世界里面到底有什么,可以逐渐交给 AI 来建。