用 Trae 吃透掘金文章：从拉取 Demo 到跑起 Three.js 太阳能电场，AI 问出来的学习路径

前言

掘金上刷到一篇讲 Three.js 的文章，写得挺好，我就想把它内化成自己的东西。要内化，第一步总得先把文中的 demo 跑起来，看看它给的效果。搁以前弄这种下载的代码有些麻烦，要自己搭环境，很多时候还运行不起来，就只能自己按着代码逻辑去查看，没法通过调试的方式去看它是怎么跑的，全靠自己理解。这样看代码挺费劲，除非是非常必须弄懂的，我才会认真去抠，大部分文章也就停在看过而已。

这回有 Trae 就方便多了。它把文章拉下来存成 markdown，图片放到同一个目录；github 代码也是它拉下来、分析、跑起来的，我没自己搭环境，直接就看到文章里给的效果。分析代码结构、运行、排除错误，这些正是它擅长的，比我自己在本地搭要快。跑通以后我就接着往下问：怎么将 Three.js 使用到我的系统中，纯前端还是要后端配合。我还提出自己想做的东西，一片沙漠太阳能电场，清扫车按固定线路清洗太阳能板，要求就一条条跟它讲。它改得不满意，我就让它重来，弄了不少回才定下来。这篇记的就是前面这两段，缘起和生成我的系统。真正跑通之后，我还是想把这套东西集成到我自己的代码系统里去，这部分等有空了我再写后续。

一、缘起

从掘金网上看到一篇非常不错的文章，想内化成自己的。首先要做的是将demo跑起来。还要将文档先download下来。

1.1 文章

juejin.cn/post/769573...

1.2 拉取文章

1.2.1 从掘金拉取

ini 复制代码

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帮忙分析一下。

python 复制代码

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 跑通，又不想在搭环境上花时间。第三章后端代码怎么接，等我实操完再写。