掘金收割机的年终总结,我用 Three.js 创建了一个"掘金城市" | 2021年终总结征文

掘金收割机的年终总结,我用 Three.js 创建了一个"掘金城市" | 2021年终总结征文

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


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

Snipaste_2021-12-09_15-22-33.png

IMG_9313 2.JPG

太招人恨了,重来~重来,大家好!

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

特别感谢

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

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

感谢完,先来点肝货吧!

我肝了一周,用Three.js创建了一个"掘金城市"

“肝”货?

先看最终效果

2021-12-09 15_52_23.gif

数据来源

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();
}
复制代码

然后把所有文章按照月份重新组织数据,最终数据结构如下:

image.png

这个接口我也提供给大家,如果你不满意我的表现形式,也可以自己处理这些数据。

但我不保证接口长期有效哦!

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

数据的表现形式

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

image.png

结果光一个底座,我就折腾了大半天,完全完全没想到在Three.js里画一个立体梯形结构体还挺麻烦。

最后请教了webgl大佬,他教我用bufferGeometry,需要把梯形体所有的点计算出来,一个梯形体不过8个点,还好算。

囧的是,就在我最后画出来梯形体的时候,我发现打不上光。

因为要接受光照信息,还得计算全部的顶点法线...

头秃!由于代码太长,并且最后也没用上梯形体,我就不贴代码了。

image.png

另外,我发现github skyline的表现形式其实也并不适合呈现掘金全年文章数据。

所以干脆原创一个吧!

image.png

这是为掘金社区定制

喂,有没有人买个单呐?

好吧,没有人

就当我闲得蛋疼吧

看着还不赖吧~当然一开始它也不是长这样的,为了让整个城市看起来更“美观”,我可真是揪光了头发。边开发边设计边直播...尝试了各种布局

  • 初版

一开始,我为创建城市设定了以下基本规则

1、每个月是一个区块,一共4x3。
2、每篇文章是一个建筑物,每月最多显示30篇。
3、文章的赞越多则建筑物越高。
复制代码

image.png

然后我发现有一些文章的点赞数据确实太少了,原封不动的照数据画出来,并不好看。

  • 第二版

接着我设定了创建城市的基本规则2.0

4、建筑物的单层面积由当月文章数量决定。
5、区块内建筑物的排布根据当月文章数量决定。
6、区块内所有建筑物的整体区域与区块面积居中。
7、建筑物的高度有一个基数,确保不会出现太矮的。
复制代码

image.png

现在是不是舒服多了,错落有致,大小不一,但又很整齐。只是当月份是奇数时,最后孤单的建筑让整体看上去不太舒服,所以继续升级。

  • 第三版

创建城市的基本规则3.0

8、区块内建筑物的如果是奇数,最后一个宽度加倍,填满空间
复制代码

image.png

现在看上去是不是舒服多了?

但是,也叫城市,怕不是个芯片样板?

恰好,网抑云里正在播放一首歌,歌词是这样的

这城市那么空

这回忆那么凶

这街道车水马龙

我能和谁相拥
复制代码

咦,街道! 城市那必须得有街道呀!

  • 第四版

纯手绘街道贴图,每一个像素都是我用鼠标在PS里画出来的。

我真是闲得蛋疼,again!

image.png

image.png

TADA!是不是有点感觉了?做到这,我发量已经告急了!

image.png

  • 第五版

城里哪有那么清澈的空气!

加点雾(mai)吧~

scene.fog = new THREE.Fog(0xffffff, 0.01, 6);
复制代码

image.png

  • 第六版

就在我觉得大功告成的时候,我测试一下 @大圣老师 的账号数据。

image.png

嗯,绿化面积很大,证明了他真是摸鱼摸到Lv5的。

得给他整得难看点,谁叫他不写文章的(此句优弧非要加上)

好吧,没有文章的月份就弄一个工地的贴图把

image.png

你看看

城乡结合部的既视感是不是就出来了

  • 第7版(未遂)

方块城市没有感觉,干脆加点建筑物模型吧。我随即打开unity3dassetsstore

image.png

这一套模型太好看了,太合适了吧!

竟然只要9.99!

买它!买它!买它!

就在我准备下单支付的时候

image.png

告别unity3d吧,瞧不起我mainland是怎么滴?

不买了~

就这样吧!没头发揪了~

开发的最后

其实整个原创设计的开发过程远远不止7版,最近几天我都一直在小破站直播写这个小网页,很多朋友是见证了这个开发过程的。

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

被掘金张哥来催稿了

image.png

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

还是努力写专栏吧~

体验地址

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

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赞

image.png

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

已经在写小册啦~

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

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

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

都试了,继续干就完了。

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

那必须合格了呀。

  • 拥抱开源

image.png

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

2021总结

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

  • 猿创聚合助手小程序

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

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

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

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

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

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

根据祖上三代的数据

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

那么接下来的20多年(也可能没有这么多)

我究竟要做什么呢?

给 2022 立个Flag

  1. 持续赋能

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

  1. Q1一定要完成小册

拖延症真的要不得~

  1. 和全职打工拜拜

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

  1. 摩托车驾照

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

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

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


本篇文章配有小破站视频

分类:
前端