🛩️ 我把一段夕阳飞行做成了能按键驾驶的网页(24 秒四段航线,在线直接玩)

在线预览 :fanhuayishiy.github.io/ai-demo/sun...

开源地址 :github.com/fanhuayishi... (MIT,合集仓库,本项目在 sunset-flight-study/ 目录)

这个项目最初的请求是:「使用 web3d技术 复刻宫崎骏动漫红猪里的经典空战场景,从建模,配色,风格,运镜等方面对齐。」 后来它按一段夕阳飞行视频演进成现在的默认版本:奶油白单翼机、紫色立体云海、橙金天空,画面中间一行小字 just breathe。模型、环境、轨迹和引擎音效全部程序生成,没有把视频当背景贴上去。

能玩什么

  • 打开就播。24 秒连续循环四段动作:尾随、剪刀、回旋、俯冲,镜头贴近机尾。
  • 按 WASD 或方向键接管:短按微调、长按连续移动,侧倾和俯仰跟着输入走,松手很快停稳。首次接管约 0.4 秒过渡到稳定的尾随视角,屏幕构图不变。
  • 范围限制在航线附近左右 ±20 米、上下 ±12 米,到底会提示「已到移动边界」,是辅助驾驶不是无限自由飞行。按 G 或「回到航线」恢复电影航线。
  • 底部常驻操作栏:上一段、暂停、重新开始、下一段、机位。机位在电影、追随、自由之间循环,自由视角能拖拽旋转缩放。
  • 点右上「显示控制」或按 H,展开完整时间轴、四个分镜和画质设置。
  • 右上角「日间空战」切回原来的双机版本:红色飞行艇与蓝色双翼机,72 秒六段运镜。

几个值得放大看的地方

  • 云是真实三维雕塑出来的云群,紫色明暗色阶加金色边光,海面有细碎倒影。
  • 两条翼尖气流按飞行历史采样,飞机怎么飞它们就怎么拖。
  • 机身细节:低置椭圆机翼、绿色翼尖与圆形翼徽、三色尾舵、开放座舱、鼻端螺旋桨。
  • 配乐和 24 秒画面是两套时间:音乐不变速,也不因为切分镜从头播放。
  • 项目自己跑了 276 项测试。

边界一句:配乐是 BAANDIT!《rumination》,走艺术家在 SoundCloud 的官方播放器在线流播,整曲约 1 分 56 秒,另有约 15.44 秒的本地片段。仓库的 MIT 许可只覆盖项目代码,不授予第三方音乐权利,公开使用前要另行确认授权。

技术栈

Three.js + Vite,云群、天空、海面、翼尖气流全是程序化几何与着色器,Web Audio 合成引擎与海风声。dist/ 直接托管。

本地跑起来

bash 复制代码
git clone https://github.com/fanhuayishiy/ai-demo.git
cd ai-demo/sunset-flight-study
npm install
npm run dev          # 默认 http://localhost:5173,被占用时自动顺延

需要 Node.js 20.19+ 或 22.12+,通过本地服务访问,不要双击 index.html。

关于「从建模,配色,风格,运镜等方面对齐」

这句原话逐字留在 README 里。成品后来按视频改了方向,所以 README 另外给了一份根据最终实现整理的复现提示词,并明确标注它不冒充原始对话。两份都在。

关于这个合集

同一个仓库里还有一批 AI 辅助生成的交互式前端作品,全部 MIT 开源、全部带在线预览:可探索的家庭 3D 空间、日式街角便利店微缩沙盘、双极空气开关的结构动画、现代四驱拖拉机机械动画、波音 787-9 数字孪生大屏、热泵洗烘一体机爆炸拆解、三坊七巷真实地图导览、体素深夜拉面摊......

觉得有点意思,可以点个 Star:github.com/fanhuayishi...

相关推荐
用户11481867894842 小时前
实现一个「配置驱动」的动态表格组件(Vue + Element UI)
前端
数据掘金2 小时前
小程序分享参数在页面栈中的传递
前端
乐享qicheng2 小时前
1,自定义表单通俗理解-PC设计APP渲染
前端
为你学会写情书2 小时前
大屏适配别再只会 transform: scale 了,这套方案更稳
前端
孤独的神2 小时前
《AI 成了我的工位搭子,也成了我的焦虑来源》
前端
hunterandroid2 小时前
[鸿蒙从零到一] relationalStore 高级实践:事务、迁移与敏感数据保护
前端
lcarusZZZ2 小时前
前端转型,自建新闻转播客工作流
前端
vipxieliang2 小时前
JavaScript 事件循环与任务队列:从 setTimeout 到 Promise
前端·javascript
ZoeLandia2 小时前
TypeScript 05:交叉类型、索引签名、元组与 enum
前端·typescript