文号
890917
阅读
15881
回复
4
收藏
5
three.js项目:高维几何体的可视化
2021/02/15
原创
IP:安徽
摘要:高维几何图形的理解和诠释一直是一件难事,缺乏有效的工具和方法。此项目试图通过采用投影法实现的可视化来探索高维几何体的特点。

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

这是一年多以前楼主作为线性代数课程设计的项目,不过当时没有写创建几何体的界面,全靠在console里手动传参给构造函数然后new出来。结课之后一直觉得这个项目就这样凉掉有点可惜了,这两天抽空写了个更具操作性的UI,发出来展示一下。值得一提的是,写完新的UI的switch、toggle等交互之后,我发现js源码并没有新增一行,这个新UI的导航和切换效果几乎是靠纯粹的HTML+CSS实现的,除了一行内联的事件绑定。后续会更新可视化的方法(高维向平面投影)以及生成高维几何体(目前其实只有任意维超立方体是生成的)的算法。

提示1:本项目大量使用CSS3、H5、ES6特性,请使用一个不太上古的浏览器打开。

提示2:本项目是prove of concept性质的,几乎没有做任何性能优化的考量(实际上由于几乎全部的循环都是用声明式语法写的,所以相对命令式的语法可以说是逆优化了)。实测在楼主8300H的笔记本上,播放5维超立方体旋转动画+拖动视角时平均帧率在20-30FPS,所以不要尝试在移动设备上体验本项目。

5Hycb1.png

在两个平面上旋转的5维超立方体,中心投影

4Hycb1.png

静态的4维超立方体,中心投影

Simp1.png

在一个平面上旋转的4维棱锥,平行投影

Vec1.png

矢量场的可视化,目前暂不支持在UI中自定义创建。

SdtEE作者
5年9个月前IP:安徽
890918
1楼

UI介绍:

好像没啥好介绍的,我感觉我写的界面应该还挺符合直觉的(

UI1.png

鼠标移动到…按钮上弹出操作选项,由左至右分别是:

显示/隐藏网格,旋转/固定摄像机,旋转/固定几何体,清屏

UI2.png

点击+按钮创建新几何体,目前总共可以创建三种:任意维超立方体,四维棱锥,二阶张量;以及可以选择8种预设的Demo进行展示。

引用
评论
1
SdtEE作者
5年9个月前IP:安徽
890919
2楼

目前实现的UI功能有限,更多接口可以在项目的Wiki里看到(然而Wiki也是一年多以前写的,有很多缺失的地方。以后可能会更新吧,咕咕咕)。之后也许会添加自定义创建高维平面的功能。

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

引用
评论
5年9个月前IP:广东
891014
3楼

这个好玩

引用
评论
5年9个月前IP:浙江
891045
4楼

手机稳定60fps啊

引用
评论(1)
笔记
{{note.content}}
{{n.user.username}}
{{fromNow(n.toc)}} {{n.status === noteStatus.disabled ? "已屏蔽" : ""}} {{n.status === noteStatus.unknown ? "正在审核" : ""}} {{n.status === noteStatus.deleted ? '已删除' : ''}}
  • 编辑
  • 删除
  • {{n.status === 'disabled' ? "解除屏蔽" : "屏蔽" }}
我也是有底线的