# AICode

**Repository Path**: zhangningkang/aicode

## Basic Information

- **Project Name**: AICode
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-22
- **Last Updated**: 2026-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 3D Interactive Login Pages

基于 Three.js 构建的 3D 特效登录页面集合，包含星空背景、太阳系、海洋、赛博朋克、粒子互动、音频可视化、物理沙盒和光影迷宫八大主题，支持简体中文、繁体中文、英文切换。

## 效果

### 🌌 星空版（starry-sky-background）
- 3D 星空粒子（5 层景深，独立旋转与闪烁）
- 随机流星划过
- 彩色星云漂浮
- 鼠标移动视差效果
- 紫色调玻璃拟态登录卡片

### 🪐 太阳系版（solar-system）
- 3D 太阳系场景：太阳（多层日冕 + 耀斑 + 太阳风粒子）+ 6 颗公转行星
- 地球带有 Canvas 生成纹理（大陆、海洋、植被带、冰盖）
- 土星光环
- 鼠标移动视差效果
- 暖橙色调玻璃拟态登录卡片（右侧浮动）
- 语言切换按钮悬浮底部

### 🌊 海洋版（ocean-scene）
- 3D 动态海面：三层正弦波叠加，波浪起伏流动
- 深海渐变色背景 + 1000 颗星空粒子
- 青蓝色调玻璃拟态登录卡片（右侧浮动）
- 语言切换按钮悬浮底部

### 💠 赛博版（cyberpunk）
- 3D 霓虹网格地面（青 + 品红双层）+ 18 栋 wireframe 全息建筑（两侧展开）
- 5 栋悬浮建筑在卡片上方漂浮
- 2000 个彩色数据粒子 + 3 组双层全息光环旋转（Y=4.5）
- Canvas 数字雨（片假名 + 16 进制）
- 扫描线 + 霓虹呼吸边框动画
- 品红/青色玻璃拟态登录卡片（居中）
- Orbitron 科技字体，全大写标题
- 鼠标视差效果
- 语言切换按钮悬浮底部

### ⚡ 粒子版（particle-playground）
- 2000 颗三色渐变交互粒子（青 ↔ 紫 ↔ 品红），鼠标吸引流动
- 点击爆炸扩散 + 长按 0.3s 触发漩涡旋转
- 空闲时粒子围绕 home 位置正弦漂移 + 整体呼吸动画
- 粒子尾迹：每粒子保留 3 帧轨迹，淡紫色拖影
- 粒子连线：120 个中心节点动态连接最近邻居，青色光网
- Canvas 2D 叠加层：鼠标拖尾（青色光点 + 紫色线条）+ 点击涟漪（扩散圆环 + 光晕）
- 帧率无关物理引擎、全屏视口自适应
- 深色高透玻璃拟态登录卡片（右下角浮动）
- 语言切换按钮悬浮底部

### 🎵 音频可视化版（audio-viz）
- 3D 几何频谱可视化：64 根半圆弧频谱柱 + 48 根环形频谱柱 + 256 点时域波形线
- 支持麦克风实时输入和内置合成音源（3 振荡器 C 大调旋律），自动切换
- 背景色随低频脉动 + 光晕呼吸缩放
- 四种显示模式切换：全部 / 频谱柱 / 环形 / 波形
- 顶部控制栏：音源切换 + 模式切换 + 音量滑块 + 实时电平条
- 青/紫色深色玻璃拟态登录卡片（右侧浮动）
- 语言切换按钮悬浮底部

### 🧊 物理沙盒版（physics-playground）
- Matter.js 2D 物理引擎：重力模式（下落堆叠碰撞弹跳）和漂浮模式（正弦波浮动）
- 点击场景生成随机形状（球体/方块）+ 霓虹发光材质
- 鼠标拖拽拾取并投掷物体 + 鼠标靠近产生斥力
- 顶部控制栏：生成 / 清空 / 重力切换 / 形状切换 / 物体计数
- 深色紫调玻璃拟态登录卡片（右侧浮动）
- 语言切换按钮悬浮底部

### 🔦 光影迷宫版（light-maze）
- DFS 算法生成 13×13 随机迷宫，黑暗环境中第一人称探索
- WASD 移动 + 鼠标环顾（PointerLock），AABB 碰撞检测支持墙壁滑行
- 手电筒 SpotLight 跟随视角，远处渐隐于暗雾
- 出口发光球体脉冲引导，抵达后解锁指针、卡片渐显
- 深色紫调玻璃拟态登录卡片（居中）
- 语言切换按钮悬浮底部

### 通用
- 玻璃拟态（Glassmorphism）登录卡片
- 三语切换（简体中文 / 繁体中文 / English），偏好自动保存至 `localStorage`
- 表单：邮箱 + 密码 + 记住我 + 忘记密码 + 注册
- 响应式设计

## 运行

```bash
# 星空版
python3 -m http.server 8080 --directory starry-sky-background
# http://localhost:8080

# 太阳系版
python3 -m http.server 8081 --directory solar-system
# http://localhost:8081

# 海洋版
python3 -m http.server 8082 --directory ocean-scene
# http://localhost:8082

# 赛博版
python3 -m http.server 8083 --directory cyberpunk
# http://localhost:8083

# 粒子版
python3 -m http.server 8084 --directory particle-playground
# http://localhost:8084

# 音频可视化版
python3 -m http.server 8085 --directory audio-viz
# http://localhost:8085

# 物理沙盒版
python3 -m http.server 8086 --directory physics-playground
# http://localhost:8086

# 光影迷宫版
python3 -m http.server 8087 --directory light-maze
# http://localhost:8087
```

> 注意：`file://` 直接打开 HTML 无法渲染 Three.js，必须通过 HTTP 服务器访问。

## 项目结构

```
AICode/
├── starry-sky-background/
│   ├── index.html
│   ├── css/style.css
│   └── js/
│       ├── starfield.js   # 3D 星空粒子特效
│       └── i18n.js        # 多语言切换
├── solar-system/
│   ├── index.html
│   ├── css/style.css
│   └── js/
│       ├── solarsystem.js # 3D 太阳系场景
│       └── i18n.js        # 多语言切换
├── ocean-scene/
│   ├── index.html
│   ├── css/style.css
│   └── js/
│       ├── ocean.js       # 3D 海面波浪
│       └── i18n.js        # 多语言切换
├── cyberpunk/
│   ├── index.html
│   ├── css/style.css
│   └── js/
│       ├── cyberpunk.js   # 3D 赛博场景
│       └── i18n.js        # 多语言切换
├── particle-playground/
│   ├── index.html
│   ├── css/style.css
│   └── js/
│       ├── particles.js   # 3D 交互粒子系统
│       ├── effects.js     # Canvas 2D 拖尾 + 涟漪
│       └── i18n.js        # 多语言切换
├── audio-viz/
│   ├── index.html
│   ├── css/style.css
│   └── js/
│       ├── audio.js       # Web Audio 引擎
│       ├── visuals.js     # 3D 频谱可视化
│       └── i18n.js        # 多语言切换
├── physics-playground/
│   ├── index.html
│   ├── css/style.css
│   └── js/
│       ├── sandbox.js     # 物理引擎 + 3D 沙盒
│       └── i18n.js        # 多语言切换
├── light-maze/
│   ├── index.html
│   ├── css/style.css
│   └── js/
│       ├── maze.js        # 迷宫生成 + 3D 渲染 + 第一人称控制
│       └── i18n.js        # 多语言切换
├── AGENTS.md
├── README.md
└── .gitignore
```

## 技术栈

- Three.js r128（CDN）
- 纯 HTML / CSS / JavaScript
- Google Fonts（Inter）
- Canvas 2D 生成纹理（星球表面、光晕、日冕）