背景
做一个 虚拟机器人 项目,通过 控制面板 控制机器人在虚拟环境运行。
从 threejs 上找了一个现成的 js 代码的机器人,计划把它移植到自己的项目中,并添加交互控制功能。
参考示例:
https://threejs.org/examples/#webgl_geometry_terrain_raycast
项目计划
移植示例中的机器人,支持各种动作状态
制作一个物理环境,可以让机器人在这个环境中运行 (吃金币,躲避障碍物)
使用 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 中的不同状态,比如跑、跳舞等等
优化后 (输入提示词后,按下图的【星星】按钮即可优化)。
优化后提示词
上下滑动查看完整内容
Solo Coder 然后给出了详细的开发计划和任务分解。
移植机器人行动:一次过 ✅
代码规模:14 个文件,452 行代码。
功能状态: 各项功能基本 OK,一次通过!
效果演示
2 控制面板和环境优化
优化前提示词
机器人主页中,当用户点击鼠标左键,移动鼠标时,应该可以移动视角,从不同角度观察机器人,当使用鼠标滚轮时,应该扩大或者缩放视角。 机器人需要支持 wsad 进行前进后退,左转,右转。(注意,左转、右转是转身,调整机器人的方向)
优化后
上下滑动查看完整内容
功能一次过:小 BUG ✅
发现的问题:
A 键:期待左转,实际右转
D 键:期待右转,实际左转
移动效果不明显,需要优化场地
3 优化机器人行动和环境
优化前
机器人的转向需要优化,a 应该是向左转,实际是向右转了;D 应该是向右转,实际效果是向左转了。场地是绿色,机器人移动后,移动的距离不明显,有什么办法可以改善?
优化后
上下滑动查看完整内容
结果:一次通过 ✅
改进内容:
✅ 更正了转向方向
✅ 添加了移动音效
✅ 添加了路线轨迹提示
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 键应该是左转,现在反了”,它马上就改对了。对于移动轨迹不明显的问题,它不光修正了,还主动加上了移动音效和地面轨迹线,想得挺周到。
做复杂功能时,需要多点耐心
在往后加“金币”和“障碍物”时,遇到点麻烦。比如金币生成在地底下了,或者机器人能直接穿过障碍物。这些问题不像改个按键那么简单,我们来回沟通了七八次,才把碰撞检测和物体位置都调对。
这说明在处理更复杂的物理交互时,它可能需要更明确的指令和多轮调试,不能指望一次就完美。
一句话总结:用它来快速搭建原型、实现标准功能或者验证想法,绝对是个神器,能让你事半功倍。

