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

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

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

    你先打磨一下在宣传吧。 别怪梯子的问题
    JiZhiDeboy
        7
    JiZhiDeboy  
       4h 38m ago   ❤️ 1
    @tianhehechu 能访问 v2 肯定是挂着梯子的,另外提示的是 404 理解一下什么场景是出 404 ,跟梯子没有关系。
    tianhehechu
        8
    tianhehechu  
    OP
       4h 34m ago
    @aoyi 正在修复这个问题,预计下午就能正常用了
    tianhehechu
        9
    tianhehechu  
    OP
       4h 33m ago
    @qrobot 好的,我看一下
    skuuhui
        10
    skuuhui  
       4h 27m ago   ❤️ 1
    v 站是玩具项目严父
    Sundayz
        11
    Sundayz  
       4h 24m ago   ❤️ 4
    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
       4h 20m ago
    @franklioxygen 问题已修复。若仍然遇到,可清除页面缓存或使用其他浏览器打开。感谢反馈。
    tianhehechu
        13
    tianhehechu  
    OP
       4h 20m ago
    @aoyi 问题已修复。若仍然遇到,可清除页面缓存或使用其他浏览器打开。感谢反馈。
    tianhehechu
        14
    tianhehechu  
    OP
       4h 19m ago
    @senooo 已修复。若仍然遇到,可清除页面缓存或使用其他浏览器打开。感谢反馈。
    tianhehechu
        15
    tianhehechu  
    OP
       4h 19m ago
    @qrobot 已修复。感谢反馈。若仍然遇到,可清除页面缓存或使用其他浏览器打开。
    tianhehechu
        16
    tianhehechu  
    OP
       4h 19m ago
    @JiZhiDeboy 已修复,页面标签页图标路径错误导致的 404 。感谢反馈。
    tianhehechu
        17
    tianhehechu  
    OP
       4h 17m ago
    @Sundayz 让 AI 去用原生 Three.js 写出一个场景,与用 JSON 去描述一个场景,token 消耗是不同的。ThreeJSON 非常节省 token ,而且能让 AI 对场景作精细调整。
    Atoony
        18
    Atoony  
       3h 57m ago   ❤️ 1
    查看宿主应用样例时,full.js 还是 404
    shicang1990
        19
    shicang1990  
       3h 54m ago
    用这个做 3D 打印的 3D 建模是不是简单很多
    ddy10086
        20
    ddy10086  
       3h 47m ago
    所以 json 数据源怎么来呢,建模软件导出的数据格式 还要转换一下吗。
    franklioxygen
        21
    franklioxygen  
       3h 37m ago   ❤️ 1
    @tianhehechu 成功打开了,很强,👍
    andyskaura
        22
    andyskaura  
       3h 34m ago   ❤️ 1
    “场景描述 统一解析 → 对象创建 → 场景装配 → 实时运行 → 增量修改 → 场景持久化”
    你这个链路,thereejs 诞生时就支持了啊,有什么区别吗,还是说在这基础上封装了一下?

    导出: https://threejs.org/docs/#Object3D.toJSON
    导入: https://threejs.org/docs/#ObjectLoader.load
    tianhehechu
        23
    tianhehechu  
    OP
       3h 11m ago
    @Yasuke 三国诸葛笑
    dcatfly
        24
    dcatfly  
       3h 2m ago
    @tianhehechu #17 这个 token 消耗有量化的对比吗?最好是包含同一个场景的构建与调试的对比。
    qrobot
        25
    qrobot  
       3h 1m ago
    @tianhehechu 要不你把各个功能点击一下, 查看 json 也报错 404 , 你先自己测试一边,在发布到生产环境
    tianhehechu
        26
    tianhehechu  
    OP
       2h 51m ago
    @Atoony 感谢反馈,仍是资源路径问题。编辑器、播放器、港口示例等,比较复杂的页面,在 GitHub Pages 加载资源失败,问题会逐步修复。如果要体验的话,可以 clone 到本地,用 VSCode 打开,用 Live Server 插件运行,或部署到自己的 nginx 服务器。
    tianhehechu
        27
    tianhehechu  
    OP
       2h 50m ago
    @shicang1990 没错,可以直接使用编辑器( scene-editor.html )提供的 AI 功能,让 AI 生成所需的模型,然后让 AI 微调,然后导出为 3D 打印所需的格式即可。
    tianhehechu
        28
    tianhehechu  
    OP
       2h 48m ago
    @ddy10086 不需要转换,支持在 JSON 重引入三方模型,见 doc 目录下的 《 json-format.md 》的《 externalModel 》章节,该章节介绍如何引入任意 3D 模型。
    tianhehechu
        29
    tianhehechu  
    OP
       2h 43m ago   ❤️ 1
    @andyskaura Three.js 的导出 JSON ,全面而原始,且是静态场景。ThreeJSON 不是它的封装,有独有的的业务域模型、扩展机制、AI 操作原语,内置对象管理器、事件管理器。而且 ThreeJSON 也支持导入 Three.js 原生的 JSON 场景。简而言之,Three.js 的 JSON 只有场景没有行为、没用调度和管理,ThreeJSON 是一整套引擎。
    tianhehechu
        30
    tianhehechu  
    OP
       2h 42m ago
    @dcatfly 这个我后面会做一个对比分析报告,目前还没有。如果感兴趣,你可以在本地跑一下测测看。感谢支持。
    tianhehechu
        31
    tianhehechu  
    OP
       2h 40m ago
    @qrobot 感谢反馈。本地、LiveServer 、Nginx 部署是没有问题的。当前的在线 Demo 演示页面,基于 GitHub Pages ,导致某些资源加载失败。正在逐步解决。
    andyskaura
        32
    andyskaura  
       2h 26m ago
    @tianhehechu #29 感谢回复,get 到了
    burp2019
        33
    burp2019  
       1h 51m ago
    下面网络机房和智慧港口都加载不出来
    tianhehechu
        34
    tianhehechu  
    OP
       1h 24m ago
    @burp2019 感谢反馈。已知问题,正在修复中。可在本地用 VSCode 的 LiveServer 体验。GitHub Pages 的在线 Demo 目前存在路径解析问题。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   5416 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 68ms · UTC 05:44 · PVG 13:44 · LAX 22:44 · JFK 01:44
    ♥ Do have faith in what you're doing.