# 浏览器中 Three.js 实现的实时三体问题 n-body 引力模拟与碰撞检测 > 探讨浏览器端 n-body 模拟的工程实现，包括引力计算、3D 可视化、碰撞处理与性能参数。 ## 元数据 - 路径: /posts/2025/11/19/browser-3d-n-body-simulation/ - 发布时间: 2025-11-19T11:01:45+08:00 - 分类: [application-security](/categories/application-security/) - 站点: https://blog.hotdry.top ## 正文 在浏览器环境中实现实时 n-body 引力模拟，特别是针对经典的三体问题（three-body problem），是一种高效的教育和探索工具。它允许用户通过交互方式观察混沌轨道、碰撞事件，而无需复杂的软件安装。使用 JavaScript 和 Three.js 库，可以轻松构建 3D 可视化场景，实现流畅的实时渲染。这种方法的核心优势在于跨平台兼容性和即时反馈，用户可以拖拽调整初始条件，观察系统演化。 n-body 模拟的基本观点是模拟多个天体在万有引力下的运动。对于三体问题，由于缺乏解析解，必须依赖数值积分。核心计算遵循牛顿万有引力定律：每个天体 i 受到其他天体 j 的引力 F_{ij} = G m_i m_j / r_{ij}^2，其中 G 为引力常数，r_{ij} 为距离。为了避免数值奇异（天体过近时），引入软化参数 ε，使公式变为 F = G m_i m_j / (r^2 + ε^2)。加速 a_i = sum F_{ij} / m_i，然后使用积分方法更新位置和速度。 证据显示，这种 O(N^2) 计算对于 N=3 非常高效，在现代浏览器中可轻松达到 60 FPS。Velocity Verlet 积分方法被广泛采用，因为它是辛积分器，能更好地保持能量守恒。相比 Euler 方法，Verlet 在长时模拟中能量漂移小于 1%。例如，在一个预设的 Figure-8 轨道中，使用 Verlet 可维持周期性运动数千步，而不显著衰减。 在 Three.js 中集成这些计算，首先创建场景、相机和渲染器。每个天体表示为 SphereGeometry 的 Mesh，使用 PointLight 或 BasicMaterial 渲染。轨道可视化通过 LineSegments 绘制历史路径，使用 BufferGeometry 存储位置点。交互支持通过 OrbitControls 实现相机旋转，鼠标拖拽天体调整初始状态。渲染循环使用 requestAnimationFrame，每帧更新物理后同步位置到 Mesh，并绘制新轨迹段。 碰撞检测是三体模拟的关键扩展，因为混沌轨道常导致近距离遭遇。简单实现检查每对天体距离 d_{ij} < r_i + r_j 时触发碰撞。对于弹性碰撞，可计算相对速度和法向量，应用冲量 j = (1 + e) (v_rel · n) / (1/m_i + 1/m_j)，其中 e 为恢复系数（0 为完全非弹性）。或者，为简化，合并质量 m_new = m_i + m_j，位置为质心。证据表明，对于教育模拟，非弹性合并更直观，避免复杂反弹计算。 可落地参数清单如下： - 引力常数 G = 1（归一化单位，便于调整尺度）。 - 软化参数 ε = 0.01 * 平均天体半径，防止爆炸。 - 时间步长 dt = 0.01（平衡精度与性能；若漂移 >5%，减至 0.005）。 - 天体质量 m = [1, 1, 1]（等质量三体）；半径 r = 0.05。 - 碰撞阈值：d < 2r 时合并；恢复系数 e = 0.8 若需反弹。 - 积分方法：Velocity Verlet，公式：v_{t+dt/2} = v_t + (dt/2) a_t; x_{t+dt} = x_t + dt v_{t+dt/2}; a_{t+dt} = force(x_{t+dt}); v_{t+dt} = v_{t+dt/2} + (dt/2) a_{t+dt}。 - 性能监控：总能量 E = sum (0.5 m v^2 - G m_i m_j / r_{ij})，漂移 |ΔE / E0| < 1% 为绿灯。 - 渲染优化：限制轨迹历史 10000 点，使用 LOD（Level of Detail）对于远距离天体简化渲染。 这些参数在浏览器中经测试有效，例如初始条件：体1 (0,0,0,0,0,1)，体2 (1,0,0,0,-0.5,0.5)，体3 (-1,0,0,0,0.5,0.5)，可产生稳定环绕轨道。风险包括数值不稳定，若 dt 过大导致能量爆炸；解决方案为自适应 dt 或切换 RK4 方法（短期高精度，但长期相位误差）。 进一步优化，集成 Web Workers 分离物理计算，避免阻塞主线程渲染。对于碰撞可视化，在检测到事件时添加粒子效果或颜色变化。监控要点：FPS >30，能量漂移实时显示在 UI 中，若超阈值提示调整参数。 总之，这种实现不仅演示了三体问题的混沌美学，还提供工程化参数供开发者复现。资料来源包括 Trisolarchaos 的交互模拟器，该模拟器使用 Velocity Verlet 积分方法，提供优异的能量守恒；以及 Three.js 官方文档中关于 BufferGeometry 和 Controls 的示例。更多细节可参考 Cannon.js 库，若需高级刚体碰撞。 （字数约 950） ## 同分类近期文章 ### [Twenty CRM架构解析：实时同步、多租户隔离与GraphQL API设计](/posts/2026/01/10/twenty-crm-architecture-real-time-sync-graphql-multi-tenant/) - 日期: 2026-01-10T19:47:04+08:00 - 分类: [application-security](/categories/application-security/) - 摘要: 深入分析Twenty作为Salesforce开源替代品的实时数据同步架构、多租户隔离策略与GraphQL API设计，探讨现代CRM系统的工程实现。 ### [基于Web Audio API的钢琴耳训游戏：实时频率分析与渐进式学习曲线设计](/posts/2026/01/10/piano-ear-training-web-audio-api-real-time-frequency-analysis/) - 日期: 2026-01-10T18:47:48+08:00 - 分类: [application-security](/categories/application-security/) - 摘要: 分析Lend Me Your Ears耳训游戏的Web Audio API实现架构，探讨实时音符检测算法、延迟优化与游戏化学习曲线设计。 ### [JavaScript构建工具性能革命：Vite、Turbopack与SWC的架构演进](/posts/2026/01/10/javascript-build-tools-performance-revolution-vite-turbopack-swc/) - 日期: 2026-01-10T16:17:13+08:00 - 分类: [application-security](/categories/application-security/) - 摘要: 深入分析现代JavaScript工具链性能革命背后的工程架构：Vite的ESM原生模块、Turbopack的增量编译、SWC的Rust重写，以及它们如何重塑前端开发体验。 ### [Markdown采用度量与生态系统增长分析：构建量化评估框架](/posts/2026/01/10/markdown-adoption-metrics-ecosystem-growth-analysis/) - 日期: 2026-01-10T12:31:35+08:00 - 分类: [application-security](/categories/application-security/) - 摘要: 基于GitHub平台数据与Web生态统计，构建Markdown采用率量化分析系统，追踪语法扩展、工具生态、开发者采纳曲线与标准化进程的工程化度量框架。 ### [Tailwind CSS v4插件系统架构与工具链集成工程实践](/posts/2026/01/10/tailwind-css-v4-plugin-system-toolchain-integration/) - 日期: 2026-01-10T12:07:47+08:00 - 分类: [application-security](/categories/application-security/) - 摘要: 深入解析Tailwind CSS v4插件系统架构变革，从JavaScript运行时注册转向CSS编译时处理，探讨Oxide引擎的AST转换管道与生产环境性能调优策略。