爱意满满的作品展示区。
tianhehechu

ThreeJSON 横空出世:一个 JSON 驱动、AI 友好的开源 3D 引擎(基于 Three.js)

  •  
  •   tianhehechu · 9h 22m ago · 2619 views

    我写了一个非常牛叉的东西,做梦笑醒了,不敢孤芳自赏,分享给 V 友们同乐。

    一句话介绍:ThreeJSON 支持使用 JSON 文本描述构建 3D 场景的一切。

    本项目使用 MIT 协议开源。

    GitHub 仓库地址: https://github.com/nnrj/threejson

    Demo 页面: https://nnrj.github.io/threejson/

    Npm: https://www.npmjs.com/package/threejson

    可使用 VSCode 打开后,用 Live Sever 插件打开其中的 示例 html 页面体验。

    ThreeJSON 的哲学浓缩成四句话: Scene as Data —— 场景即数据 Runtime as Engine —— 运行时即引擎 Domain as Extension —— 业务域即扩展 Agent as Operator —— Agent 即操作者

    说人话就是:

    你负责描述世界,AI 负责创造和修改世界,ThreeJSON 渲染和运行世界。

    目前项目已开源,欢迎 V 友 们围观、试玩、提 Issue 。

    [开始念经]

    ThreeJSON 是一个 JSON 驱动的 Three.js 声明式场景运行时与 Web3D 引擎。它不是对 Three.js 的简单 API 包装或替代品,而是建立了一条完整的数据驱动链路:场景描述 统一解析 → 对象创建 → 场景装配 → 实时运行 → 增量修改 → 场景持久化

    通过将 3D 场景抽象为结构化数据,ThreeJSON 解耦了业务逻辑与底层渲染,让开发者无需重复编写冗长的初始化代码,即可高效构建复杂的 3D 交互世界。

    核心架构与技术特性

    1. 规范真源:JSON 为王 (Single Source of Truth)

    ThreeJSON 中,JSON 是场景的唯一规范真源

    • 双模 JSON 支持:兼容易于机器生成、流水线处理和 AI 消费的“标准 JSON”,以及便于人类阅读、手写和局部微调的“用户友好 JSON”(加载时自动归一化)。
    • 双层运行结构:每个由运行时创建的对象都会保留其原始 JSON 描述符。形成“JSON 负责规范与持久化,Object3D 负责高性能实时运行”的双层结构。物理引擎或游戏循环对 Object3D 的实时修改,可随时增量同步并导出为普通文件、数据库记录或 .tjz 资源压缩包。

    2. 完备的声明式对象与组件体系

    内置丰富的声明式对象,支持位置、旋转、缩放、材质、纹理、动画和事件的完整参数化配置:

    • 几何与网格:盒体、球体、平面、圆环、圆柱、圆锥、线条、Group 等。
    • 高级与多媒体组件:3D 文字、CSS3D 面板、信息面板、高级粒子系统、热力图等。
    • 外部资产与原生混配:高效加载外部 3D 模型(如 glTF/FBX ),并支持接入 Native 原生对象。

    3. 高效的对象管理与运行时变更

    • 扁平化对象检索:内置高效的管理体系,支持通过 threeJsonIduuidrefNamename 快速定位对象。上层系统无需遍历复杂的 Three.js 树状场景树,即可在 systemBucket 或自定义分类桶中实现毫秒级查改。
    • 增量状态更新(不重载场景):提供精细化的运行时变更 API 。修改位置、替换材质、动态显隐或调整纹理等操作均为增量原子操作,极为适合数字孪生、大屏监控和实时控制场景。

    4. 动态交互、动画与扩展机制

    • 双轨动画系统:既支持在 JSON 中直接声明旋转、位移、浮动等轻量行为(由统一渲染循环驱动),也支持通过 Three.js AnimationMixer 完美承接外部 glTF 模型内嵌的复杂骨骼与机械动画。
    • 声明式事件系统:允许在 JSON 描述符中直接定义鼠标/键盘交互、内置 action 、自定义 DSL 甚至外部 JavaScript 脚本,实现从“静态展示”到“动态世界”的跨越。
    • 业务域( Domain )扩展机制:核心层保持绝对纯粹,通过 handlerregistry 机制向外延伸。开发者可针对“机房”、“港口”、“园区”、“工厂”等垂直数字孪生领域,自定义专属的模型组装方式、API 钩子和视觉规范。

    面向 AI 与 Agent 的下一代设计

    ThreeJSON 为大语言模型( LLM )和自主 Agent 提供了天然契合的 3D 场景表达方式。AI 不必尝试去生成晦涩且容易出错的 Three.js 源码,只需输出高度结构化的场景 JSON 。Agent 可以通过稳定的对象 ID 、JSON Patch 、动态命令接口和运行时变更为场景注入智能。

    其核心设计哲学可完美概括为:

    Scene as Data + Runtime as Engine + Domain as Extension + Agent as Operator

    当前( 2026 年 7 月 6 日),GitHub Pages 页面加载不出场景,可在 Clone 本地体验,预计近几天会修复该问题。

    Supplement 1  ·  8h 10m ago
    [2026.07.06] 在线 Demo 页面 资源 404 的问题已修复,若仍然遇到,可清除页面缓存或使用其他浏览器打开。感谢大家的反馈。
    Supplement 2  ·  4h 50m ago
    [2026-07-06] 感谢 V 友们的支持和反馈。当前在线 Demo 页面中,部分页面的资源仍然加载失败,编辑器、港口等正在修复中。本地 VSCode+Live Server 可正常浏览体验。此外,AI 功能正常,可在线体验: https://nnrj.github.io/threejson/demo.html#demo=t05-01
    46 replies    2026-07-06 16:54:40 +08:00
    franklioxygen
        1
    franklioxygen  
       9h 16m ago   ❤️ 1
    Failed to load resource: the server responded with a status of 404 ()
    tianhehechu
        2
    tianhehechu  
    OP
       9h 14m ago
    @franklioxygen Demo 挂在 GitHub Pages ,试试魔法一下。
    aoyi
        3
    aoyi  
       8h 55m ago   ❤️ 1
    Demo 什么都运行不出来
    senooo
        4
    senooo  
       8h 33m ago   ❤️ 1
    Demo 什么都运行不出来 +1
    Yasuke
        5
    Yasuke  
       8h 31m ago   ❤️ 1
    有点想看做梦笑醒是什么样子,龇牙咧嘴吗?
    qrobot
        6
    qrobot  
       8h 30m ago
    @tianhehechu Failed to load resource: the server responded with a status of 404 ()

    你先打磨一下在宣传吧。 别怪梯子的问题
    JiZhiDeboy
        7
    JiZhiDeboy  
       8h 28m ago   ❤️ 1
    @tianhehechu 能访问 v2 肯定是挂着梯子的,另外提示的是 404 理解一下什么场景是出 404 ,跟梯子没有关系。
    tianhehechu
        8
    tianhehechu  
    OP
       8h 23m ago
    @aoyi 正在修复这个问题,预计下午就能正常用了
    tianhehechu
        9
    tianhehechu  
    OP
       8h 22m ago
    @qrobot 好的,我看一下
    skuuhui
        10
    skuuhui  
       8h 17m ago   ❤️ 1
    v 站是玩具项目严父
    Sundayz
        11
    Sundayz  
       8h 13m ago   ❤️ 5
    1. “AI 不必尝试去生成晦涩且容易出错的 Three.js 源码”,2023 年你可以这么说,但现在已经 2026 年了;
    2. 看描述只能定义场景,那业务代码放在哪呢
    3. “高效加载外部 3D 模型(如 glTF/FBX )”,基于 Three.js 做了哪些模型加载优化
    4. Three.js 的 API 设计真的很复杂吗,比这个更加复杂吗,这个对原始 API 的覆盖率有多少
    5. 建议用这个把 Three.js 的 examples 全部复刻一遍,才能只能知道是不是真的简化代码了,是不是使用起来会更加灵活
    tianhehechu
        12
    tianhehechu  
    OP
       8h 9m ago
    @franklioxygen 问题已修复。若仍然遇到,可清除页面缓存或使用其他浏览器打开。感谢反馈。
    tianhehechu
        13
    tianhehechu  
    OP
       8h 9m ago
    @aoyi 问题已修复。若仍然遇到,可清除页面缓存或使用其他浏览器打开。感谢反馈。
    tianhehechu
        14
    tianhehechu  
    OP
       8h 9m ago
    @senooo 已修复。若仍然遇到,可清除页面缓存或使用其他浏览器打开。感谢反馈。
    tianhehechu
        15
    tianhehechu  
    OP
       8h 8m ago
    @qrobot 已修复。感谢反馈。若仍然遇到,可清除页面缓存或使用其他浏览器打开。
    tianhehechu
        16
    tianhehechu  
    OP
       8h 8m ago
    @JiZhiDeboy 已修复,页面标签页图标路径错误导致的 404 。感谢反馈。
    tianhehechu
        17
    tianhehechu  
    OP
       8h 6m ago
    @Sundayz 让 AI 去用原生 Three.js 写出一个场景,与用 JSON 去描述一个场景,token 消耗是不同的。ThreeJSON 非常节省 token ,而且能让 AI 对场景作精细调整。
    Atoony
        18
    Atoony  
       7h 47m ago   ❤️ 1
    查看宿主应用样例时,full.js 还是 404
    RockerXH
        19
    RockerXH  
       7h 43m ago
    用这个做 3D 打印的 3D 建模是不是简单很多
    ddy10086
        20
    ddy10086  
       7h 37m ago
    所以 json 数据源怎么来呢,建模软件导出的数据格式 还要转换一下吗。
    franklioxygen
        21
    franklioxygen  
       7h 27m ago   ❤️ 1
    @tianhehechu 成功打开了,很强,👍
    andyskaura
        22
    andyskaura  
       7h 23m ago   ❤️ 1
    “场景描述 统一解析 → 对象创建 → 场景装配 → 实时运行 → 增量修改 → 场景持久化”
    你这个链路,thereejs 诞生时就支持了啊,有什么区别吗,还是说在这基础上封装了一下?

    导出: https://threejs.org/docs/#Object3D.toJSON
    导入: https://threejs.org/docs/#ObjectLoader.load
    tianhehechu
        23
    tianhehechu  
    OP
       7h 0m ago
    @Yasuke 三国诸葛笑
    dcatfly
        24
    dcatfly  
       6h 51m ago
    @tianhehechu #17 这个 token 消耗有量化的对比吗?最好是包含同一个场景的构建与调试的对比。
    qrobot
        25
    qrobot  
       6h 51m ago
    @tianhehechu 要不你把各个功能点击一下, 查看 json 也报错 404 , 你先自己测试一边,在发布到生产环境
    tianhehechu
        26
    tianhehechu  
    OP
       6h 41m ago
    @Atoony 感谢反馈,仍是资源路径问题。编辑器、播放器、港口示例等,比较复杂的页面,在 GitHub Pages 加载资源失败,问题会逐步修复。如果要体验的话,可以 clone 到本地,用 VSCode 打开,用 Live Server 插件运行,或部署到自己的 nginx 服务器。
    tianhehechu
        27
    tianhehechu  
    OP
       6h 39m ago
    @shicang1990 没错,可以直接使用编辑器( scene-editor.html )提供的 AI 功能,让 AI 生成所需的模型,然后让 AI 微调,然后导出为 3D 打印所需的格式即可。
    tianhehechu
        28
    tianhehechu  
    OP
       6h 37m ago
    @ddy10086 不需要转换,支持在 JSON 重引入三方模型,见 doc 目录下的 《 json-format.md 》的《 externalModel 》章节,该章节介绍如何引入任意 3D 模型。
    tianhehechu
        29
    tianhehechu  
    OP
       6h 32m ago   ❤️ 1
    @andyskaura Three.js 的导出 JSON ,全面而原始,且是静态场景。ThreeJSON 不是它的封装,有独有的的业务域模型、扩展机制、AI 操作原语,内置对象管理器、事件管理器。而且 ThreeJSON 也支持导入 Three.js 原生的 JSON 场景。简而言之,Three.js 的 JSON 只有场景没有行为、没用调度和管理,ThreeJSON 是一整套引擎。
    tianhehechu
        30
    tianhehechu  
    OP
       6h 31m ago
    @dcatfly 这个我后面会做一个对比分析报告,目前还没有。如果感兴趣,你可以在本地跑一下测测看。感谢支持。
    tianhehechu
        31
    tianhehechu  
    OP
       6h 29m ago
    @qrobot 感谢反馈。本地、LiveServer 、Nginx 部署是没有问题的。当前的在线 Demo 演示页面,基于 GitHub Pages ,导致某些资源加载失败。正在逐步解决。
    andyskaura
        32
    andyskaura  
       6h 15m ago
    @tianhehechu #29 感谢回复,get 到了
    burp2019
        33
    burp2019  
       5h 40m ago
    下面网络机房和智慧港口都加载不出来
    tianhehechu
        34
    tianhehechu  
    OP
       5h 13m ago
    @burp2019 感谢反馈。已知问题,正在修复中。可在本地用 VSCode 的 LiveServer 体验。GitHub Pages 的在线 Demo 目前存在路径解析问题。
    oldManNewThought
        35
    oldManNewThought  
       3h 35m ago
    @andyskaura 会不会内部其实就是用这两个 api 实现的???
    RockerXH
        36
    RockerXH  
       3h 23m ago   ❤️ 1
    我才反应过来,咋俩撞头像了,我之前被封的大号就是这头像,哈哈哈哈
    tianhehechu
        37
    tianhehechu  
    OP
       3h 9m ago
    @qrobot 已修复改问题。感谢反馈。欢迎继续体验。
    tianhehechu
        39
    tianhehechu  
    OP
       3h 1m ago
    @RockerXH 那太有缘了,说不定你是平行宇宙的我。你就是我,我就是你。哈哈哈哈
    tianhehechu
        40
    tianhehechu  
    OP
       2h 54m ago
    @oldManNewThought 原生 Three.js 的 JSON ,在 ThreeJSON 中并无特殊,视为三方模型的一种,可以使用 nativeThree 字段加载完整原生 JSON 场景。只有在将场景导出为原生 JSON 的地方,才用到 Three.js 的原生 JSON 。因为原生 JSON 可读性差,太多噪声,不适合作为声明式实现的 JSON 模板,并且 Three.js 官方也放弃了它的维护。ThreeJSON 采用的是一套新的定义,并且 JSON 只是它的入口和真源。ThreeJSON 还提供了命令行、脚本、AI 接口等场景描述方式,也兼容 Three.js 原生语法,几乎所有的能力都是可选的,在项目中引入后,可以无缝使用它提供的 API ,也可以从对象管理器使用 threeJsonId 、refName 等取得 Three.js 托管给 ThreeJSON 的原生 Three.js 对象,然后使用原生 Three.js 写代码。并行不悖。
    nsjs
        41
    nsjs  
       2h 48m ago via iPhone   ❤️ 1
    我在 ai 时代前也在 babylonjs 上做过一个类似的东西,也是数据驱动三维场景,不过那个时候还没有 ai 做得很慢😂 出发点也不是省 token,而只是数据驱动
    tianhehechu
        42
    tianhehechu  
    OP
       2h 19m ago
    @nsjs 大佬啊,欢迎加入本项目的维护
    specialweiyu
        43
    specialweiyu  
       1h 54m ago   ❤️ 1
    可以的,已 star
    marlkiller
        44
    marlkiller  
       1h 46m ago
    想起来这个 mmd 也是 three.js 写的;
    https://marlkiller.github.io/web-mmd/
    abel533
        45
    abel533  
       47 mins ago
    看了 demo 和 github ,就是看不到你所谓的 JSON 结构,确定是 JSON 驱动吗,找的真累。。
    tianhehechu
        46
    tianhehechu  
    OP
       38 mins ago
    @abel533 在 demo 页面右侧,点击 [查看 JSON] 按钮,即可看到相应场景的 JSON 。在项目目录中位于 https://github.com/nnrj/threejson/tree/master/assets/json (整项目中 Demo 的 JSON 文件基本都在这里)。在 demo 页面右侧点击 [查看源码] 能看到该页面的源文件,里面可以看到导入了 JSON ,交给了 ThreeJSON 解析去解析加载,函数名通常是 createJsonScene 。核心代码片段如:
    sceneRuntime = await createJsonScene(sceneData, {
    canvas,
    assetsBase: "../../../assets",
    resetScene: true})。

    这个函数看起来复杂,是因为完整场景通常有纹理是异步的。如果要最小心智负担使用,可以使用:
    createJsonSceneSimple

    感谢反馈。我会尽快补充一个基于 createJsonSceneSimple 的更简单的示例,内嵌 JSON 。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5400 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 89ms · UTC 09:33 · PVG 17:33 · LAX 02:33 · JFK 05:33
    ♥ Do have faith in what you're doing.