SAKURAIN TEAM 网站技术详解

一、技术栈全景

1.1 核心技术矩阵

二、核心功能模块详解

2.1 3D地球可视化系统 (CesiumGlobe)

架构设计

渲染管线层级

TEXT
复制
1影像层 → 矢量层 → 特效层 → UI叠加层
2  ↓         ↓         ↓         ↓
3瓦片加载   标记渲染   后处理   HTML界面
4LOD选择   贝塞尔曲线 动态光照  交互控件
5LRU缓存   实体聚合   大气渲染  信息面板

数据流向

1. 影像层：接入高德地图Web服务，基于视锥体LOD选择，LRU缓存管理
2. 矢量层：接收几何数据，渲染标记点和贝塞尔曲线，执行实体聚合
3. 特效层：处理渲染对象，应用动态光照和大气效果
4. UI叠加层：生成最终画面，提供用户交互和数据展示

关键技术实现

瓦片流式加载

• 接入高德地图Web服务（webst{s}.is.autonavi.com）
• 基于视锥体的LOD选择：根据相机高度动态计算所需层级
• LRU缓存管理：限制内存中瓦片数量，离屏异步卸载

动态光照系统

TYPESCRIPT
复制
1// 物理参数配置
2scene.globe.enableLighting = true;
3scene.globe.lightingFadeOutDistance = 100000000;  // 光照淡出出距离
4scene.globe.lightingFadeInDistance = 100000;      // 光照淡入距离
5scene.globe.dynamicAtmosphereLighting = true;      // 动态大气光照
6scene.globe.atmosphereLightIntensity = 2.0;        // 增强对比

贸易航线渲染（贝塞尔曲线）

TYPESCRIPT
复制
1// 二次贝塞尔插值生成大圆航线
2const midPoint = Cesium.Cartesian3.add(start, end, new Cesium.Cartesian3());
3Cesium.Cartesian3.multiplyByScalar(mid, 0.5, mid);
4const distance = Cesium.Cartesian3.distance(start, end);
5const height = Math.min(distance * 0.3, 2000000);  // 最大弧高2000km
6
7// 曲线采样
8for (let t = 0; t <= 1; t += 0.05) {
9  const oneMinusT = 1 - t;
10  const point = new Cesium.Cartesian3(
11    oneMinusT * oneMinusT * start.x + 2 * oneMinusT * t * mid.x + t * t * end.x,
12    // ... y, z同理
13  );
14}

性能优化策略

2.2 3D中国地图系统 (ChinaMap3D)

技术架构

数据处理流程

TEXT
复制
1阿里云DataV → 自定义投影 → Three.js → WebGL
2  ↓              ↓            ↓          ↓
3GeoJSON数据    坐标转换     几何体生成   GPU渲染
4省市边界       优化墨卡托   三角化处理   实时光照
5行政区划       补偿拉伸     孔洞处理     阴影效果

投影算法（优化墨卡托）

TYPESCRIPT
复制
1const PROJECTION_CONFIG = {
2  centerLon: 105,  // 以陕西为中心，优化中国区域变形
3  centerLat: 36,
4  scale: 1.1,      // 补偿东西向拉伸
5};
6
7function project(lon: number, lat: number): [number, number] {
8  const x = (lon - centerLon) * scale;
9  const y = (lat - centerLat) * scale;
10  return [x, -y];  // Y轴取反确保北向在上
11}

多边形处理管线

激光柱视觉效果

TYPESCRIPT
复制
1// 四层叠加实现发光效果
2<group position={[x, MAP_HEIGHT, z]}>
3  <mesh> {/* 核心层：高不透明实体 */} </mesh>
4  <mesh> {/* 光晕层：低不透明体积光 */} </mesh>
5  <mesh> {/* 顶部光束：锥体渐变 */} </mesh>
6  <mesh> {/* 底部环：双环脉冲动画 */} </mesh>
7</group>

交互系统

• OrbitControls: 旋转、缩放、平移（限制极角防止翻转）
• Raycaster: 鼠标悬停检测，支持复杂多边形
• 相机动画: 下钻时平滑过渡，使用缓动函数

2.3 弹幕卫星系统 (DanmakuSatellite)

物理模型

轨道力学（简化开普勒模型）

角速度计算（开普勒第三定律）

TYPESCRIPT
复制
1const calculateAngularVelocity = (altitude: number): number => {
2  const radius = EARTH_RADIUS + altitude;
3  const referenceRadius = EARTH_RADIUS + 400000;  // 400km参考轨道
4  const referenceOmega = 0.0012;  // rad/s
5
6  // ω ∝ r^(-3/2)
7  const omega = referenceOmega * Math.pow(referenceRadius / radius, 1.5);
8  return omega * 50;  // 视觉加速因子
9};

3D位置计算

TYPESCRIPT
复制
1// 考虑倾角和RAAN的完整变换
2const calculatePosition = (d: Danmaku, elapsed: number) => {
3  const radius = EARTH_RADIUS + d.altitude;
4  const angle = d.angle + d.speed * elapsed;
5
6  // 轨道平面坐标
7  const xOrb = Math.cos(angle) * radius;
8  const yOrb = Math.sin(angle) * radius;
9
10  // 倾角旋转（绕X轴）
11  const yIncl = yOrb * Math.cos(d.inclination);
12  const zIncl = yOrb * Math.sin(d.inclination);
13
14  // RAAN旋转（绕Z轴）
15  const cosR = Math.cos(d.raan), sinR = Math.sin(d.raan);
16  return new Cesium.Cartesian3(
17    xOrb * cosR - yIncl * sinR,
18    xOrb * sinR + yIncl * cosR,
19    zIncl
20  );
21};

渲染优化

2.4 【开发中】Web终端系统 (WebTerminal)

架构分层

TEXT
复制
1┌─────────────────────────────────────────┐
2│           UI层 (XTerm.js)              │
3│  • 终端仿真  • 命令解析  • 渲染引擎      │
4│  • VT100协议  • 256色渲染  • 鼠标事件  │
5└─────────────────────────────────────────┘
6                    ↓
7┌─────────────────────────────────────────┐
8│       运行时层 (Wasmer SDK)            │
9│  • WASM模块加载  • WASI系统接口         │
10│  • 内存管理  • 安全沙箱                │
11└─────────────────────────────────────────┘
12                    ↓
13┌─────────────────────────────────────────┐
14│       语言运行时 (WASM模块)            │
15│  • Python  • Node.js  • Ruby  • Bash  │
16│  • 沙箱隔离  • 资源限制  • 安全执行    │
17└─────────────────────────────────────────┘

安全沙箱模型

终端配置

TYPESCRIPT
复制
1const terminal = new Terminal({
2  cursorBlink: true,
3  cursorStyle: 'block',
4  fontSize: 14,
5  fontFamily: 'Monaco, Menlo, Ubuntu Mono, monospace',
6  theme: {
7    background: 'rgba(30, 30, 30, 0.95)',
8    foreground: '#d4d4d4',
9    cursor: 'var(--accent-primary)',
10    selectionBackground: 'rgba(38, 139, 210, 0.3)',
11    // 16色ANSI配色...
12  },
13  allowTransparency: true,
14  scrollback: 1000,
15});

2.5 动画系统

Framer Motion（组件级动画）

核心特性

• 声明式API：initial → animate → exit
• 布局动画：自动处理位置/大小变化
• 手势支持：拖拽、悬停、点击

TYPESCRIPT
复制
1// 典型用法：淡入上移动画
2<motion.div
3  initial={{ opacity: 0, y: 20 }}
4  animate={{ opacity: 1, y: 0 }}
5  exit={{ opacity: 0, y: -20 }}
6  transition={{
7    duration: 0.6,
8    ease: [0.16, 1, 0.3, 1]  // 自定义贝塞尔曲线
9  }}
10  whileHover={{ scale: 1.05 }}
11  whileTap={{ scale: 0.95 }}
12/>

GSAP + ScrollTrigger（复杂时间轴）

ScrollTrigger配置

TYPESCRIPT
复制
1gsap.to(element, {
2  scrollTrigger: {
3    trigger: element,
4    start: 'top 80%',      // 元素顶部到达视口80%位置
5    end: 'bottom 20%',     // 元素底部到达视口20%位置
6    scrub: 1,              // 平滑跟随滚动
7    markers: false,        // 调试标记
8    toggleActions: 'play none none reverse',
9  },
10  y: -100,
11  opacity: 1,
12  duration: 1,
13});

性能优化

2.6 主题系统

架构设计

TEXT
复制
1next-themes (状态管理)
2    ↓
3CSS Variables (动态值)
4    ↓
5Tailwind CSS (工具类)

主题变量定义

CSS
复制
1:root {
2  /* 基础色 */
3  --bg-primary: #0a0a0f;
4  --bg-secondary: #151520;
5  --bg-tertiary: #1a1a2e;
6
7  /* 强调色 */
8  --accent-primary: #0E639C;
9  --accent-secondary: #6A9955;
10  --accent-tertiary: #9B59B6;
11  --accent-glow: rgba(14, 99, 156, 0.3);
12
13  /* 文字色 */
14  --text-primary: #e0e0e0;
15  --text-secondary: #a0a0b0;
16  --text-muted: #606070;
17
18  /* Minecraft特色 */
19  --mc-gold: #FFD700;
20  --mc-green: #55FF55;
21  --mc-red: #FF5555;
22}
23
24[data-theme="light"] {
25  --bg-primary: #f5f5f0;
26  --text-primary: #1a1a2e;
27  --accent-primary: #2563eb;
28}

切换动画

• View Transitions API：原生页面过渡（Chrome 126+）
• CSS过渡：transition: background-color 0.3s ease
• 持久化：localStorage保存用户偏好

三、性能工程

3.1 加载优化

3.2 运行时优化

React优化

TYPESCRIPT
复制
1// 1. 组件记忆化
2const MemoComponent = memo(Component, (prev, next) =>
3  prev.id === next.id
4);
5
6// 2. 计算缓存
7const processed = useMemo(() =>
8  expensiveCompute(data),
9  [data]
10);
11
12// 3. 回调稳定
13const handler = useCallback(() => {
14  doSomething(dep);
15}, [dep]);

3D渲染优化

• 对象池：复用几何体/材质实例
• 视锥剔除：仅渲染可见对象
• LOD系统：距离-based细节降级
• 纹理图集：减少状态切换

3.3 关键性能指标

四、工程架构

4.1 项目结构

TEXT
复制
1src/
2├── components/
3│   ├── atoms/          # 基础组件（设计令牌驱动，无业务逻辑）
4│   │   ├── Button.tsx
5│   │   ├── Card.tsx
6│   │   └── Badge.tsx
7│   │
8│   ├── effects/        # 特效组件（3D可视化、粒子效果）
9│   │   ├── CesiumGlobe.tsx    # 3D地球可视化
10│   │   ├── ChinaMap3D.tsx     # 3D中国地图
11│   │   ├── DanmakuSatellite.tsx # 弹幕卫星
12│   │   ├── WebTerminal.tsx     # Web终端
13│   │   └── ...（粒子、光效、文字动画）
14│   │
15│   ├── sections/       # 业务组件（组合atoms/effects）
16│   │   ├── Hero.tsx
17│   │   ├── Services.tsx
18│   │   └── Contact.tsx
19│   │
20│   └── ui/            # UI组件（Radix UI封装 + 主题适配）
21│       └── ...
22│
23├── hooks/              # 自定义Hooks
24│   ├── useTheme.ts     # 主题状态管理
25│   ├── useLenis.ts     # 平滑滚动
26│   └── usePerformance.ts # 性能监控
27│
28├── lib/                # 工具库
29│   ├── utils.ts        # 通用工具函数
30│   ├── animations.ts   # 动画配置
31│   └── performance.ts  # 性能优化工具
32│
33├── pages/              # 页面组件
34│   ├── Docs/           # 文档系统（Markdown渲染）
35│   ├── Friends/        # 友链页面
36│   ├── Blog/           # 博客系统
37│   └── NotFound/       # 404页面
38│
39├── styles/             # 样式文件
40│   ├── globals.css     # Tailwind + CSS变量
41│   └── minecraft-theme.css # 主题特定样式
42│
43└── types/              # 类型定义
44    └── index.ts        # 全局类型定义

4.2 文档系统架构

渲染管线

TEXT
复制
1Markdown原文
2    ↓
3react-markdown (解析器)
4    ↓
5remark-gfm (GitHub扩展)
6    ↓
7rehype-highlight (代码高亮)
8    ↓
9自定义组件映射 (h1→Title, code→CodeBlock)
10    ↓
11React组件树 (虚拟DOM)
12    ↓
13最终渲染 (响应式更新)

支持的格式

• Markdown格式：标准Markdown语法
• GitHub扩展：表格、删除线、任务列表
• 代码高亮：支持100+编程语言
• 自定义组件：标题、代码块、表格、引用

目录生成

• 解析AST提取标题层级
• 生成锚点ID（slug化）
• 滚动监听高亮当前章节

五、部署与运维

5.1 构建流程

Vite构建系统

TEXT
复制
1TypeScript源码
2    ↓
3Vite构建系统
4    ├─→ ESBuild (快速转译)
5    │   • 开发服务器
6    │   • HMR热更新
7    │   • 源码映射
8    │
9    └─→ Rollup (打包优化)
10        ├─→ 代码分割 (模块分割)
11        ├─→ Tree Shaking (死代码消除)
12        └─→ 代码压缩 (体积优化)

资源处理

TEXT
复制
1静态资源处理
2    ├─→ 图片优化 (WebP压缩)
3    ├─→ 字体子集化 (裁剪未使用字符)
4    └─→ 哈希文件名 (缓存策略)

输出产物

TEXT
复制
1dist/
2├── index.html          # 入口文件
3├── assets/
4│   ├── index-[hash].js    # 主包
5│   ├── vendor-[hash].js   # 依赖包
6│   └── ... (其他资源)
7└── 404.html            # SPA路由适配

分发部署

• Vercel部署：自动CI/CD，边缘计算
• 全球CDN：静态资源加速，低延迟
• HTTPS加速：自动SSL证书，安全传输

5.2 SPA路由适配

问题：静态托管刷新404

解决方案

HTML
复制
1<!-- 404.html -->
2<script>
3  // 保存原始路径
4  sessionStorage.setItem('redirect', location.pathname);
5  // 重定向到首页
6  location.href = '/';
7</script>

TYPESCRIPT
复制
1// App.tsx 挂载时
2useEffect(() => {
3  const redirect = sessionStorage.getItem('redirect');
4  if (redirect) {
5    sessionStorage.removeItem('redirect');
6    navigate(redirect);
7  }
8}, []);

六、浏览器兼容性

七、技术演进路线

近期（3个月内）

• WebGPU迁移：替代WebGL，释放计算着色器能力
• 边缘AI：TensorFlow.js轻量模型推理
• 实时协作：OT算法实现多人同步编辑

中期（6-12个月）

• WebXR支持：VR/AR沉浸式体验
• 微前端架构：模块独立部署
• 边缘渲染：云端渲染 + 视频流推送

远期（1年+）

• 数字孪生：完整业务系统3D映射
• 生成式AI：智能内容生成助手
• 自治系统：AI驱动的性能自优化

八、总结

SAKURAIN TEAM 的技术架构体现了现代Web应用的前沿实践：

所有技术选择均服务于技术演示与学习的核心目标。

文档版本: 2.0 更新日期: 2026-02-07