用 SOLO Coder 搭建 3D 机器人项目

本文作者：茉卷，TRAE 开发者用户

背景

做一个 虚拟机器人 项目，通过 控制面板 控制机器人在虚拟环境运行。

从 threejs 上找了一个现成的 js 代码的机器人，计划把它移植到自己的项目中，并添加交互控制功能。

参考示例：

threejs.org/examples/#w...

项目计划

• 移植示例中的机器人，支持各种动作状态

• 制作一个物理环境，可以让机器人在这个环境中运行 （吃金币，躲避障碍物）

使用 TRAE 的功能：

• SOLO Coder

• SOLO Coder Plan

• 提示词优化

1 机器人移植 + 虚拟环境 实现

写一个提示词，让 SOLO 完成移植，然后创建一个虚拟环境，机器人可以在里面行动

优化前

现在需要开发一个threejs 的 vite react 项目。 你需要先移植https://threejs.org/examples/#webgl_geometry_terrain_raycast ： 中的 机器人，它的参考代码https://github.com/mrdoob/three.js/blob/dev/examples/webgl_animation_skinning_morph.html
这个机器人需要支持demo 中的 状态（states）和 emotes 然后，你需要设计一个geometry 地理环境，让用户可以控制 机器人进行 states 中的不同状态，比如跑、跳舞等等

优化后 （输入提示词后，按下图的【星星】按钮即可优化）。

优化后提示词

开发一个基于Three.js的Vite React项目，需要完成以下具体任务：

1. 机器人模型移植：
   - 从中提取机器人模型及其动画系统
   - 参考中的实现代码进行移植
   - 确保完整保留机器人所有的states状态和emotes表情功能

2. 地理环境设计：
   - 创建适合机器人活动的3D几何环境
   - 实现地形碰撞检测和物理交互
   - 设计合理的空间布局以支持各种动作展示

3. 交互控制系统：
   - 开发用户界面控制面板
   - 实现状态切换功能（跑、跳舞等预设动作）
   - 添加流畅的动画过渡效果
   - 确保移动设备兼容性

4. 技术要求：
   - 使用Vite构建工具配置Three.js+React环境
   - 优化模型加载性能
   - 实现响应式设计适配不同屏幕尺寸
   - 添加必要的错误处理和加载状态指示

5. 交付标准：
   - 完整可运行的演示项目
   - 所有源代码和资源文件
   - 项目文档说明运行和构建方法
   - 性能优化报告

Solo Coder 然后给出了详细的开发计划和任务分解。

移植机器人行动：一次过 ✅

代码规模：14 个文件，452 行代码。

功能状态： 各项功能基本 OK，一次通过！

效果演示

2 控制面板和环境优化

优化前提示词

机器人主页中，当用户点击鼠标左键，移动鼠标时，应该可以移动视角，从不同角度观察机器人，当使用鼠标滚轮时，应该扩大或者缩放视角。 机器人需要支持 wsad 进行前进后退，左转，右转。（注意，左转、右转是转身，调整机器人的方向）

优化后

在机器人主页的3D交互场景中，实现以下完整的视角控制功能：

1. 鼠标控制视角：
   - 左键拖动控制：当用户按住鼠标左键并移动时，摄像机应围绕机器人进行轨道旋转（Orbit Control），从不同角度观察机器人模型
   - 滚轮缩放控制：使用鼠标滚轮时，应平滑地放大或缩小视角，设置合理的缩放范围（建议0.5-5倍），并添加阻尼效果

2. 键盘控制移动：
   - WASD键位控制：
     * W键：机器人沿当前朝向前进
     * S键：机器人沿当前朝向后退
     * A键：机器人向左旋转（Y轴旋转，非平移）
     * D键：机器人向右旋转（Y轴旋转，非平移）
   - 移动特性：
     * 移动速度应可配置（默认0.1单位/帧）
     * 旋转速度应可配置（默认1度/帧）
     * 实现惯性效果和运动平滑

3. 技术要求：
   - 使用requestAnimationFrame实现流畅的动画
   - 添加移动和旋转的边界限制
   - 支持移动设备触摸事件适配（可选）
   - 所有控制参数应可通过配置文件调整

4. 性能优化：
   - 实现防抖处理防止过度触发
   - 添加移动和旋转的状态指示器（调试用）
   - 确保在低帧率情况下的控制稳定性

5. 测试要求：
   - 验证所有控制组合下的行为正确性
   - 测试边界条件下的表现
   - 检查不同DPI设备下的控制灵敏度

功能一次过：小 BUG ✅

发现的问题：

• A 键：期待左转，实际右转
• D 键：期待右转，实际左转
• 移动效果不明显，需要优化场地

3 优化机器人行动和环境

优化前

机器人的转向需要优化，a 应该是向左转，实际是向右转了；D 应该是向右转，实际效果是向左转了。场地是绿色，机器人移动后，移动的距离不明显，有什么办法可以改善？

优化后

优化机器人转向控制和移动可视性的具体方案：

1. 转向控制修正：
- 重新映射转向指令：
  * 将按键"A"的转向逻辑从右转修正为左转
  * 将按键"D"的转向逻辑从左转修正为右转
- 实现精确的角度控制：
  * 设置标准转向角度为90度/次
  * 添加转向加速度控制，确保平滑转向

2. 移动轨迹可视化增强：
- 在绿色场地上添加高对比度轨迹标记：
  * 使用亮黄色或白色轨迹线（RGB 255,255,0 或 255,255,255）
  * 轨迹线宽度设置为5cm
- 实现实时轨迹记录：
  * 每0.5秒记录一次机器人位置
  * 用不同颜色显示新旧轨迹（如红色表示最新轨迹）

3. 运动反馈系统：
- 添加转向指示灯：
  * 左转时左侧LED亮蓝色
  * 右转时右侧LED亮红色
- 集成距离传感器反馈：
  * 每移动10cm触发一次声音提示
  * 在控制界面显示实时移动距离（精确到0.1cm）

4. 测试验证方案：
- 转向测试：
  * 执行10次连续左转/右转测试，验证转向一致性
  * 测量实际转向角度与指令角度的偏差（应<2度）
- 移动测试：
  * 在5m距离内测试轨迹直线度（偏差应<3cm）
  * 验证轨迹在不同光照条件下的可见性

结果：一次通过 ✅

改进内容：

• ✅ 更正了转向方向

• ✅ 添加了移动音效

• ✅ 添加了路线轨迹提示

4 增加障碍物、金币

优化前

增加三个障碍物 和 2 个金币。 机器人接触金币后，给出提示词音；机器人碰到障碍物后，给出提示音。金币需要给出坐标。

优化后

在游戏场景中实现以下功能增强：

1. 障碍物系统：
   - 新增3个障碍物对象，需均匀分布在游戏场景的不同区域
   - 每个障碍物应具有碰撞检测功能
   - 当机器人碰撞到障碍物时，立即播放预设的提示音效（如"碰撞.wav"）
   - 障碍物需有可视化的表现形式（如红色立方体）

2. 金币系统：
   - 新增2个金币对象，需明确指定坐标位置（如金币1坐标(x1,y1,z1)，金币2坐标(x2,y2,z2)）
   - 每个金币应具有碰撞检测和收集功能
   - 当机器人接触金币时：
     * 播放预设的收集音效（如"金币.wav"）
     * 在游戏界面显示"金币收集成功"的提示信息
     * 金币对象从场景中消失
   - 金币需有可视化的表现形式（如金色球体）

3. 实现要求：
   - 所有碰撞检测需使用物理引擎精确计算
   - 音效播放需支持同时多音源播放
   - 坐标系统需使用世界坐标系
   - 代码需添加注释说明关键逻辑

实现结果

金币和障碍物一次生成成功，但遇到以下问题，经过 8 轮对话修复：

• 金币无法正常显示（会被地表遮盖）、收集

• 障碍物可以被穿透

最终效果： 全部功能正常运行 ✅

使用体验总结

用 SOLO Coder 的整体感觉就俩字：省心。

"抄作业"能力一流

只需要甩给它两个 Three.js 官网的链接（一个效果页，一个源代码页），它就能自己看懂代码，把带各种动作的机器人原封不动地"搬"到本地的 Vite + React 项目里。

核心功能基本"一次过"

最让我惊喜的是，很多复杂功能它第一次尝试就能跑通：

• 把机器人模型和动画移植过来，一次成功。
• 做那个用鼠标拖拽旋转视角、滚轮缩放、键盘 WSAD 控制移动的交互面板，也基本没出大问题。

这就省下了大量的基础调试时间。

能听懂人话，修 Bug 效率高

当然也有小插曲，比如：

• 一开始按 A 键机器人往右转，按 D 键往左转，方向反了。
• 机器人在绿地上移动，看不出来动了多远。

我跟它说"A 键应该是左转，现在反了"，它马上就改对了。对于移动轨迹不明显的问题，它不光修正了，还主动加上了移动音效和地面轨迹线，想得挺周到。

做复杂功能时，需要多点耐心

在往后加"金币"和"障碍物"时，遇到点麻烦。比如金币生成在地底下了，或者机器人能直接穿过障碍物。这些问题不像改个按键那么简单，我们来回沟通了七八次，才把碰撞检测和物体位置都调对。

这说明在处理更复杂的物理交互时，它可能需要更明确的指令和多轮调试，不能指望一次就完美。

一句话总结： 用它来快速搭建原型、实现标准功能或者验证想法，绝对是个神器，能让你事半功倍。