JSCity：把原始碼視覺化成建築物的 JS 庫

作者：伯樂線上 – aoi

網址：http://top.jobbole.com/22960/

點選“閱讀原文”可檢視本文網頁版

簡介

巴西米納斯聯邦大學的一個軟體工程應用研究小組仿造 Code City（簡介看這個帖子），用 three.js 3D 庫做了 JSCity，也是用於原始碼視覺化。

示例截圖

來，先上一個“小城市” socket.io 的圖：

JSCity 把：

• JS 程式轉成城市；
• 檔案夾轉成區域；
• 檔案轉成子區域；
• 函式轉成建築物；
• 內部函式也轉成了建築物，不過是放在它們巢狀的函式/建築物之上

其他

• 函式原始碼行數表示建築物的高度；
• 函式中變數數量轉成建築物地基；
• 藍色建築是有名字的函式；
• 綠色建築是匿名函式；

主頁：https://github.com/aserg-ufmg/JSCity/wiki/JSCITY

示例

小提示:

• 滑鼠左鍵轉變視角；
• 滑鼠中鍵可放大/縮小；
• 滑鼠右鍵拖動

小城市（幾秒鐘就載入完了）

中型和大型城市（載入有點費時哦）

未經許可，禁止Copy！