🌃 领取属于你的3D GitHub Story

最近 GitHub 为开发者带来了一个酷炫的应用,skyline.github.com,以 3D 城市模型的方式展示 GitHub Contributions 统计图,也去看看你的 GitHub Story 吧。html

相比较平日里在 GitHub Profile 页看见的小绿格格来讲 skyline 显得更加酷炫直观。git

@xiaoluoboding's Skyline

skyline 支持如下几个好用的功能:github

  • 按年份渲染
  • 下载 STL 格式的文件
  • VR 查看(暂何尝试)
  • 这周还加入了打印 3D 模型的功能

也有很多开发者拿到了打印后的记念品。羡慕中 🍋🍋🍋bash

题图来自 Twitter

GitHub Contributions

GitHub Profile 页面上默认的小绿格子,你们都很熟悉app

github-contributions

值得一提的是,你也可能注意到了个人 GitHub Contributions Graph 右上角有一个按钮,能够切换 2D/3D 模式。这个功能是一个 Chrome 扩展支持的,名为:[GitHub Isometric Contributions] ,你也能够安装一个试试。效果以下:编辑器

github-contributions-3d

3D 文件查看器

你可能不知道的是 GitHub 支持查看 3D 文件,GitHub 能够托管和渲染扩展名为 .stl 的 3D 文件。这样一来,咱们能够把 skyline.github.com 中下载的 .stl 文件上传到 GitHub 仓库中。工具

GitHub Repo

https://github.com/xiaoluoboding/skylines/blob/main/xiaoluoboding-2020.stlpost

xiaoluoboding-2020.stl

GitHub Gist

又或者可使用 GitHub Gist 建立 .stl 文件spa

💡 Tips: Gist 是支持拖拽文件到编辑器内部的。

https://gist.github.com/xiaoluoboding/233eca90cc2fcad603d640d49c4dbe063d

skylines

我建立了 https://github.com/xiaoluoboding/skylines 仓库,将自 2013 年加入 GitHub 以来全部年份的 STL 文件整合到一个仓库中。编写了一个页面,以 Embed 嵌入的方式展示出来。你能够点击查看

xiaoluoboding/skylines

ASCII ART

有趣的 skyline.github.com 还给开发者留一个小彩蛋,当在 skyline 页面打开开发者工具的时候,会发现 skyline 在控制台为你打印了 GitHub Contributions 的 ASCII ART 版本,像这样:

@xiaoluoboding's 2020 GitHub Skyline         

           ✧          ▁               ✦✧    ✧        
              ✦       █  ✧ ✦     ✧              █    
                      █         ✦             ▄ █    
✦▂             ▂✦     █▆  ✧▁         ✧    ▃   █ █▄▃  
▅█▂   ▃ ☽▃▃▁▃▅▆█▂▁▅   ██ ▁ █▆▇▆▅ ▂▆▇▅▆▁▁  █▂▁ █▇███✦▁
███▁█▁█▁████████████████▅███████▅███████▁▁█████████▅█

    https://skyline.github.com/xiaoluoboding/2020

因而我又萌生了另外一个想法,把 ASCII 版本的 GitHub Contributions 放在 Gist 上,而后在 GitHub Profile 页面做为一个项目钉住,实际效果以下图:

GitHub Profile

不过也没有那么好看啦。而且不是动态的,玩玩而已。

3D 打印

在网上查询了一下,.stl 文件确实能够用于 3D 打印,我也想收藏一个3D 打印出来的 Skyline 城市模型,以此激励本身保持热爱开源的心、继续盖更高的楼,目前还在查找国内的3D打印服务,后续收到成品再和你们分享吧。就酱。

移动端阅读

关注个人技术公号,一样也能够找到本文。

xiaoluoboding

原文: https://www.xlbd.me/posts/202...
相关文章
相关标签/搜索