待补充 trekhleb/self-parking-car-evolution

3/5 🧩 软硬件结合 已发布
trekhleb 348 Stars 未知 BOM 完整度: 0/5 教程完整度: 0/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改进
技术博主或教育者制作算法可视化教程的素材