# weavemind-website

**Repository Path**: tan_stefan/weavemind-website

## Basic Information

- **Project Name**: weavemind-website
- **Description**: 酷炫的weavemind官网
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-13
- **Last Updated**: 2026-02-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WeaveMind 3D Interactive Website

一个创新的AI陪伴产品官网，通过3D交互体验传达"编织心智"的品牌理念。

## 技术栈

- **React 18+** - 函数组件和Hooks
- **TypeScript 5.0+** - 严格模式
- **Three.js** - 3D渲染引擎
- **@react-three/fiber** - React渲染器
- **@react-three/drei** - Three.js辅助工具
- **MediaPipe Hands** - 手势识别
- **Zustand** - 轻量级状态管理
- **GSAP** - UI动画
- **Vite 5+** - 构建工具

## 核心功能

### 四大场景

1. **NeuralCosmos (神经网络空间)**
   - 3D神经网络可视化
   - 节点脉动、数据流动画
   - 手势激活和涟漪效果

2. **AIGalaxy (AI伙伴星系)**
   - 5个AI角色轨道布局
   - 手势选择、缩放、旋转
   - AI信息面板和试对话

3. **MemoryNebula (记忆星云)**
   - 用户故事星云展示
   - 情感色彩映射
   - 故事展开和分享功能

4. **WeavingSpace (编织空间)**
   - 三步AI创建流程
   - 性格、能力、风格选择
   - 实时预览和生成

### 手势识别系统

支持10+种手势：
- ✋ 手掌张开 (PALM_OPEN)
- 🤏 捏合 (PINCH)
- 👆 指向 (POINT)
- 👉 右扫 (SWIPE_RIGHT)
- 👈 左扫 (SWIPE_LEFT)
- 🔄 顺时针画圆 (CIRCLE_CW)
- 🔃 逆时针画圆 (CIRCLE_CCW)
- ✊ 抓取 (GRAB)
- 🤚 前推 (PUSH)
- 🖐️ 后拉 (PULL)
- 🙏 双手合十 (HANDS_TOGETHER)

### 多模式交互

- 👋 手势控制模式
- 🖱️ 鼠标/触控模式
- ⌨️ 键盘导航模式

### 无障碍支持

- 键盘快捷键 (1-4切换场景, Alt+A打开设置)
- 高对比度模式
- 减少动画模式
- 屏幕阅读器兼容
- ARIA标签

## 安装和运行

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview
```

## 项目结构

```
src/
├── assets/                    # 静态资源
│   ├── models/               # 3D模型
│   ├── textures/             # 纹理贴图
│   ├── audios/               # 音频文件
│   └── shaders/              # 自定义着色器
├── components/               # React组件
│   ├── scene/               # 3D场景组件
│   │   ├── NeuralCosmos.tsx
│   │   ├── AIGalaxy.tsx
│   │   ├── MemoryNebula.tsx
│   │   └── WeavingSpace.tsx
│   ├── ui/                  # 2D UI组件
│   │   ├── Header.tsx
│   │   ├── GestureOverlay.tsx
│   │   ├── LoadingScreen.tsx
│   │   └── AccessibilityPanel.tsx
│   ├── gestures/            # 手势识别组件
│   └── cameras/             # 相机控制系统
├── hooks/                   # 自定义Hooks
│   └── useGestureRecognition.ts
├── lib/                     # 工具库
│   ├── audioManager.ts
│   └── capabilityDetection.ts
├── stores/                  # 状态存储
│   └── experienceStore.ts
└── styles/                  # 样式文件
    └── index.css
```

## 键盘快捷键

- `Alt + A` - 打开/关闭无障碍面板
- `1` - 切换到神经网络空间
- `2` - 切换到AI伙伴星系
- `3` - 切换到记忆星云
- `4` - 切换到编织空间
- `Esc` - 关闭面板/取消选择
- `Tab` - 导航可交互元素
- `Enter/Space` - 确认选择

## 性能优化

- 设备能力检测和自动配置
- LOD (Level of Detail) 系统
- 实例化渲染
- 资源按需加载
- 帧率监控和动态调整

## 浏览器支持

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## 开发说明

### 添加新场景

1. 在 `src/components/scene/` 创建新场景组件
2. 在 `src/stores/experienceStore.ts` 添加场景类型
3. 在 `src/App.tsx` 的 `SceneContent` 组件中添加场景路由

### 添加新手势

1. 在 `src/hooks/useGestureRecognition.ts` 的 `GestureType` 类型中添加新手势
2. 实现手势检测算法
3. 在场景组件中添加手势响应逻辑

### 自定义样式

全局CSS变量在 `src/styles/index.css` 中定义：

```css
:root {
  --color-mind-blue: #5D8AFF;
  --color-warm-gold: #FFB74D;
  --color-neural-purple: #9575CD;
  --color-deep-space: #0A0A14;
}
```

## 移动端视觉优化 (Mobile Visual Optimization)

针对高像素密度(High-DPR)移动设备，本项目已实施以下优化措施，确保文字和3D内容清晰锐利：

1. **CSS 文本抗锯齿与像素对齐**
   - 引入 `src/styles/typography.css` 提供 `.text-crisp` 工具类。
   - 使用 `-webkit-font-smoothing: antialiased` 和 `transform: translateZ(0)` 强制硬件加速。
   - 对发光文字使用伪元素 (`.text-glow`) 实现，避免直接对文本使用 `filter: blur()` 导致的模糊。

2. **Canvas 分辨率智能适配**
   - 在 `src/lib/capabilityDetection.ts` 中，提升了移动端 (midEnd/lowEnd) 的 `pixelRatio` 默认值 (1.5 -> 2.0+)。
   - 确保 iPhone/Android 高端机型能够利用物理像素优势渲染 3D 文字。

3. **Shader 锐化处理**
   - `NeuralCosmos.tsx` 中的 `CoreParticleMaterial` 着色器已调整：
     - 收紧核心光圈 (`smoothstep` 阈值 0.1 -> 0.05)。
     - 增加辉光衰减指数 (`exp` 系数 4.0 -> 8.0)，减少光晕弥散感。

### 接入方式
在需要清晰显示的文本元素上添加类名：
```tsx
<h1 className="text-crisp text-glow">WeaveMind</h1>
```

### 已知限制
- 1x 屏设备下会自动禁用 `.text-glow` 的伪元素发光以保证清晰度。
- 极低端设备 (lowEnd) 可能因性能原因仍使用较低的渲染分辨率。

### 回归测试
使用以下命令进行视觉回归测试：
```bash
npm run test:visual
```

## 许可证

Copyright © 2024 WeaveMind. All rights reserved.