◀ VibeCruiser

pelican cyclist

A free animation — play it in your browser, no install. 🐦 程序化 3D 场景:一只鹈鹕骑自行车(Three.js 单文件,无模型/贴图/预渲染动画)

by @wulusai2333 · wulusai2333/pelican-cyclist on GitHubLANG HTMLHOSTED ON WULUSAI2333.GITHUB.IOUPDATED 15 Oct 2026

Vote and save it — free account with email or sign in with GitHub

Made this, @wulusai2333? See how many people played it → or use email

Controls: Arrow keys · WASD · Space

▶ Play full screen ▲ Vote: free account with email ▲ Or sign in with GitHub

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.

Open the live demo Source on GitHub

From the README

没有任何 3D 模型文件、没有贴图、没有 SVG、没有 2D Canvas、没有预渲染动画——鹈鹕的每一根羽毛、自行车的每一根辐条、地形的每一道起伏,都是运行时用 JavaScript 现算出来的;蹬踏、车轮、身体起伏、脖颈摆动也都是实时解算的。

需求原文:*"使用 Three.js 创建一个精致、可交互的 3D 网页场景:一只鹈鹕正在骑自行车。鹈鹕、自行车、环境、动画、灯光、摄像机和交互均通过程序实现。鹈鹕需要真实地骑自行车,并具有协调的腿部、脚踏、车轮和身体运动。不要使用 SVG、2D Canvas、外部 3D 模型或预渲染动画。最终输出一个可以直接在现代浏览器中运行的完整 HTML 文件。"*

唯一的运行要求:首次加载需要联网从 CDN 取一次 Three.js r160(页面内置 3 个备用源 + 失败提示)。除此之外零依赖、零构建、零资源文件——就一个 index.html。

自行车:正新轮胎(外胎 + 轮圈 + 24 根交叉辐条 + 花鼓合并成单几何体)、菱形车架、后掠车把、握把、车铃、挡泥板、牙盘 / 飞轮 / 链条、曲柄脚踏。

光照:半球光 + 环境光 + 主平行光(2048² PCFSoft 阴影,阴影视锥跟随骑手)+ 逆光轮廓光,ACES Filmic 色调映射。

Read the full README on GitHub →

Built something like this? Submit your vibe — free account, takes a minute. How listing works.

More like this

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.

On VibeCruiser

How listing, the badge and claiming work →