在 AI 的帮助下构建基于物理的角色控制器

先吐槽，我最近在咸鱼买了个surface book 1代笔记本，看有个Navida Gforce 1G独显，以为拿来跑个webGL 3d的没什么问题，结果呢，傻眼了，跑3d网页卡的要死，还不如CPUi i7 6600U 自带的那个Hd 520的核显，真是其挂了，更新最新的显卡驱动也没用，拉跨得很。

使用 AI、React Three Fiber、Three.js 和 Rapier 构建基于物理的角色控制器的幕后花絮。

创建第三人称角色控制器涉及的不仅仅是在 3D 场景中移动对象。逼真的运动、扎实的物理效果、响应式跳跃和动画混合对于打造精致的感觉至关重要。本文探讨了如何组装这些元素 — 不是通过传统的手动编码，而是通过使用 Bolt.new 的 AI 辅助开发，Bolt.new 是一种基于浏览器的 AI 辅助开发工具，可从自然语言提示生成 Web 代码，由 Claude 3.7 Sonnet 和 Claude 3.5 Sonnet LLM 提供支持。它提供了一个轻量级环境，开发人员可以在其中专注于描述功能，而不是编写样板。

对于这个角色控制器，Bolt 处理了设置物理、集成动画和管理输入系统等任务，从而可以更轻松地测试想法和快速迭代，而无需在工具之间切换或从头开始编写所有内容。

如果您想了解更多信息，请查看这篇关于 Codrops 的文章，该文章还探讨了该平台的功能，并展示了另一个完全使用 AI 构建的真实项目。

最终项目由 React Three Fiber、Three.js 和 Rapier 提供支持，展示了设计师或开发人员如何通过指导 AI 来创建复杂的交互式 3D 体验——专注于行为和结构，而不是语法。

第 1 步：使用 Capsule 和 Ground 设置物理 #

角色控制器从一个简单的设置开始：供玩家使用的胶囊碰撞体和要与之交互的地平面。Rapier 是一个在 WebAssembly 中构建的快速轻量级物理引擎，可处理重力、刚体动力学和碰撞。这构成了玩家移动和世界交互的基础。

选择胶囊形状是因为它在滑过表面和爬过小障碍物时的稳定性——这是实时游戏中的常见模式。

第 2 步：使用 GUI 进行实时调整 #

为了实现快速迭代和平衡游戏感，引入了可视化 GUI（使用 Leva.js）。此面板显示以下参数：

• 玩家移动速度
• 跳跃力
• 重力刻度
• Follow camera offset （跟随相机偏移）
• 调试切换

通过将其直接集成到体验中，开发人员可以实时调整控制器，而无需编辑或重新编译代码，从而加快测试和设计决策。

第 3 步：使用光线投射进行地面检测 #

光线投射用于检测播放器是否接地。这种简单而有效的检查可以防止角色在半空中跳跃或按顺序触发多次跳跃。

该逻辑在每一帧上执行，从胶囊碰撞器的底部向下投射一条光线。确认联系后，将启用跳转输入。此技术还允许在动画系统中 grounded 和 falling 状态之间平滑过渡。

第 4 步：将 Rigged 角色与动画状态集成 #

视觉角色使用通过 Mixamo 绑定的 GLB 模型，具有三个关键动画：Idle、Run 和 Fall。这些集成如下：

• GLB 角色作为胶囊碰撞体的子对象附加
• 动画状态根据速度和 grounded 状态动态切换
• 过渡通过动画混合进行处理，以获得自然的感觉

这种设置使视觉效果与物理保持同步，同时保留了对物理胶囊体的模块化控制。

第 5 步：世界构建和资产集成 #

环境在 Blender 中排列，然后导出为单个文件并导入到 bolt.new 项目场景中。这种方法允许高效的场景合成，同时保持资源管理的简单性。.glb

对于 Web，使用可将几何体和纹理捆绑在一起。为了保持性能，建议将纹理保持在 1024×1024 分辨率或其他 2 的平方幂大小（例如 256、512、2048）。这可确保最佳的 GPU 内存使用率和更快的跨设备加载时间。.glb

特别感谢 KayLousberg 提供用于原型设计的低多边形 3D 套件。

第 6 步：跨平台输入支持 #

该控制器旨在跨桌面、移动设备和游戏手柄平台无缝工作，所有这些都使用 AI 生成的逻辑通过 Bolt 构建。

使用 Gamepad API 添加了游戏手柄支持，允许玩家插入控制器并使用模拟输入进行游戏。

在桌面上，控制器使用标准键盘输入 （WASD 或箭头键） 和鼠标移动进行摄像机控制。

在移动设备上，AI 生成的代码启用了屏幕上的纵杆和跳跃按钮，使游戏完全兼容触摸。

所有输入类型都控制相同的物理驱动角色，确保跨设备的行为一致 - 无论您是在笔记本电脑、触摸屏还是游戏控制器上玩游戏。

这种跨平台支持完全通过自然语言提示实现，展示了 AI 如何将高级意图转化为工作输入系统。

AI 在工作流程中的作用 #

这款控制器的独特之处不在于机制，而在于过程。每个系统都是由 AI 通过描述性提示生成的，使开发人员能够更像创意总监而不是传统工程师。

AI 处理了样板、物理设置、动画切换逻辑 — 所有这些都基于明确的创意目标。这为原型设计和交互式设计打开了新的大门，其中迭代速度比语法更重要。

此角色控制器演示包括：

• 具有物理特性的胶囊碰撞器
• 通过光线投射进行接地检测
• 状态驱动的动画混合
• 用于调优的 GUI 控件
• 与静态/动态对象的环境交互
• 跨平台输入支持

它是创建基于浏览器的游戏、交互式体验或原型设计新想法的强大起点 - 所有这些都在 AI 的帮助下。