I've been using three for a week JS created a "Nuggets city"
"Liver" goods?
Look at the final effect first
Real time rendering of nuggets data City
data sources
How many articles have I written in nuggets in 2021?
I'd like to know how many articles I wrote in Nuggets this year and how much praise I liked each article. However, the Nuggets did not provide an interface in years. As a last resort, I have to use the article list interface to traverse. Once I find an article whose creation time is earlier than 0:0:0 on January 1, 2021, I will end the traversal, so as to obtain all the articles I published this year.
//Get 10 articles at the specified pointer position
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;
}
//Get the article until xx timestamp
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 an article less than the timestamp is found, the traversal stops
if(article_item.article_info.ctime<unixtime){
console.log('It's over. Last year's last article was:');
console.log(article_item.article_info.title);
getTheLast=true;
break;
}else{
//If the time of finding the article is later than December 31, 2021, skip
//In 2022, there will be people accessing this interface, so there will be no problems
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]=[];
//Without so many fields, re sort out the data structure
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();
}
Then reorganize the data of all articles according to the month, and the final data structure is as follows:
I also provide you with this interface. If you are not satisfied with my presentation, you can process these data yourself.
But I don't guarantee the long-term effectiveness of the interface!
https://e0b75de1-90c7-4c11-9d12-a8bc84c4d081.bspapp.com/http/jjskyline?uid = your Nuggets uid
Data representation
I was going to copy skyline directly github. com
As a result, I tossed about for most of the day with only one base. I didn't expect to be in three JS to draw a three-dimensional trapezoidal structure is quite troublesome.
Finally, I asked the webgl boss. He taught me to use bufferGeometry. I need to calculate all the points of a trapezoid. A trapezoid has only 8 points, which is good.
Unfortunately, when I finally drew the trapezoid, I found that it couldn't be polished.
Because to receive lighting information, you have to calculate all vertex normals
Bald! Because the code is too long and the ladder shape is not used in the end, I won't post the code.
In addition, I found that the expression form of github skyline is not suitable for presenting the annual article data of nuggets.
So just create one!
Nuggets annual personal data static city effect
This is customized for the Nuggets community
Hey, does anyone buy a bill?
Well, no one
Just think I'm too busy
It looks good ~ of course, it didn't grow like this at the beginning. In order to make the whole city look more "beautiful", I really pulled out my hair. Live broadcast while developing and designing Tried various layouts
- First edition
At the beginning, I set the following basic rules for creating a city
1,Each month is a block, a total of 4 x3. 2,Each article is a building and can display up to 30 articles per month. 3,The more praise the article, the higher the building.
Some articles are too short due to too few likes
Then I found that there are too few praise data in some articles. They are drawn according to the data intact, which is not good-looking.
- Second Edition
Then I set the basic rules for creating cities 2.0
4,The single floor area of the building is determined by the number of articles in the current month. 5,The arrangement of buildings in the block is determined according to the number of articles in the current month. 6,The overall area of all buildings in the block is in the middle of the block area. 7,There is a base number for the height of the building to ensure that it is not too short.
When a row of individual buildings is not filled
Now it's much more comfortable. It's scattered, of different sizes, but it's neat. Only when the months are odd, the lonely buildings make the whole look uncomfortable, so continue to upgrade.
- Third Edition
Basic rules for creating a city 3.0
8,If the number of buildings in the block is odd, double the width of the last one to fill the space
A row of individual buildings will fill up and look much more tidy
Does it look much more comfortable now?
But, also called the city, I'm afraid it's not a chip model?
As it happens, a song is playing in the cloud. The lyrics are like this
The city is so empty The memory is so fierce The streets are crowded with traffic Who can I hug
Hey, street! There must be streets in the city!
- Fourth Edition
Pure hand drawn street map, each pixel is drawn in PS with my mouse.
I'm so busy, again!
Make a street map
Wow, plus the streets are much more comfortable
TADA! Do you feel a little? I'm in a hurry to do this!
- Fifth Edition
There is no such clear air in the city!
Add some fog~
scene.fog = new THREE.Fog(0xffffff, 0.01, 6);
A city with fog
- Sixth Edition
Just when I thought it was done, I tested the account data of @ Dasheng teacher.
There are too many open spaces
Well, the large green area proves that he really touched Lv5.
I have to make it difficult for him. Who told him not to write an article
Well, get a map of the construction site in the month without an article
Turn the open space into a construction site
You can take a look.
Is the visual sense of the urban-rural fringe coming out
- 7th Edition (attempted)
Square city has no feeling. Just add some building models. I then open unity3d's assetsstore
unity3d Market
This set of models is so beautiful and suitable!
It's only 9.99!
Buy it! Buy it! Buy it!
Just when I was ready to place an order to pay
There is no mainland area when checking out
Say goodbye to unity3d. How do you look down on me in mainland?
No~
be it so! No hair~
The end of development
In fact, the development process of the original design is far more than version 7. In recent days, I have been writing this small web page live at the small broken station. Many friends have witnessed this development process.
When I want to continue fishing and develop these useless things.
I was urged by brother Zhang of nuggets
Urged
Forget it, that's it
Try to write a column~
Just when I was ready to write
After thinking about it, it seems that I haven't confirmed my cooperation with Nuggets yet:(
Well, then why [being employed]
Experience address
No mobile terminal adaptation, please use the computer to access
http://ezshine.jnsii.com/juejincity/?uid=2955079655898093
Change uid to your own Nuggets uid to see your Nuggets city