在隆重介紹我的在線魔方程序之前,先要感謝兩個開源項目。正是得益於這些開源項目,我才能寫出這個有趣的玩意兒。 感謝 Three.jsWebGL

   現在隆重介紹我的在線魔方程序

   程序使用 JS 開發,使用了最新潮的 ES6,包括模塊風格。並且任性地沒有使用強大,但讓人喜歡不起來的 Webpack。 因此不能兼容 IE 這樣的老舊瀏覽器,甚至包括略微落伍的瀏覽器,例如 FireFox、Edge 以及還在用舊版本 Chromium 作爲內核的瀏覽器。 兼容的瀏覽器有 Chrome、Chromium、Safari、Opera 以及中國大陸的 360瀏覽器、QQ瀏覽器等(必須是最新版,並使用極速模式)。

   分別支持電腦端和觸屏端,操作略有不同。電腦端使用鼠標點擊轉動魔方,可以配上 Shift、Ctrl、Alt 來進行不同的旋轉操作。 觸屏端則只能通過點擊不同的面來實現不同操作。默認使用鼠標左右鍵操作魔方,中鍵操作視角,您也可以在右上角設置中進行調整,以符合您的操作風格。 設置中,還有語言,各種顯示效果等,供您配置。其中顯示背面,可以讓您直接看到背面的顏色,並可以點擊操作,幫您省去許多轉動。

組件支持

   現已增加 Web Component 支持,只要引入 JS 模塊,即可在頁面中隨處插入魔方。效果如下

代碼爲:

<!-- 引入模塊 -->
<script type="module" src="https://mc.fenzland.com/fenz-cube.js"></script>

<!-- 插入魔方 -->
<fenz-cube puzzle="https://mc.fenzland.com/puzzles/Cubic|0|1.js"></fenz-cube>