待补充
trekhleb/self-parking-car-evolution
3/5
🧩 软硬件结合
已发布
项目简介
🧬 Training the car to do self-parking using a genetic algorithm
Self-Parking Car Evolution 是一个通过遗传算法训练汽车实现自动泊车的开源实验项目。项目的核心功能是在浏览器中模拟一个3D世界,让多辆汽车通过进化过程逐步学会自主泊车。其最大特点是整个进化过程完全在客户端运行,无需后端支持,用户可以直接在网页上观察从随机乱撞到精准入库的完整演变。项目技术栈以 React 和 TypeScript 为主,3D 场景使用 Three.js 配合 @react-three/fiber 构建,物理引擎则采用 Cannon.js 实现碰撞检测与力学模拟。遗传算法的核心代码不到500行,简洁高效,而约92%的代码量用于UI交互和3D模拟的细节呈现。该项目主要解决了如何用直观、可视化的方式理解遗传算法原理的问题。传统学习遗传算法往往停留在理论或枯燥的数据图表上,而本项目通过生动的3D动画和实时进化演示,让用户能亲眼看到“基因”如何通过选择、交叉和变异逐步优化泊车行为。适用场景包括:作为教学工具帮助初学者理解进化计算的核心概念;作为前端开发者学习 Three.js 与物理引擎集成的参考案例;以及作为遗传算法在路径规划或控制问题上的趣味性实验。用户还可以上传预训练检查点,或通过调试参数观察性能指标,进一步探索算法细节。
标签
项目特点
**纯前端进化模拟**:整个遗传算法训练过程完全在浏览器客户端运行,无需后端服务器支持
**3D可视化实时呈现**:使用Three.js构建3D场景,用户可以直观看到每一代汽车的泊车表现
**遗传算法驱动**:通过选择、交叉、变异等操作,让汽车种群逐步进化出泊车能力
**物理引擎加持**:集成Cannon.js实现碰撞检测和力学模拟,让泊车过程更真实
**简洁高效的核心代码**:遗传算法核心逻辑不到500行,易于理解和修改
**交互式UI**:提供控制面板,用户可以调整进化参数、观察实时数据
技术规格
| 编程语言 | TypeScript |
|---|---|
| 前端框架 | React |
| 3D渲染引擎 | Three.js + @react-three/fiber |
| 物理引擎 | Cannon.js |
| 核心算法 | 遗传算法(选择、交叉、变异) |
| 运行环境 | 现代浏览器(支持WebGL) |
| 后端依赖 | 无(纯前端) |
| 核心算法代码量 | < 500行 |
| 总代码量 | 约92%用于UI和3D模拟 |
项目资源
搜索资源
物料清单 (BOM)
| 物料名称 | 数量 | 参考价格 | 备注 |
|---|---|---|---|
| React | 1 | — | 前端框架 |
| TypeScript | 1 | — | 编程语言 |
| Three.js | 1 | — | 3D渲染 |
| @react-three/fiber | 1 | — | React与Three.js桥接 |
| Cannon.js | 1 | — | 物理引擎 |
| 遗传算法引擎 | 1 | — | 不到500行代码 |
| 3D场景渲染器 | 1 | — | 包含UI交互 |
| 汽车模型 | 多辆 | — | 进化种群 |
能力画像
**记忆与知识检索**:1/5 — 项目不涉及知识库或数据检索功能
**动手与操作**:2/5 — 用户主要通过浏览器观察和调整参数,无需硬件操作
**编程与算法**:4/5 — 核心遗传算法实现简洁,适合学习算法原理和TypeScript编程
**设计与建模**:3/5 — 涉及3D场景搭建和汽车模型设计,但模型相对简单
**实验与调试**:4/5 — 可调整进化参数、观察不同代际的表现,适合做算法实验
**协作与分享**:2/5 — 开源项目可Fork和PR,但协作流程简单
**学习与研究**:5/5 — 极佳的学习遗传算法和3D可视化的教学项目
**系统集成**:2/5 — 技术栈集成度较高,但整体系统规模较小
项目图库
视频
所需技能
基础TypeScript/JavaScript编程
了解React框架基本概念
对遗传算法有基本认识(选择、交叉、变异)
了解Three.js或3D渲染基础(非必需)
能够使用Git进行版本控制(非必需)
适用场景
学习遗传算法原理和实现的教学演示
前端开发者研究3D可视化与物理引擎集成
人工智能爱好者观察进化算法在模拟环境中的表现
开源项目贡献者参与算法优化或UI改进
技术博主或教育者制作算法可视化教程的素材