微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

JSCity:把源码可视化成建筑物的 JS 库

2015-07-24 20:06 前端大全

(点击上方,可快速关注)


作者:伯乐在线 - 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!



前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

招聘和猎头服务QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 从jbossweb看Tomcat之一 安装Icinga Web2所需服务 R语言快速深度学习进行回归预测 DevStack 安装 OpenStack 多节点 数据说话:怎样的程序员最抢手?