truth-lab Phase 2 第②步 — 控制点拖拽 + 物理动画 + 实时数据¶

目标¶

在第①步 3D 场景基础上，增加交互式和动画能力： 1. 拖拽编辑控制点 — 用户可拖拽 3D 空间中的控制点，实时更新轨道形状 2. 物理正确的球体动画 — 小球沿最速降线轨迹平滑运动 3. 实时数据面板 — 显示位置、速度、时间、能量等物理量

文件结构（在现有 truth-lab 项目上修改）¶

1
2
3
4
5
6
7
8
9

src/
├── experiments/
│   └── brachistochrone/
│       ├── BrachistochroneScene.tsx   ← 第①步已创建，需改造
│       ├── BrachistochroneControls.tsx ← 新建：控制面板 UI
│       ├── BrachistochroneData.tsx     ← 新建：实时数据面板
│       └── BrachistochroneBall.tsx     ← 新建：小球动画组件
├── physics/
│   └── brachistochrone.ts             ← 已有，需扩展动画计算

实现计划¶

1️⃣ 物理引擎扩展 (src/physics/brachistochrone.ts)¶

• 增加 computeAnimation(start, end, controls, totalTime) 函数
• 输入：起点 A、终点 B、控制点序列、总运动时间
• 输出：一系列 (t, x, y, vx, vy, speed) 帧
• 实现最速降线轨迹的参数化匀速插值
• 能量守恒验证：mgh + 0.5*m*v² = constant

2️⃣ 控制点拖拽 (BrachistochroneScene.tsx 改造)¶

• 用 @react-three/drei 的 <TransformControls> 或 <DragControls>
• 控制点显示为可拖拽的球体（比普通点大，带发光环）
• 拖拽时：
• 实时更新 simulationStore 中的控制点位置
• 轨道 TubeGeometry 自动重建
• 物理帧缓存重新计算
• 选中控制点高亮（颜色变化 + 缩放）

3️⃣ 小球动画组件 (BrachistochroneBall.tsx)¶

• <mesh> 球体，沿预计算路径运动
• 使用 useFrame + lerp 平滑插值
• 球体带拖尾轨迹线（半透明曲线）
• 速度矢量箭头随球移动

4️⃣ 实时数据面板 (BrachistochroneData.tsx)¶

• 固定在屏幕右下角的 HUD 风格面板
• 显示：
• 位置 (x, y)
• 速度 (m/s)
• 已用时间 (s)
• 动能 (J)
• 势能 (J)
• 总能 (J) — 应保持守恒
• 使用 Html 组件覆在 3D 场景上

5️⃣ 控制面板 (BrachistochroneControls.tsx)¶

• 播放/暂停按钮
• 重置按钮
• 速度滑块（1x, 2x, 0.5x）
• 控制点数量显示

安装依赖（如需）¶

当前已有 three、@react-three/fiber、@react-three/drei（第①步已加）

开发流程¶

1. 扩展物理引擎
2. 改造场景支持拖拽
3. 添加小球动画
4. 添加数据面板
5. 添加控制面板
6. 本地测试 → git push → 服务器部署