CubeStack

todo

CubeStack Original Version

Technology stack

• vuejs
• threejs
• typescript

Teather

TODO

Browser Support

TODO

Installing

Using npm:
npm i cubestack

Using yarn:
yarn add cubestack

Vue custom tags

1. <cubesample></cubesample> cube sample
2. <cubestack></cubestack> custom cube

Useage

simple example

main.js/main.ts

import cubefrom 'cubestack'
Vue.config.productionTip = false
Vue.use(cube)

yourcomponment.vue

<template>
  <div id="app" style="background-color:#9C27B0">
    <cubesample></cubesample>
</template>

a rotating 3x3x3 cube

Other Example

2x2x2 cube

main.js/main.ts

import cube, {packageDefaultConfig} from 'cubestack'
const options: packageDefaultConfig = {
  renderconfig: {
    order: 2,
  },
}

Vue.use(cube, options)

yourcomponment.vue

<template>
  <div id="app" style="background-color:#9C27B0">
    <cubesample></cubesample>
</template>

set scramble

main.js/main.ts

import cube, {packageDefaultConfig} from 'cubestack'
const options: packageDefaultConfig = {
  renderconfig: {
    alg: 'RURUFB'
  },
}

Vue.use(cube, options)

yourcomponment.vue

<template>
  <div id="app" style="background-color:#9C27B0">
    <cubesample></cubesample>
</template>

options

renderconfig,
preferanceconfig,
themeconfig,
playerconfig,
bottomlayer

1. renderconfig

2. preferanceconfig

3. themeconfig

4. playerconfig

5. bottomlayer set the color of bottomlayer default bottom layer is white color

• U yellow
• D white
• R red
• L orange
• F green
• B blue

api

todo

Todo

• [ ] setting pannel
• [ ] player pannel
• [ ] record pannel
• [ ] API
• [ ] support html file