「18- 海上浮岛 前端 个人网页」点击链接或复制整段内容打开「夸克APP」即可获取。/~148e3Zvv2R~:/链接https://pan.quark.cn/s/66f4c5e825a0Galok · 海上浮岛一个漂浮在真实海水之上的个人站点中转站纯静态HTML / CSS / JS无构建步骤开箱即用于 GitHub Pages。特性真实海水Canvas 多层正弦波浪 水面高光闪烁 日月倒影光带 碎光点️划水涟漪鼠标移动留下细小涟漪点击产生扩散波纹参考 wemd.app 的水波交互真实天空按地点与日期计算太阳、月亮、月相和银河转动自然经历日出、黄昏、夜晚与日出手动切换右上一键切换自动 → 日间 → 夜间 → 自动自动模式按钮带蓝色徽标️浮岛卡片blog / books 等不同视觉样式随海浪轻轻浮动悬停投下涟漪单页适配手机与电脑均一屏显示无需滚动⚡零依赖不依赖任何框架或 CDN仅引入 Google 字体可移除目录结构galok-page/ ├── index.html # 页面结构 ├── style.css # 样式卡片、布局、昼夜文字适配 ├── water.js # 海水引擎波浪/涟漪/昼夜色彩/日月星辰 ├── app.js # 站点配置 卡片渲染 主题切换 └── README.md快速自定义只改 app.js 顶部打开app.js修改最上方的两处配置即可const SITES [ { type: blog, // 卡片视觉blog | books | link name: Blog, // 卡片标题 desc: BLOG · 思绪与札记, // 卡片副标题 url: https://blog.example.com, // ← 改成你的真实地址 target: _self, // _self 当前页跳转 | _blank 新标签页 accent: #4a9fd6, // 卡片主题色 }, { type: books, name: Books, desc: BOOKS · 书海漫游, url: https://books.example.com, target: _self, accent: #8a7bb8, }, ]; const SITE_NAME Galok; // 左上角品牌名想加更多站点在SITES数组里复制一项即可卡片会自动排列。type决定卡片插画blog文章卡、books书堆、link通用箭头。部署到 GitHub Pages在 GitHub 新建仓库例如galok-page。把这 4 个文件index.html/style.css/water.js/app.js推到main分支根目录。进入仓库Settings → PagesSource 选Deploy from a branch分支选main/(root)保存。等约 1 分钟访问https://你的用户名.github.io/galok-page/即可。想用自定义域名如galok.dev在 Pages 设置里填 Custom domain并把域名 DNS 指向 GitHub Pages。中转链接可改成该域名下的子域名。本地预览无需构建直接双击index.html用浏览器打开即可。 若想模拟 GitHub Pages 的服务器环境在该目录运行npx serve .或python -m http.server再访问提示的地址。海水技术参考 WebGL-Ocean-FFT 项目water.js用单个 WebGL 片段着色器渲染真实海面无需浮点纹理等扩展稳健兼容方向性 Phillips 波谱生成 14 组确定性波形对数波长分布覆盖长涌浪与短风浪页面刷新后不会随机换一片海Gerstner 轨道位移 Stokes 二次谐波水平位移与波幅保持正确量纲浪峰略尖、波谷圆滑水体菲涅尔折射率 n1.33 宽窄两层日月高光 HDR 色调映射天文天空模型低精度日月轨道、月相终结线、稳定恒星场、真实亮星与银河带多尺度云层程序化形态随风移动云会遮挡星月并接受晨昏暖光、月光频散涟漪波包局部扰动具有传播波前、群速度、几何扩散和 9 秒渐进释放并会随主风向漂移、被基础浪弯曲水面色乘天光 浪尖白沫 次表面散射鼠标划水涟漪 光标处持续搅拌 浪尖高光按上海地点可在water.js的SKY_LOCATION修改进行天文时间计算手动切换仍可快速预览白天、黄昏、有月的夜晚想自己改海水改观测地点water.js中的SKY_LOCATION纬度、经度、UTC 偏移。改云量water.js的CLOUD_COVER0为晴空1为阴天。改波浪统计/风向water.js的buildWaves()风速windSpeed、风向windAngle、波数NUM_WAVES。波谱使用固定种子要换一片海可修改mulberry32()的入参。改浪尖尖锐度frame()里的gl.uniform1f(U.uChoppy, 0.7)越大越尖过大会有锯齿。改涟漪大小/密度maybeSpawnNatural()的 strength/生成间隔以及waveField()中波包的k、width和release。改渲染精度MAX_PIXELS越大越锐利越耗 GPU。改卡片浮动节奏style.css的keyframes bob与--bob-dur。