类型： 太空 / 放置游戏
平台： 浏览器（手机和电脑）
价格： 免费——无需账户
URL： https://stellar-epoch.sloth255.com/
游戏概述
STELLAR EPOCH: APHELION 是一款完全在浏览器中运行的太空主题放置游戏。无需安装应用，无需订阅，无付费墙。无论是在智能手机还是桌面电脑上，只需一个浏览器即可立即开始游戏。
标题 Aphelion（远日点）指的是行星轨道上距离太阳最远的点——这个天文学术语捕捉了游戏宇宙的广阔浪漫尺度。
特色功能
🌠 随事件和条件演变的宇宙
宇宙的状态根据游戏内的条件和事件动态变化。根据游戏进程的不同，你会遭遇不同的宇宙景观和情境。
🏁 真正的结局
这不仅仅是数字增长的游戏。STELLAR EPOCH: APHELION 有一个真正的结局等待着你。每一次升级和积累的资源都让你更接近一个有意义的目标，当你达成时会感受到真实的满足感。
📱 支持手机和电脑
游戏对智能手机和桌面浏览器均进行了优化。随时随地游玩——你的进度始终只需一个标签页。
🌍 多语言支持
游戏支持多种语言，来自世界各地的玩家可以用母语享受游戏。这是一款为全球受众打造的游戏。
🪐 使用 Three.js 渲染的 3D 太空
宇宙通过 Three.js（一个 JavaScript 3D 库）呈现生机。宇宙在你的浏览器中实时渲染，让玩家沉浸在深度身临其境的世界中。
什么是放置游戏？
放置游戏（也称为挂机游戏或点击游戏）是一种游戏类型，你逐渐积累资源、解锁升级，并一步步扩大规模。其魅力在于小而稳定的进步积累成巨大成就所带来的成就感——以及可以按自己的节奏游玩。
适合哪些人？
- 想玩无需安装就能上手的游戏的人
- 太空和科幻题材爱好者
- 放置/挂机游戏粉丝
- 喜欢有故事和真正结局的游戏的玩家
- 想在手机或电脑上休闲游玩的人
- 偏好使用日语以外语言游玩的玩家
如何游玩
只需打开浏览器并访问 https://stellar-epoch.sloth255.com/ ——就这样！
技术亮点
整体架构
| 技术 | 用途 |
|---|---|
| React + TypeScript | 整体 UI |
| Zustand | 游戏状态管理 |
| Vite | 构建工具 |
| Firebase | 分析 |
| AWS S3 + CloudFront | 托管 |
游戏循环： Zustand store 中的 tick() 函数通过 useGameLoop hook 定期调用，在单次遍历中处理能源生产、设施和遭遇生成。状态持久化到 localStorage。
使用 Three.js / React Three Fiber 进行 3D 渲染
所有 3D 渲染集中在 SpaceScene.tsx 中。主要技术要点如下。
1. 自定义 GLSL 着色器（太阳、大气层、吸积盘）
- 太阳着色器：片段着色器利用表面法线与相机方向的点积生成日冕光晕效果。
timeuniform 每帧更新以创建脉冲动画。当耀斑触发时，flareIntensity通过lerp()平滑过渡。 - 大气层着色器：使用相同的法线点积技术，通过
BackSide渲染实现只给边缘着色的行星大气层（类菲涅尔效果）。 - 黑洞吸积盘：由多个重叠正弦波构建的湍流图案创建一个渐变，中心呈白热色，边缘渐变为深红色。
RingGeometry的 UV 坐标经过手动修正，以按预期进行径向映射。
2. 使用 useFrame 实现逐帧动画
- 行星和卫星轨道：每帧递增
angleRef，并用三角函数计算position.x/z——这是一种无需物理模拟的轻量级方法。 - 对象引用通过
useRef存储，位置、旋转和 uniform 可以直接写入而不触发 React 重渲染，保持高性能。
3. 使用 InstancedMesh 高效渲染大量对象
将 THREE.Object3D 虚拟对象的矩阵复制到 InstancedMesh 中，将所有实例减少到单次 draw call。
4. 粒子系统（BufferGeometry）
- 星系螺旋：预先生成 5000 个点的
Float32Array。使用均匀间隔的极坐标加随机扩散放置四条螺旋臂，通过exp(-dist/18)的亮度衰减创建中心最亮的自然星系外观。 - 超新星效果：速度向量嵌入
userData中，在useFrame内将位置计算为elapsed * velocity，使粒子向外球形飞散。 - 宇宙网：200 个节点的邻近图渲染为
LineSegments，连接距离 12 以内的任意两个节点。
5. 阶段感知的相机控制
随着游戏从第 1 到第 7 阶段推进，相机的回拉距离发生变化，产生从太阳系 → 星系 → 大尺度宇宙结构的视觉规模扩展。通过 requestAnimationFrame 应用自定义缓动曲线（1 - (1-t)^3）实现平滑过渡。
6. 使用 Suspense 渐进式纹理加载
@react-three/drei 的 useTexture 异步加载纹理并包裹在 React Suspense 中。纹理尚未加载时，显示仅使用着色器的备用方案。通过向 GLSL 传递 hasTexture uniform 在有纹理和无纹理渲染之间动态切换。
7. 相机抖动
当传奇遭遇触发时，通过 useThree() 直接操控相机，每帧向相机位置添加和减去随机偏移，实现简单的抖动效果。