大数跨境
0
0

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

用 SOLO Coder 搭建 3D 机器人项目 TRAE.ai
2025-11-27
4


本文作者:茉卷,TRAE 开发者用户


背景


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


从 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 中的不同状态,比如跑、跳舞等等


优化后 (输入提示词后,按下图的【星星】按钮即可优化)。




优化后提示词


上下滑动查看完整内容

开发一个基于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 键应该是左转,现在反了”,它马上就改对了。对于移动轨迹不明显的问题,它不光修正了,还主动加上了移动音效和地面轨迹线,想得挺周到。


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


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


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


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

【声明】内容源于网络
0
0
TRAE.ai
TRAE,The Real AI Engineer|字节跳动旗下的AI编程产品,你的专属AI开发工程师。欢迎在PC端官网直接下载,免费使用。
内容 350
粉丝 0
TRAE.ai TRAE,The Real AI Engineer|字节跳动旗下的AI编程产品,你的专属AI开发工程师。欢迎在PC端官网直接下载,免费使用。
总阅读232
粉丝0
内容350