文件创建人： 北辰 (AI 设计搭档)
目标周期： 1-2 天 (Focus on Core Loop Validation)
核心技术栈： Next.js / React Three Fiber (R3F) / Tailwind CSS / Claude 3.5 Sonnet
1. 核心目标与哲学 (The Goal & Philosophy)
核心验证： 验证 Low-Poly 视觉风格在 Web 3D 中的表现力，以及**“具身领袖近场沟通”**的核心交互流畅性。
开发原则：
-
MOCK AI 优先： (核心原则不变) 暂不接入真实 LLM API，指令执行逻辑全部在前端代码中模拟 (Mock) 完成。
-
视觉至上： 重点投入在光影和色彩上，确保画面具有“高级手办感”。
-
影响力优先： 交互模式为 “靠近 → 说话 → 影响”，彻底废弃“点击选择”的操作模式。
2. 视觉目标 (Visual Target: Stylized Low-Poly)
我们旨在实现风格化 Low-Poly 的高级感，而非简陋的方块堆砌。
| 元素 | 材质 / 特点 |
| 视角 | 45 度等轴测俯视 (Isometric)，通过正交相机 (OrthographicCamera) 实现。 |
| 光影 | 必须配置 <directionalLight> 投射柔和阴影 (Soft Shadows)，让物体具有立体感。 |
| 地面 | 浅绿色/棕色大平面，具有接收阴影属性。 |
| 植被/资源 | 几何体拼凑：树 = 棕色圆柱 (Cylinder) + 绿色圆锥 (Cone)。 |
| UI | 采用 Glassmorphism（玻璃拟态）+ 清晰几何风格。 |
3. 分阶段执行细则 (Execution Plan)
🟢 阶段 1：舞台搭建 (Canvas & Lighting Setup)
-
设计目的：
-
确立游戏整体的视觉基调（古典、温暖、史诗感）。
-
构建 3D 渲染的基础设施，确保性能和兼容性。
-
-
工作内容：
-
配置 R3F 的
<Canvas>，设置高 DPI 支持 (dpr) 和阴影贴图 (shadows)。 -
配置 正交相机 (OrthographicCamera)，锁定上帝视角。
-
配置 暖色调灯光系统：环境光 + 强烈的日光（平行光），调整阴影参数以获得柔和边缘。
-
创建一个巨大的 80x80 地面 作为世界承载。
-
-
产出结果：
-
app/page.tsx中包含完整的 3D 场景代码。 -
浏览器中显示一个温暖、明亮的米黄色大平面。
-
-
验收标准 (DOD):
-
画面不再是黑色，而是米色/暖色调。 ✅ 2025-12-11
-
地面有清晰的投影（放个测试方块能看到影子）。 ✅ 2025-12-11
-
视角是 45 度俯视，且无法被随意旋转到底部（限制 OrbitControls 角度）。 ✅ 2025-12-11
-
🟢 阶段 2：世界生成 (Grid & Resources)
-
设计目的：
-
验证 PCG (程序化生成) 的技术可行性。
-
通过视觉分层（核心区 vs 远景），解决大地图的性能问题。
-
-
工作内容：
-
拆分出独立的
ResourceTile组件。 -
编写随机算法，在中心 20x20 区域生成 50+ 个树木和石头。
-
在外围区域生成低精度的山脉（锥体群）和水体（蓝色平面）。
-
实现组件化重构：将代码拆分到
/components/World和/components/Game。
-
-
产出结果：
-
/components/World/ResourceTile.tsx -
/components/Game/GameScene.tsx
-
-
验收标准 (DOD):
-
每次刷新页面，树木和石头的位置都会随机变化。 ✅ 2025-12-11
-
核心区域资源丰富，边缘有山脉作为视觉阻挡。 ✅ 2025-12-11
-
所有生成的物体都有阴影，且颜色符合 Low-Poly 审美。 ✅ 2025-12-11
-
🟢 阶段 3：角色与移动 (Player & Movement)
-
设计目的：
-
确立 “具身化” 体验：玩家有实体，必须亲自移动。
-
验证 Low-Poly 人偶 的表现力（不需要骨骼动画也能动）。
-
-
工作内容：
-
创建
PlayerLeader组件：白色几何人偶，绑定 WASD 键盘控制。 -
创建
WorkerAgent组件：土黄色几何人偶，实现 Random Walk (随机漫步) 逻辑。 -
实现平滑移动算法（Lerp），避免瞬移。
-
-
产出结果：
-
/components/Character/PlayerLeader.tsx -
/components/Character/WorkerAgent.tsx
-
-
验收标准 (DOD):
-
按 WASD 可以控制白色人偶平滑移动，松开按键即停。 ✅ 2025-12-11
-
黄色人偶（德米特里）在自动闲逛，不会穿墙或飞出地图。 ✅ 2025-12-11
-
两个角色都有头部和身体的区分，且投射阴影。 ✅ 2025-12-11
-
🟡 阶段 4：UI与模拟 (UI & Mock Command) [当前重点]
-
设计目的：
-
打通 [近场沟通 → 意图解析 → 行为反馈] 的核心循环。
-
验证 “影响力驱动” 的玩法是否成立（不直接控制，只下达愿景）。
-
-
工作内容：
-
状态管理： 使用
zustand建立GameState，管理日志、资源、距离检测。 -
UI 开发： 制作常驻底部的对话面板和右侧的系统日志。
-
逻辑实现：
-
近场检测： 实时计算玩家与 NPC 距离 (<3m 激活)。
-
Mock AI： 编写硬编码逻辑：收到 “砍树” → 状态变 Thinking → 移动到树 → 播放动画 → 树消失 → 木材+1。
-
-
-
产出结果：
-
/components/Game/GameUI.tsx -
/components/Game/GameState.ts
-
-
验收标准 (DOD):
-
距离感： 只有靠近德米特里时，输入框才变亮，出现耳朵图标。 ✅ 2025-12-11
-
指令响应： 输入 “去砍树” 后，日志显示对话，德米特里头顶气泡变色。 ✅ 2025-12-11
-
行为闭环： 德米特里真的移动到了一棵树旁，树真的消失了，左上角木材真的 +1。 ✅ 2025-12-11
-
当前进度状态： 阶段 1-3 已完成 (Done)。正在进行 阶段 4 (In Progress)。