threejs timeline
A free data visualization — play it in your browser, no install. 可配置年份范围的 Three.js TSL 立体时间轴 / Configurable Three.js TSL 3D timeline
Vote and save it — free account with email or sign in with GitHub
Made this, @CHENJIAMIAN? See how many people played it → or use email
📅 Three new games every day, no account needed · Play today’s three →
GitHub may ask you to sign in, then to let VibeCruiser “Verify your GitHub identity” and “Act on your behalf”. We only read your profile and email, and never post anything.
No account needed to save ♥ or react 🔥: they’re under the game. Or vote with email.
Open the live demo Source on GitHubFrom the README
用 Three.js r186 + TSL 做的可配置 3D 时间轴：一年一根毛玻璃立柱，沿时间轴排开，两端退进紫雾里。
年份范围、标题、色带都集中在配置里，默认附带一份 Web 发展史示例数据。支持 WebGPU，浏览器不支持时自动退回 WebGL2。
年份可配：改一个配置，或直接用 URL 参数切换范围。 数据可替换：每年的事件文案和强度都在 src/data.js，不绑定固定主题。 TSL 节点效果：极光天幕、毛玻璃、菲涅尔边缘光、泛光、色差、暗角、颗粒。 实例化渲染：立柱、光壳、顶球、地面光池、接地阴影、年份牌都走 InstancedMesh。 自适应画质：自动 / 极致 / 省电三档，支持移动端和局域网访问。
heat：立柱高度、顶部光球大小和亮度。 未配置的年份会自动生成平滑高度，文案留空。
加 ?bench=1 可以打开 GPU 时间、Draw call、三角面等性能读数。
roughnessNode：分形噪声形成喷砂玻璃颗粒。 emissiveNode：菲涅尔边缘光、顶部亮带和内部渐变。
每根柱子外加一层放大的 BackSide 光壳，保证在雾和泛光背景里轮廓仍然清楚。
TSL 会把逐对象常量烘焙进 WGSL，如果每根柱子单独建材质，会产生大量 shader program。
年份牌会合并成一张动态图集，再用 instanceIndex 计算 UV。
Built something like this? Submit your vibe — free account, takes a minute. How listing works.
More like this
- lego stylized nature A LEGO-style nature exploration world built with Three.js WebGPU.
- candy castle 🍭 An interactive 3D candy fortress on a floating layered cake. three.js WebGPU renderer with TSL materials and a WebGL 2 fallback.
point cloud city
A procedural point-cloud city drawn as pencil stipple, where each district is an AI provider and its completeness is that provider's measured usage.
helios
HELIOS a scroll-driven 3D voyage from the Milky Way to Pluto. A cinematic WebGL film plays under the page as you scroll; every planet and moon name…
portfolio
my portfolio: two alter egos. drive an f1 car into the pit box (data), or play on a retro mac (creative).
- galeria miau Demo de galería 3D con three.js, WebGPU y WebGL2. Recorrido interactivo en escritorio y móvil.
Made this?
Claim it: create a free account, then press CLAIM THIS in the cruiser. Put the badge below in your README or on your demo page first; that link is how we know it's yours.
Your project is on the cruise, loaded live from your own site. Put the badge in your README or on the demo page: it shows your live play count, it links back to this page, and everyone who lands here is one click from running the real thing.
