我肝了一周，用Three.js創(chuàng)建了一個"掘金城市"

“肝”貨？

先看最終效果

數(shù)據(jù)來源

2021我在掘金寫了多少篇文章？

我很想知道我這一年究竟在掘金寫了多少篇文章，每篇文章多少贊。但掘金沒有提供以年為單位的接口。不得已呢，我只好使用文章列表接口去遍歷，一旦發(fā)現(xiàn)創(chuàng)建時間早于2021年1月1日 0時0分0秒的文章則結束遍歷，以此來獲得今年我發(fā)布的全部文章。

//獲取指定指針位置的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???var?article_item?=?res[i];
???
????????????????????????//發(fā)現(xiàn)小于時間戳的文章則停止遍歷
???if(article_item.article_info.ctime????console.log('結束了，去年最后一篇是：');
????console.log(article_item.article_info.title);
????getTheLast=true;
????break;
???}else{
????????????????????????????????//發(fā)現(xiàn)文章的時間晚于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]=[];
????
????????????????????????????????//用不了那么多字段，重新梳理數(shù)據(jù)結構
????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();
}

然后把所有文章按照月份重新組織數(shù)據(jù)，最終數(shù)據(jù)結構如下：

這個接口我也提供給大家，如果你不滿意我的表現(xiàn)形式，也可以自己處理這些數(shù)據(jù)。

但我不保證接口長期有效哦！

https://e0b75de1-90c7-4c11-9d12-a8bc84c4d081.bspapp.com/http/jjskyline?uid=你的掘金uid

抽獎啦！

原來2021年，我在掘金社區(qū)一共寫了39篇文章，多次獲獎無數(shù)，不知不覺間竟收獲了如此多的掘金周邊禮品！

現(xiàn)在我要把這些周邊禮品統(tǒng)統(tǒng)送出去！不試試怎么知道你是分母還是分子呢？

數(shù)據(jù)的表現(xiàn)形式

原本我是打算直接照抄 skyline.github.com

結果光一個底座，我就折騰了大半天，完全完全沒想到在Three.js里畫一個立體梯形結構體還挺麻煩。

最后請教了webgl大佬，他教我用bufferGeometry，需要把梯形體所有的點計算出來，一個梯形體不過8個點，還好算。

囧的是，就在我最后畫出來梯形體的時候，我發(fā)現(xiàn)打不上光。

因為要接受光照信息，還得計算全部的頂點法線...

頭禿！由于代碼太長，并且最后也沒用上梯形體，我就不貼代碼了。

另外，我發(fā)現(xiàn)github skyline的表現(xiàn)形式其實也并不適合呈現(xiàn)掘金全年文章數(shù)據(jù)。

所以干脆原創(chuàng)一個吧！

這是為掘金社區(qū)定制的

喂，有沒有人買個單吶？

好吧，沒有人

就當我閑得蛋疼吧

看著還不賴吧~當然一開始它也不是長這樣的，為了讓整個城市看起來更“美觀”，我可真是揪光了頭發(fā)。邊開發(fā)邊設計邊直播...嘗試了各種布局

• 初版

一開始，我為創(chuàng)建城市設定了以下基本規(guī)則

1、每個月是一個區(qū)塊，一共4x3。
2、每篇文章是一個建筑物，每月最多顯示30篇。
3、文章的贊越多則建筑物越高。

然后我發(fā)現(xiàn)有一些文章的點贊數(shù)據(jù)確實太少了，原封不動的照數(shù)據(jù)畫出來，并不好看。

• 第二版

接著我設定了創(chuàng)建城市的基本規(guī)則2.0

4、建筑物的單層面積由當月文章數(shù)量決定。
5、區(qū)塊內(nèi)建筑物的排布根據(jù)當月文章數(shù)量決定。
6、區(qū)塊內(nèi)所有建筑物的整體區(qū)域與區(qū)塊面積居中。
7、建筑物的高度有一個基數(shù)，確保不會出現(xiàn)太矮的。

現(xiàn)在是不是舒服多了，錯落有致，大小不一，但又很整齊。只是當月份是奇數(shù)時，最后孤單的建筑讓整體看上去不太舒服，所以繼續(xù)升級。

• 第三版

創(chuàng)建城市的基本規(guī)則3.0

8、區(qū)塊內(nèi)建筑物的如果是奇數(shù)，最后一個寬度加倍，填滿空間

現(xiàn)在看上去是不是舒服多了？

但是，也叫城市，怕不是個芯片樣板？

恰好，網(wǎng)抑云里正在播放一首歌，歌詞是這樣的

這城市那么空

這回憶那么兇

這街道車水馬龍

我能和誰相擁

咦，街道！ 城市那必須得有街道呀！

• 第四版

純手繪街道貼圖，每一個像素都是我用鼠標在PS里畫出來的。

我真是閑得蛋疼，again！

TADA！是不是有點感覺了？做到這，我發(fā)量已經(jīng)告急了！

• 第五版

城里哪有那么清澈的空氣！

加點霧(mai)吧~

scene.fog?=?new?THREE.Fog(0xffffff,?0.01,?6);

• 第六版

就在我覺得大功告成的時候，我測試一下 @大圣老師 的賬號數(shù)據(jù)。

嗯，綠化面積很大，證明了他真是摸魚摸到Lv5的。

得給他整得難看點，誰叫他不寫文章的（此句優(yōu)弧非要加上）

好吧，沒有文章的月份就弄一個工地的貼圖把

你看看

城鄉(xiāng)結合部的既視感是不是就出來了

• 第7版（未遂）

方塊城市沒有感覺，干脆加點建筑物模型吧。我隨即打開unity3d的assetsstore

這一套模型太好看了，太合適了吧！

竟然只要9.99！

買它！買它！買它！

就在我準備下單支付的時候

告別unity3d吧，瞧不起我mainland是怎么滴？

不買了~

就這樣吧！沒頭發(fā)揪了~

開發(fā)的最后

其實整個原創(chuàng)設計的開發(fā)過程遠遠不止7版，最近幾天我都一直在小破站直播寫這個小網(wǎng)頁，很多朋友是見證了這個開發(fā)過程的。

當我還想繼續(xù)摸魚，開發(fā)這些沒用的東西的時候。

被掘金張哥來催稿了

算了，就開發(fā)到這吧...

還是努力寫專欄吧~

就在我準備奮筆疾書的時候

我想了下，我好像還沒有和掘金確定合作呀：（

嗯，那怎么就【被打工】了

體驗地址

沒做移動端適配，請用電腦訪問

http://ezshine.jnsii.com/juejincity/?uid=2955079655898093

uid改成你自己的掘金uid即可看到你的掘金之城