Quick Start

Embed in your page

You can embed Web Cube in any web app once the custom element is defined.

<web-cube></web-cube>
<script type="module">
  import { define } from "https://esm.sh/@web-cube/web-cube";
  define();
</script>
<style>
  web-cube {
    display: block;
    width: 100%;
    height: 100vh;
  }
</style>

Change the size

You can change the cube dimension by setting the size attribute.

<web-cube size="2"></web-cube>

Control the cube with JavaScript

Use the WebCube methods to rotate the cube and inspect the current state.

import { WebCube } from "@web-cube/web-cube";

const cube = document.querySelector("web-cube") as WebCube;

await cube.rotateCube({ axis: "x", angle: 90 });
await cube.rotateLayer({ axis: "z", layer: 0, angle: 180 });

const state = cube.getState();
cube.setState(state);

Continue with Properties and Methods.

Installation