Thanks for Three.js and WebGL.

   Here is the hyperlink: Fenz Cube.

   Fenz Cube is developed on JS, and using ES6, includes ES6 modules, and without Webpack。 So it cannot run on old browsers, such as IE, even FireFox、Edge and Chromium < 63. Supporting browsers are Chrome, Chromium, Safari, Opera, Chinese 360, QQ (with in Chromium 63+)。

   Fenz Cube support both PC and mobile. On PC client, click the faces to twist the cube. Left click for anticlockwise twists, and the right click for clockwise twists. With Shift, Ctrl and Alt, we can do more different twists. Drag the middle button to rotate the view, but not left or right button by default. That can prevent misoperations. However, if you don’t like this, you can configure it on settings. Your settings will store on your localStorage in your browser. So the program will remember your preference. There are some other settings, include some display settings. One of them is showing backside. Turn on it, you can see the backside of cube with out rotating the view. And you can click too twist the cube,

Web Component

   Now, Fenz Cube support Web Component. What you need to do is import the JS module, and use <fenz-cube> HTML tag wherever you like in your page.

The codes are:

<!-- import -->
<script type="module" src=""></script>

<!-- insert cube -->
<fenz-cube puzzle="|0|1.js"></fenz-cube>