用 Trae 吃透掘金文章：从拉取 Demo 到跑起 Three.js 太阳能电场，AI 问出来的学习路径
前言
掘金上刷到一篇讲 Three.js 的文章，写得挺好，我就想把它内化成自己的东西。要内化，第一步总得先把文中的 demo 跑起来，看看它给的效果。搁以前弄这种下载的代码有些麻烦，要自己搭环境，很多时候还运行不起来，就只能自己按着代码逻辑去查看，没法通过调试的方式去看它是怎么跑的，全靠自己理解。这样看代码挺费劲，除非是非常必须弄懂的，我才会认真去抠，大部分文章也就停在看过而已。
这回有 Trae 就方便多了。它把文章拉下来存成 markdown，图片放到同一个目录；github 代码也是它拉下来、分析、跑起来的，我没自己搭环境，直接就看到文章里给的效果。分析代码结构、运行、排除错误，这些正是它擅长的，比我自己在本地搭要快。跑通以后我就接着往下问：怎么将 Three.js 使用到我的系统中，纯前端还是要后端配合。我还提出自己想做的东西，一片沙漠太阳能电场，清扫车按固定线路清洗太阳能板，要求就一条条跟它讲。它改得不满意，我就让它重来，弄了不少回才定下来。这篇记的就是前面这两段，缘起和生成我的系统。真正跑通之后，我还是想把这套东西集成到我自己的代码系统里去，这部分等有空了我再写后续。
一、缘起
从掘金网上看到一篇非常不错的文章，想内化成自己的。首先要做的是将demo跑起来。还要将文档先download下来。
1.1 文章
1.2 拉取文章
1.2.1 从掘金拉取
https://juejin.cn/post/7695732727548280872?share_token=ebb3dbab-89fa-45cd-8e93-f64a6733b6a7 这个网页先拉取后保存在 doc\ 以标题命名.md，图片放 images 中
1.2.2 图像目录有误
你是不是傻，images肯定和md在同一目录呀
1.3 拉取代码
1.3.1 从github拉取
先分析拉取代码，里面好像有github，代码拉下来，跑起来，让我看下文章中给的效果
1.3.2 自己下载
github下载代码还是有点问题的，有时就是下载不了，我手动下载zip，让trae帮忙分析一下。
screen-demo-master.zip 是我手动下载的，你看一下，验证一下，代码是否正确
1.4 运行代码
以前要学习下载的代码，要自己搭建环境，有时不挺麻烦的，只能自己看不能运行的代码，这样效率要低很多。现在好了，可以凭借ai工具。分析一下代码结构，并运行，看一下效果。这就是使用ai工具的强势，可以自己排除错误，有时我们自己下载源码跑不直来是很正常的，查找原因也是要花很多时间的。
1.5 分析代码
分析代码，这一块也正是ai所擅长的。
分析一下代码，如果我要也编写类似的功能，具体怎么做
二、生成我的系统
2.1 怎么使用到我的系统
怎么将Three.js使用到我的系统中,完全是前端侧？还是要后端配合，怎么配合。
如果我想用Three.js做一个太阳能电场，再画N辆车在里面运行。设计思路
2.2 画一个沙漠上的太阳能电场
2.2.1 画一个太阳能电场和清扫车
在此代码基础上，画一个沙漠太阳能电场
1、太阳能板按规则排放，统一规则，就是整齐的排放，毕竟在沙漠上，地方大
2、清扫车是使用车上的水来冲的，我可以放一些车辆照片，对照着画一个
3、车辆也不是乱跑的，里面有一些固定线路。
info中有些照片和视频，可以参照画出车辆，太阳能电板的编排不从网上找一下。先做模拟，一车按固定线路清扫。
先完成此功能
2.2.2 自己画太假，给些资料
这也太假了吧，起码是两张图，一张是真实的太阳能电场照片，另一张进入后，局部特定。也要像个真的太阳能电场吧。
我在info中放了几张照片，参照一下。大图，就是整个电场，可以点击查看，然后进入详细图，也要能看清车和完整的一排太阳能电板吧。
2.2.3 等得太久了
亲，为什么这么久没动静呢
为什么还是这种垃圾？我给的图片根本就没用上？这样，搞少一点，就一排，车也要清晰。我要的是清晰的像视频中一样，清洗太阳能电板。大图像5.jiff 一样，但不用那么远，要近一点。
2.2.4 比例问题
总体效果还不错的，不过比例还是有问题的。
大哥，你这是太阳通用电板啊？不能在网上查一下尺寸吗？太阳能板和车比例要查一下，不是你这样的，没那么小的。
2.3 确实在不断进步
确实在不断进步
2.4 大体上认可
现在基本上没太多问题，先这样，要将整体做好。
这个先这样吧，现在的算钻进来的画面。
要花太阳能电场的情况，尺寸要尽可能真实。还要留路
没做完就停了吧，接着做啊，规划线路，不停清扫，不是只清扫一块
现在基本满意。
2.5 录段gif
给我这个录一段gif。先大图远景这样跑，然后下钻，近景跑一段
不知道为什么，最近总是会断掉。
你在录吗？
2.6 录段视频吧
2.6.1 改录视频
gif 不太清楚，所以先录段视频再转 gif 吧。
要不这样，要不写一段代码导出高清视频，要求和前面一样，前面gif太不高清了。
2.6.2 不下钻拐弯
下钻不会看一下，拐过弯再下钻不就可以了，不过现在拐弯要好一点了，还是不要拐弯
2.7 将视频转gif
能将这个视频 solar-clean.mp4 生成一个gif吗？原件要保留
看下效果。
小结
这一趟走下来，一篇文章从看过了到跑通了，再接着我自己的需求往下做，中间提要求、返工都免不了。以前搭环境、跑代码、查报错要磨掉的那些时间，这回基本没花。
中间返工不少。它自己画的第一版太假，我放在 info 里的照片视频它也没用上，太阳能板和车的比例也不对，我让它先去查真实尺寸，把要求一条条讲明白，它才改得像样。也有等半天没动静、没做完就自己停下的时候，这种得我去追一句。录效果那段也是来回改：先录 gif 录断了，又嫌 gif 不高清，让它写代码导出视频，下钻、拐弯这些要求也是一条条加的，最后拿视频转成 gif，原件还留着。
这套流程适合跟我一样的人：看到不错的文章，想快点把 demo 跑通，又不想在搭环境上花时间。第三章后端代码怎么接，等我实操完再写。
