Liver for a week! I use three JS created a "Nuggets city"

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("",{
   "cursor": cursor,
   "sort_type": 2,
   "user_id": uid

//Get the article until xx timestamp
function getArticlesAfter(uid,unixtime){
 let dataByYear = {};
 let cursor = 0;
 async function getNextArticles(){
  let res = await getArticles(uid,cursor);
  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
    console.log('It's over. Last year's last article was:');
                                //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
    var cDate = new Date(parseInt(article_item.article_info.ctime)*1000);
    var month = cDate.getMonth();
                                //Without so many fields, re sort out the data structure
    var sItem = {
  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! = 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?


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


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

Change uid to your own Nuggets uid to see your Nuggets city

Added by nuying117 on Fri, 07 Jan 2022 09:59:40 +0200