正在打开每日关注
正在打开每日关注
开源的 Three.js 叙事落地页，用滚动镜头、生成图像与轻量代码构建京都寺院夜行体验。
I open-sourced the Kage landing page and the three.js skills behind it. The whole thing is under 1mb of three.js and code, 3mb with the hq png images. For a site where every section scrolls through a 3D world, that's surprisingly good. Live site: https://t.co/0c4euVBe6x Repo: https://t.co/GqXcUiLmIS Skills: https://t.co/9eEDISAqZx - build-threejs-scroll-worlds - falling-leaves - pointer-trail-emitter Btw this took a lot of tokens and prompts. A follow helps if you want more of these.
I made a three.js landing page with 3D scrolling for every section of the site. Since AI got so good with 3D, you can replace videos with 3D instead. Apart from images, the whole site is 922 KB on disk, 290 KB gzipped. That's insane when a scrolling video site runs 20-100mb at 1080p depending on length. As usual I had to prompt for improved textures, lighting and alpha masking. I used Claude Code (desktop) with Opus 5, Higgsfield for images, and https://t.co/tECuh9VUFz for the cloth effect on them. Inspiration was Daniel Snow's awesome landing page: https://t.co/nwYLieptXl Let me know if I should open-source. Don't wanna share too many without people asking.
是什么 Kage 是一个开源的五章京都山寺夜行体验：内容不是叠在视频上的普通宣传页，而是让滚动本身成为穿行寺院的叙事机制。作者同时公开了落叶、指针轨迹等 Three.js 相关 Agent skills。
核心设计
仓库采用极简单文件架构，index.html 集中文档结构、CSS、程序化场景、滚动编排与交互逻辑；内置 Three.js r149，不需要包管理器、构建步骤、环境变量或运行时网络依赖。寺院、鸟居、月亮、地形、雨、落叶、雾与 Bloom 在运行时生成，再把 WebP 场景板和透明前景图作为普通 HTML 图层叠加，形成实时光照与平面拼贴并存的纵深。
关键洞察 它把“滚动网页”提升为镜头时间线，让章节、排版和空间移动共享同一节奏；同时用程序化几何承担可交互骨架，用生成图像承担高密度氛围细节。作者称其核心代码约 922KB、压缩后约 290KB，体现了用 3D 替代大体积视频的思路。
边界与风险 质感高度依赖纹理、光照、Alpha 遮罩和 GPU 表现，复刻时不能只复制结构。仓库明确说明原始代码与艺术作品目前不授予复用或再分发许可；可借鉴的是架构与方法，不等于获得素材授权。