Fenz 发表于 2018-11-2 21:56:33

Fenz 的第二代在线魔方程序

本帖最后由 Fenz 于 2024-3-15 23:26 编辑

本程序为 Web 程序,可在线玩。地址为:
https://mc.fenzland.com

操作方式:
电脑端:拖动中键(滚轮)旋转视角;滚动滚轮缩放;在面上点击鼠标左键和右键拧动魔方;加上 Ctrl、Shift、Alt 的不同组合,在不同的魔方下,不同的面上,都会有不同的转动效果。
手机端:单指划动为旋转视角;双指划动为缩放;点击魔方面为拧动魔方,每个面的操作与电脑端不同,以便在没有左右键和 Ctrl、Shift、Alt 的情况下实现更多操作。

已支持的魔方:
正四面体 2、3、4、5 阶魔方;
三棱柱 2 阶魔方;
正六面体 2、3、4、5 阶魔方,空心3阶魔方,带面块唯棱魔方,唯棱魔方;
正十二面体 2、3、4 阶魔方,空心3阶五魔,最深切的转面五魔;


小记:

四年前写过一个SVG版的在线魔方程序。受限于当时的设计,每个魔方的每个点的坐标都需要手动计算,所以非常不利于增加更多魔方。后来便也没有再更新。

直到最近,才终于下定决心继续搞起。过去这几年 Web 技术日新月异,我决定重新写一版,以便用上最棒的新技术。
这次,我选择了更加强大的 three.js 作为驱动,使用 WebGL 作为引擎,并且使用了 ES6 的新语法。
为此,放弃兼容任何落后的浏览器。支持的浏览器有:任何平台下的 Google Chrome、Opera,Windows 下的 360、QQ浏览器(最新版本极速模式),IOS12 下的 Safari 等。Android 可使用 Google Chrome,IOS 只要升级到 12 即可。暂不支持的浏览器有:火狐、Edge。

这次,我在原有设计上,改进了定义魔方的方式,使得创建新魔方更加方便,但仍然有优化的空间。我会持续优化,达到基本稳定后会将代码发布至 GitHub。届时会 JS 的朋友可以贡献魔方。我的远期目标是做到可以让任何人都能来构造魔方,当然目前看来还比较遥远。

目前这个程序还处于初期阶段,一直会有更新。我也会持续加入新魔方。

请多多支持













http://bbs.mf8-china.com/forum.php?mod=attachment&aid=MjY2ODE2fDAxMTNlMzRkfDE1NDI1MzQ3ODB8MTAyMTkxfDExMDUzOA%3D%3D&noupdate=yes

==============================
更新记录

增加背面显示功能
在魔方的后方空间中显示背面的情况,便于观察,也可进行点击操作。

增加配置功能。
可配置坐标轴、魔方背面的显示和隐藏,场景雾的浓度,黑夜模式,显示分辨率(调高可防锯齿,调低可提升性能)。
可配置使用哪个鼠标键旋转视角,可配置魔方转动速度。

增加变形魔方 二阶三棱柱魔方。
此魔方为第一代在线魔方程序所支持的其中一个魔方。为变形魔方,现实中无法实现。在程序中实现也较难,目前仅处理到二阶。三阶及以上还没处理完毕。

正四面体、正六面体、正十二面体更新到 5 阶,所有种类的块都已经出现,这意味着已经可以方便地配出任意高阶。

增加限制魔方 单元魔方
此魔方为所有三阶魔方和百慕大魔方的基本单元。为了实现单元魔方,程序新增了限制转动和组合转动的支持。其中限制转动,是捆绑魔方,Jumble魔方,百慕大魔方等有转动限制的魔方的基础。组合转动,则是实现公式和宏的第一步。

增加 MixUp 以及其原形魔方
立方体的 MixUp 是一个变形魔方,不过我们可以通过切削找到其原形:小斜方截半立方体。这个形状不适用于按面着色,故采用了立方体,正八面体两种不同的着色方式。

增加百慕大魔方
首先是三棱柱,即5轴的百慕大魔方(Emax=4)。这个魔方的原形由奥斯卡先生所制作,也是大烟头设计百慕大三角魔方的灵感来源之一。可以说是百慕大系列的序曲。
然后是楼主所设计的百慕大粽子(Emax=3)系列。由于面少,这个系列组合款式不多。严格地说,可玩的只有一种结构两个款式,即一个百慕大面、一个百慕大面一个移棱面。若增加到两个百慕大面,就已经无法完全打乱,三个百慕大面则直接锁死,无法转动。
增加了大烟头的百慕大三角魔方,百慕大系列的鼻祖,也是“百慕大”之名的由来。
增加了新设计的百慕大箭矢魔方(Emax=2.5)。是楼主全新设计的魔方,特征值 Emax 达到了可以达到的最小值,棱和角块也达到了最小单元(事实上与单元魔方同构)。
增加百慕大3.5魔方--玫瑰魔方,楼主以前的设计,发现没起昵称。于是稍稍改动形状,使其倒着看像一朵玫瑰,起名“玫瑰魔方”。由于中心块只有一种,所以和箭矢/星辰一样,实际上只有一种结构。改变的,是不同形状棱角块的搭配(这种可以称为“单调百慕大魔方”)。
增加百慕大4.5魔方--花苞魔方。也是楼主以前的设计,非常好看的外形。不同于单调百慕大 2.5 和 3.5 只有一种中心块,4.5 有着真正不同类型的面,可玩性上升了一个层次。

增加语言设置,有英文和三个版本的中文,分别照顾大陆和台湾地区等不同的语言习惯。关于魔方的英文名,主要是从 TP 和维基百科找来,找不到则自己编。有不合适的,还请各位魔友指正。
使用百慕大玫瑰魔方作为 favicon。



==============================
更新记录(2024-03-15)

一晃已数年未更新,这些年魔方也玩得少了,公式也背过忘过多回,最后不管啥魔方都一个三循环一个三循环地还原了。翻看自己的代码,已然是需要一点点学习了。尤其是几何的部分,要补好多数学颗。如今回来魔方吧依然在这里,不知老朋友们是否还常在,又有多少新朋友来往。总之,我现在回来继续完善我的程序,新增魔方,并改版。改版后,将具备引入公式编辑和演示等能力。路要一步一步走,先增加些魔方吧。

增加魔方:3/4/5阶三棱柱、2/3/4/5阶五棱柱、2/3/4/5阶六棱柱、百慕大3½火山系列、百慕大4½瑕晶系列。





yyglxc 发表于 2018-11-2 22:37:39

想玩,可惜没成功!

vip2018 发表于 2018-11-3 00:23:28

又多了几个魔方,谢谢mf18

cube_master 发表于 2018-11-3 01:12:01

与 pCubes.zip 类似吗?

otischeng 发表于 2018-11-3 01:45:06

挺不錯的呢! 看起來不是用flash的, 是不是html5? 相對pcubes的鼠標拖動, 我更喜歡用鼠標左鍵和右鍵去動~

刘超 发表于 2018-11-3 07:00:19

还是论坛高手多啊

Fenz 发表于 2018-11-3 10:56:01

otischeng 发表于 2018-11-3 01:45 static/image/common/back.gif
挺不錯的呢! 看起來不是用flash的, 是不是html5? 相對pcubes的鼠標拖動, 我更喜歡用鼠標左鍵和右鍵去動~

叫 WebGL,不知道算不算 HTML5 的一部分。flash 到 2020 年就得壽終正寢了,所以還是不用的好。

操作習慣,還有配色,有計劃做成可配置的,並且記錄在瀏覽器中,每次打開都記得。目前精力主要集中在加魔方,以及優化加魔方的方式。所以這些輔助功能會晚一點。到時候更新了給你回復。

honglei 发表于 2018-11-3 11:09:15

加油,这是一个大工程。

Fenz 发表于 2018-11-3 11:39:30

cube_master 发表于 2018-11-3 01:12 static/image/common/back.gif
与 pCubes.zip 类似吗?

还没做到像 pCubes 这么成熟。pCubes 定义魔方的方式,以及操作风格都是值得我借鉴的。谢谢老大分享 pCubes。

不过我的程序也有一开始就超过 pCubes 的地方,就是跨平台。pCubes 只能在 Windows 下运行,而我的程序在 Windows、Linux、Mac OS、Chrome OS、IOS、Android 等操作系统下都是可以运行的。

Fenz 发表于 2018-11-3 11:48:54

vip2018 发表于 2018-11-3 00:23 static/image/common/back.gif
又多了几个魔方,谢谢

会一直持续更新新的魔方,请多多支持
页: [1] 2 3 4 5
查看完整版本: Fenz 的第二代在线魔方程序