「时光不负，创作不停，本文正在参加2021年终总结征文大赛」

---

大家好，我是掘金收割鸡本🐔...

太招人恨了，重来~重来，大家好！

我叫大帅，一个老程序猿。本文会在评论中抽一个幸运鹅获得掘金周边鼠标垫1份。

特别感谢

在此要先感谢一个人，那就是 @大圣。如果没有他在HR面前力保我（面试前我还不认识大圣），我恐怕很难在37岁高龄，仅凭一个高中学历再次步入职场。如果没有他在团队里的鼓励，我恐怕也不会这么积极的写文章，从而获得成就感满足感，继而致力成为技术内容的终身创作者。

感谢优弧，船长，小帅，村长，老夏，小蝴蝶，倩姐，思宇，Alex，SSH，秋风，Coco，Kagol，崔cxr，三元，winter等等【所有】在今年交流过的新老朋友，还请继续支持大帅哟。排名不分先后，如果漏写了也别生气，来找我请你吃羊腿

感谢完，先来点肝货吧！

我肝了一周，用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版，最近几天我都一直在小破站直播写这个小网页，很多朋友是见证了这个开发过程的。

当我还想继续摸鱼，开发这些没用的东西的时候。

被掘金张哥来催稿了

算了，就开发到这吧...

还是努力写专栏吧~

体验地址

没做移动端适配，请用电脑访问

ezshine.jnsii.com/juejincity/…

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

我的2021

时间过得真tmd快呀...

sorry，原谅我粗俗了，但不这么表述真的没有feel~

我们竟然和新冠疫情共存两年了，出门习惯了随身戴口罩，回家第一件事是洗手....

疫苗打了三针

往年换季总要感冒个2-3次

今年还没感冒过（好的不灵坏的灵，文章还没发，我似乎感冒了）

去年Flag的完成情况

去年的文章，《2020，疫情重创了我的第三次创业 | 掘金年度征文》。原标题是《从事前端16年四套房两辆车》，哈哈，你们看过这篇文章吗？

• 持续输出原创优质技术内容

这一年我在稀土掘金社区升级到了Lv.6，一共写了39篇原创文章，其中有两篇的点赞数都在短时间内破了2000+，这算是相当不错的成绩。

1. 《产品经理：你能不能用div给我画条龙？》2627赞
2. 《三种前端实现VR全景看房的方案！说不定哪天就用得上！》2738赞

• 文章类要努力写得更加系统，更加深入。

已经在写小册啦~

• 踊跃尝试视频类的技术内容。

我在小破站也发布了20几条技术视频教程，总计13w+的播放量。不过还没摸到小破站的G点，但心里差不多有数啦。

• 尝试技术内容的直播，甚至尝试下虚拟主播的形式。

都试了，继续干就完了。

• 努力成为一名合格的讲师

那必须合格了呀。

• 拥抱开源

2021的提交记录比以前多了不少，但跟很多大佬比差远了。

2021总结

我竟然都做到了？除了这些，我好像还做了不少事

• 猿创聚合助手小程序

一个帮助技术内容创作者聚合掘金、B站的小程序，还有很多帮助萌新程序猿学习的小工具，打开微信搜索猿创聚合助手自行探索吧。

• 程序员交流QQ群、微信群

竟然已经建立4个2000人群了

如果要给2021一个关键词，我认为不惑特别恰当

虽然我距离不惑之年还差那么一丢丢...

但是2021真的彻底想明白了一些事

根据祖上三代的数据

我家族的男性基本在60+就会拜拜

那么接下来的20多年（也可能没有这么多）

我究竟要做什么呢？

给 2022 立个Flag

1. 持续赋能

从现在起，我要把自己这套用输出倒逼自己输入的学习方法，教给更多小伙伴，培养更多的掘金收割机。从2002年我拥有人生第一台电脑开始自学Flash，2008年又自学iOS开发...到现在是一名全栈全端的技术内容创作者。我的经历一定能帮到很多和我一样热爱编程的小伙伴。

2. Q1一定要完成小册

拖延症真的要不得~

3. 和全职打工拜拜

虽然我计划的房车旅行要等我女儿幼儿园毕业，也就是2023年。但我想早点开始享受自由职业的快乐了！

4. 摩托车驾照

驾龄17年的老司机，想耍耍帅所以学了摩托。开始报了个两轮，结果在科目二竟然考挂了，哈哈哈哈。现在改成三轮了，希望能过~

除此之外，继续稳定的，坚持的输出技术内容是我永远不会改变的目标！

感谢大家，记得评论抽奖哦~

---

本篇文章配有小破站视频