Three.js到GLSL着色器：awesome-opus5-5-videos的55个3D场景作品与选型指南

Three.js到GLSL着色器awesome-opus5-5-videos的55个3D场景作品与选型指南【免费下载链接】awesome-opus5-5-videosA growing collection of viral videos made with Claude Opus 5.5 and the prompts behind them. Watch each original next to a live remake on Skillry. Updated regularly.项目地址: https://gitcode.com/gh_mirrors/aw/awesome-opus5-5-videosawesome-opus5-5-videos 是一个持续更新的开源项目收录了475 个用 Claude Opus 5.5 生成的爆款 AI 视频以及每个视频背后的完整提示词。其中55 个 3D 场景作品使用 Three.js、GLSL 着色器和 WebGL 技术在浏览器里直接写代码画出 3D 动画——本文带你逛完这 55 件作品并给出一份新手也能看懂的Three.js 与 GLSL 着色器选型指南。 仓库结构速览475个AI视频与55个3D场景在哪整个仓库非常轻量只有三类核心内容路径内容说明README.md作品导航墙按 4 大分类排好序的作品表格每个条目附提示词链接prompts/475 个提示词文件每个视频一个.md含分类、技术栈标签和原始提示词data/videos.json结构化数据索引475 条记录可程序化检索分类、技术栈、添加日期等4 大分类的规模分布Motion graphics动态图形288 个Games interactive游戏与交互70 个Explainers科普讲解62 个️3D scenes3D 场景55 个← 本文主角 每个作品都是让 Claude Opus 5.5 用代码写动画做出来的HTML、Canvas、SVG、Three.js 等而不是用传统视频剪辑软件。 快速开始3步获取作品库并浏览3D场景第 1 步克隆仓库git clone https://gitcode.com/gh_mirrors/aw/awesome-opus5-5-videos第 2 步打开 README定位 3D 分区打开 README.md目录里直接给出四大分区锚点找到3D scenes表格即可看到全部精选 3D 作品含技术栈标签如 Three.js · GLSL · Canvas。第 3 步按文件名取提示词每个提示词文件命名为作者-编号.md例如 prompts/axtonliu-290566.md。在 data/videos.json 中搜索category: 3d也能一次性筛出全部 55 个 3D 作品。 技术选型指南Three.js、GLSL着色器、WebGL 怎么选55 个 3D 作品背后的技术栈分布来自 data/videos.json 的tech_tags统计技术3D 分类中使用数全仓库使用数一句话特征适合做Three.js44 / 55141高层 3D 场景库自带相机、灯光、材质体系真实感街景、建筑漫游、可交互场景GLSL 着色器30 / 55100GPU 着色语言逐像素计算流体、粒子、光影艺术、抽象视觉WebGL3 / 559底层 GPU 接口自定义渲染管线、极致性能控制Canvas2D35 / 553362D 画布常作渲染载体2D 动效、作为 3D 结果的呈现层其中25 个作品是 Three.js GLSL 组合——用 Three.js 搭场景骨架再用自定义着色器做材质和特效这也是出片率最高的搭配。一句话选型规则要场景街景、城市、房间、漫游→ 让 AI 用Three.js要视觉奇观粒子、流体、光效、抽象→ 让 AI 用GLSL 着色器要两者兼得电影感场景 自定义材质特效→Three.js GLSL组合需要底层性能控制→ 纯WebGL入门不推荐 新手建议不必自己学语法把用什么技术写进提示词里让 Claude Opus 5.5 替你写代码即可。✨ 精选3D场景案例拆解从提示词到成片从 55 个作品里挑 5 个最有代表性的附提示词文件路径点开就能读原文1. 最复杂的鹈鹕骑自行车——纯 GLSL WebGL作者 AxtonLiu 用一句话挑战模型的空间理解能力成品完全由着色器驱动。 prompts/axtonliu-290566.md2. 复刻 1906 年旧金山 Market 街——Three.js GLSL要求基于 1899–1905 年火灾保险图、老照片等真实史料建模还原震前街景是数据驱动 3D 重建的典范提示词。 prompts/alexalbert-274839.md3. 第一人称漫游 3D 宝塔——Three.js提示词只有一句话Implement code to be able to navigate in a pagoda in 3D.极简却能产出完整可交互场景。 prompts/buildfastwithai-597035.md4. AI 数据中心内部探秘——Three.js GLSLshow me what goes on inside an AI data centre. 一句话生成机房级 3D 可视化。 prompts/sayan-shanky-868515.md5. 一句话生成Blender 级3D 系统——Three.js GLSL作者 0xWast3 总结的 PARSE → MASS → RIG → SKIN → PACK 五段式提示词框架让模型像模具有周时间的建模师那样逐部件构建可编辑的 3D 系统。 prompts/0xwast3-222104.md更多案例含 1906 街景同类的电影级镜头、游戏化 3D 体验等在 README.md 的 3D scenes 表格中一次看全。 3步复制提示词做出你自己的3D动画上手流程非常简单三步走打开提示词文件在 prompts/ 中任选一个 3D 作品复制Prompt区块的文本粘贴给 Claude Opus 5.5可替换成你自己的主题比如用 Three.js 做一个雨夜霓虹小巷要求输出单文件 HTML让 AI 把结果渲染成一个可直接打开的 HTML 页面再录屏即成视频⚠️ 小提示55 个 3D 作品中有 35 个标记为prompt_partial见下文字段表表示作者只公布了原帖描述而非完整提示词——这类文件的## Prompt区块是原帖原文可作为灵感参考。 数据速查videos.json 的6个关键字段想批量筛选作品data/videos.json 中每条记录都有这些字段字段含义示例slug作品唯一标识 提示词文件名axtonliu-290566author作者账号AxtonLiucategory分类motion/3d/explainer/interactive3dtech_tags技术栈标签[threejs, shader, canvas]prompt提示词原文—prompt_partial是否为部分提示词true 仅原帖描述false筛选Three.js GLSL 的 3D 作品只需在 JSON 里找category为3d且tech_tags同时含threejs和shader的记录共 25 条。 新手常见问题 FAQQ我不会写 Three.js 或 GLSL能参与吗可以。这个玩法的核心是写提示词代码由 Claude Opus 5.5 生成55 个作品的作者大多也是靠提示词迭代出成片。Q提示词不完整怎么办文件内会注明作者未公布完整提示词此时可直接借鉴原帖描述 本文的选型规则让 AI 帮你把提示词补全。Q作品还在更新吗是的README 标注最近一次更新2026-09-29新增了 86 个视频以动态图形和科普讲解为主仓库会持续收录新作品。 小结awesome-opus5-5-videos 475 个 AI 视频 全部原始提示词其中55 个 3D 场景作品最值得 3D 爱好者深挖选型口诀场景用 Three.js奇观用 GLSL 着色器兼得就组合底层才上 WebGL提示词直接去 prompts/ 取批量检索用 data/videos.json导航从 README.md 的 3D scenes 表格开始【免费下载链接】awesome-opus5-5-videosA growing collection of viral videos made with Claude Opus 5.5 and the prompts behind them. Watch each original next to a live remake on Skillry. Updated regularly.项目地址: https://gitcode.com/gh_mirrors/aw/awesome-opus5-5-videos创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考