3D 滚动网站生成器

3D 滚动网站生成器 — 不用写 Three.js

一句话描述一个地方,滚动让真实镜头穿过去:场景是生成的,每场飞进去,飞出去看不见接缝。不用 Three.js,也不用 GSAP。

璃月,灯笼小巷 — Genshin Impact。镜头正在俯冲:灯笼从镜头边滑过,市集的纵深一直留着。枫丹,大楼梯 — 镜头从拱廊外起飞、一直飞进室内——一个长镜头,没有剪辑。片桐高中,楼梯间 — Horimiya。堀往前走,身后的走廊纵深还在。涩谷,十字路口 — 为这一页做的:一句话,三张场景,一条不断的飞行。

由 Scroll World Video 技能驱动。

✦3D 滚动网站
做一个 3D 滚动网站,讲一盏长灯笼下的夜市
水上巴士总站 — 第一站:标题、正文、标签压在水面上。只有滚动在推镜头。
水上巴士总站 — 第一站:标题、正文、标签压在水面上。只有滚动在推镜头。
歌剧院屋顶 — 第三站。门、灯光、同一段飞行,还是没有剪辑。
歌剧院屋顶 — 第三站。门、灯光、同一段飞行,还是没有剪辑。
退潮时的鱼摊 — 香菱在柜台后;潮位和渔获是数据,不是装饰。
退潮时的鱼摊 — 香菱在柜台后;潮位和渔获是数据,不是装饰。
训练场 — The Hollow Star。十二条章节轴,镜头从空中降进球场。
训练场 — The Hollow Star。十二条章节轴,镜头从空中降进球场。
下课铃 — 堀和宫村在鞋柜间,标题稳在左侧。
下课铃 — 堀和宫村在鞋柜间,标题稳在左侧。
教室上方 — 最后一站:两个人站在栏杆边,城市在变金。
教室上方 — 最后一站:两个人站在栏杆边,城市在变金。
十字路口 — 为这一页做的。街面视角,镜头从人群上方俯冲下来。
十字路口 — 为这一页做的。街面视角,镜头从人群上方俯冲下来。
下行的楼梯 — 第二张:地铁入口,扶手从身边滑过,闸机在尽头。
下行的楼梯 — 第二张:地铁入口,扶手从身边滑过,闸机在尽头。
帐之上 — 最后一张:天台、那个人、脚下整个路口。
帐之上 — 最后一张:天台、那个人、脚下整个路口。
01 / 03

枫丹,夜里

一站接一站,一个长镜头:水上巴士总站、拱廊街、歌剧院屋顶。

枫丹,夜里Open in new tab
Want your own?

一句话进去,页面就滚得像一台摄影机。

Neta Studio 生成每个场景,让它们共用一套色调,再让镜头在场景之间飞进飞出。发布出来的页面只负责擦这段素材,所以滚动位置就是摄影机的时间——文字在页面所在的地方改。

  • 是真纵深,不是伪视差 — 场景先生成成静帧,再由模型把镜头飞进去。没有拿分层 PNG 或 CSS 位移假装。
  • 接缝找不到 — 每个接缝都对齐上一段素材的最后一帧,所以整段读起来是一个长镜头。
  • 发布之后还能改 — 标题、正文、标签、场景顺序都是普通字段。改完重新发布,镜头不动。

常见问题

这到底是 3D,还是页面上放视频?

是预渲染的。每个场景是一张生成的静帧,镜头运动是一段生成的视频,滚动位置去擦这段视频。纵深和运动都是真的,一个场景几兆——但你不能绕着模型转,也不能走出这条路线。

需要 Three.js、GSAP 或者设计师吗?

都不用。你只写一句话。没有库、没有时间轴、没有场景图,也不用拍摄预算。

第一次打开有多重?

三个场景大约 23–25 MB,页面打开前有进度条挡着。多加一个场景,大约多等 9 MB。

可以用我自己的照片或品牌吗?

可以。把图作为参考传进去,每个场景从图里派生,真实的地方能保住它本来的样子和光。还不存在的世界,一句话就够了。

做完还能改什么?

每个场景的标题、一行正文、最多三个标签,还有场景顺序。镜头部分保持渲染好的样子。

手机上能用吗?

能打开、能滚,用的是更轻的编码和居中裁切。擦素材本来就是桌面手势;网慢的时候,你主要感觉到的是首次加载。

和那种带滚动动画的模板有什么不一样?

模板动的是你本来就有的元素。这里场景、纵深和镜头路线都是生成的,所以镜头能飞过一个根本不存在的世界。

做好的网站放在哪里?

发布成一个作品,有自己的公开链接。可以直接发、嵌,或者 fork 一份换掉场景。

一句话,一段飞行。

三个场景,一台穿过它们的摄影机,一条能发出去的链接。

×