kirahan / cubestack

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

order	cube order
alg	scramble
scene	working scene
masktype	the masktype of cube
size	size of cube
coverImgNotModel	the first frame is img or model

2. preferanceconfig

version	version
scale	scale
perspective	perspective
angle	Horizontal perspective
gradient	Vertical perspective
frames	frames rate
sensitivity	sensitivity of touch control
mirror	mirror show or hide
hollow	hollow or solid
shadow	shadow

3. themeconfig

version
dark	dark or light
colors	cube colors

4. playerconfig

autoplay
loop
hoverplay
lock
breath
autorotate

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