我肝了一周，用Three.js创建了一个"掘金城市"
“肝”货？
先看最终效果
数据来源
2021我在掘金写了多少篇文章？
我很想知道我这一年究竟在掘金写了多少篇文章，每篇文章多少赞。但掘金没有提供以年为单位的接口。不得已呢，我只好使用文章列表接口去遍历，一旦发现创建时间早于2021年1月1日 0时0分0秒的文章则结束遍历，以此来获得今年我发布的全部文章。
//获取指定指针位置的10篇文章 function getArticles(uid,cursor='0'){ const res = await uniCloud.httpclient.request("https://api.juejin.cn/content_api/v1/article/query_list",{ data:{ "cursor": cursor, "sort_type": 2, "user_id": uid }, headers:{ "Content-Type":"application/json" }, method:"POST", dataType:"json" }) return res.data.data; } //获取文章直到xx时间戳 function getArticlesAfter(uid,unixtime){ let dataByYear = {}; let cursor = 0; async function getNextArticles(){ let res = await getArticles(uid,cursor); console.log(res); if(!res)return dataByYear; let getTheLast = false; for(let i = 0;i<res.length;i++){ var article_item = res[i]; //发现小于时间戳的文章则停止遍历 if(article_item.article_info.ctime<unixtime){ console.log('结束了，去年最后一篇是：'); console.log(article_item.article_info.title); getTheLast=true; break; }else{ //发现文章的时间晚于2021年12月31日的话则跳过 //2022年还有人访问这个接口，不至于出问题 if(article_item.article_info.ctime>1640966400)continue; var cDate = new Date(parseInt(article_item.article_info.ctime)*1000); var month = cDate.getMonth(); if(!dataByYear[month])dataByYear[month]=[]; //用不了那么多字段，重新梳理数据结构 var sItem = { title:article_item.article_info.title, author_name:article_item.author_user_info.user_name, article_id:article_item.article_info.article_id, view_count:article_item.article_info.view_count, digg_count:article_item.article_info.digg_count, comment_count:article_item.article_info.comment_count, ctime:article_item.article_info.ctime } dataByYear[month].push(sItem); } } cursor+=res.length; if(!getTheLast)return getNextArticles(); else return dataByYear; } return getNextArticles(); }
然后把所有文章按照月份重新组织数据，最终数据结构如下：
这个接口我也提供给大家，如果你不满意我的表现形式，也可以自己处理这些数据。
但我不保证接口长期有效哦！
https://e0b75de1-90c7-4c11-9d12-a8bc84c4d081.bspapp.com/http/jjskyline?uid=你的掘金uid
数据的表现形式
原本我是打算直接照抄 skyline.github.com
结果光一个底座，我就折腾了大半天，完全完全没想到在Three.js里画一个立体梯形结构体还挺麻烦。
最后请教了webgl大佬，他教我用bufferGeometry，需要把梯形体所有的点计算出来，一个梯形体不过8个点，还好算。
囧的是，就在我最后画出来梯形体的时候，我发现打不上光。
因为要接受光照信息，还得计算全部的顶点法线...
头秃！由于代码太长，并且最后也没用上梯形体，我就不贴代码了。
另外，我发现github skyline的表现形式其实也并不适合呈现掘金全年文章数据。
所以干脆原创一个吧！
这是为掘金社区定制的
喂，有没有人买个单呐？
好吧，没有人
就当我闲得蛋疼吧
看着还不赖吧~当然一开始它也不是长这样的，为了让整个城市看起来更“美观”，我可真是揪光了头发。边开发边设计边直播...尝试了各种布局
- 初版
一开始，我为创建城市设定了以下基本规则
1、每个月是一个区块，一共4x3。 2、每篇文章是一个建筑物，每月最多显示30篇。 3、文章的赞越多则建筑物越高。
然后我发现有一些文章的点赞数据确实太少了，原封不动的照数据画出来，并不好看。
- 第二版
接着我设定了创建城市的基本规则2.0
4、建筑物的单层面积由当月文章数量决定。 5、区块内建筑物的排布根据当月文章数量决定。 6、区块内所有建筑物的整体区域与区块面积居中。 7、建筑物的高度有一个基数，确保不会出现太矮的。 复制代码
现在是不是舒服多了，错落有致，大小不一，但又很整齐。只是当月份是奇数时，最后孤单的建筑让整体看上去不太舒服，所以继续升级。
- 第三版
创建城市的基本规则3.0
8、区块内建筑物的如果是奇数，最后一个宽度加倍，填满空间
现在看上去是不是舒服多了？
但是，也叫城市，怕不是个芯片样板？
恰好，网抑云里正在播放一首歌，歌词是这样的
这城市那么空 这回忆那么凶 这街道车水马龙 我能和谁相拥
咦，街道！ 城市那必须得有街道呀！
- 第四版
纯手绘街道贴图，每一个像素都是我用鼠标在PS里画出来的。
我真是闲得蛋疼，again！
TADA！是不是有点感觉了？做到这，我发量已经告急了！
- 第五版
城里哪有那么清澈的空气！
加点雾(mai)吧~
scene.fog = new THREE.Fog(0xffffff, 0.01, 6);
- 第六版
就在我觉得大功告成的时候，我测试一下 @大圣老师 的账号数据。
嗯，绿化面积很大，证明了他真是摸鱼摸到Lv5的。
得给他整得难看点，谁叫他不写文章的（此句优弧非要加上）
好吧，没有文章的月份就弄一个工地的贴图把
你看看
城乡结合部的既视感是不是就出来了
- 第7版（未遂）
方块城市没有感觉，干脆加点建筑物模型吧。我随即打开unity3d的assetsstore
这一套模型太好看了，太合适了吧！
竟然只要9.99！
买它！买它！买它！
就在我准备下单支付的时候
告别unity3d吧，瞧不起我mainland是怎么滴？
不买了~
就这样吧！没头发揪了~
开发的最后
其实整个原创设计的开发过程远远不止7版，最近几天我都一直在小破站直播写这个小网页，很多朋友是见证了这个开发过程的。
当我还想继续摸鱼，开发这些没用的东西的时候。
被掘金张哥来催稿了
算了，就开发到这吧...
还是努力写专栏吧~
