@houstonp/rubiks-cube 1.5.2 → 2.1.0

package/index.js

@@ -1,274 +0,0 @@
-import { Scene, WebGLRenderer, PerspectiveCamera, AmbientLight, DirectionalLight, Spherical } from 'three';
-import { OrbitControls } from 'three/examples/jsm/Addons.js';
-import Cube from './src/cube/cube';
-import getRotationDetailsFromNotation from './src/utils/rotation';
-import { debounce } from './src/utils/debouncer';
-import gsap from 'gsap';
-
-/** @typedef {{ animationStyle: "exponential" | "next" | "fixed" | "match", animationSpeedMs: number, pieceGap: number, cameraSpeedMs: number, cameraRadius: number, cameraPeekAngleHorizontal: number, cameraPeekAngleVertical: number, cameraFieldOfView: number }} Settings */
-/** @type {Settings} */
-const defaultSettings = {
-    animationSpeedMs: 100,
-    animationStyle: 'fixed',
-    pieceGap: 1.04,
-    cameraSpeedMs: 100,
-    cameraRadius: 5,
-    cameraPeekAngleHorizontal: 0.6,
-    cameraPeekAngleVertical: 0.6,
-    cameraFieldOfView: 75,
-};
-const minGap = 1;
-const minRadius = 4;
-const minFieldOfView = 30;
-const maxFieldOfView = 100;
-const maxAzimuthAngle = (5 * Math.PI) / 16;
-const polarAngleOffset = Math.PI / 2;
-const maxPolarAngle = (5 * Math.PI) / 16;
-
-class RubiksCube extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-        this.shadowRoot.innerHTML = `<canvas id="cube-canvas" style="display:block;"></canvas>`;
-        this.canvas = this.shadowRoot.getElementById('cube-canvas');
-        /** @type {Settings} */
-        this.settings = {
-            animationSpeedMs: this.getAttribute('animation-speed-ms') || defaultSettings.animationSpeedMs,
-            animationStyle: this.getAttribute('animation-style') || defaultSettings.animationStyle,
-            pieceGap: this.getAttribute('piece-gap') || defaultSettings.pieceGap,
-            cameraSpeedMs: this.getAttribute('camera-speed-ms') || defaultSettings.cameraSpeedMs,
-            cameraRadius: this.getAttribute('camera-radius') || defaultSettings.cameraRadius,
-            cameraPeekAngleHorizontal: this.getAttribute('camera-peek-angle-horizontal') || defaultSettings.cameraPeekAngleHorizontal,
-            cameraPeekAngleVertical: this.getAttribute('camera-peek-angle-vertical') || defaultSettings.cameraPeekAngleVertical,
-            cameraFieldOfView: this.getAttribute('camera-field-of-view') || defaultSettings.cameraFieldOfView,
-        };
-    }
-
-    static get observedAttributes() {
-        return [
-            'animation-style',
-            'animation-speed-ms',
-            'piece-gap',
-            'camera-speed-ms',
-            'camera-radius',
-            'camera-peek-angle-horizontal',
-            'camera-peek-angle-vertical',
-            'camera-field-of-view',
-        ];
-    }
-
-    attributeChangedCallback(name, oldVal, newVal) {
-        if (name === 'animation-style') {
-            this.settings.animationStyle = newVal;
-        }
-        if (name === 'animation-speed-ms') {
-            var speed = Number(newVal);
-            this.settings.animationSpeedMs = speed > 0 ? speed : 0;
-        }
-        if (name === 'piece-gap') {
-            var gap = Number(newVal);
-            this.settings.pieceGap = gap < minGap ? minGap : gap;
-        }
-        if (name === 'camera-speed-ms') {
-            var speed = Number(newVal);
-            this.settings.cameraSpeedMs = speed > 0 ? speed : 0;
-        }
-        if (name === 'camera-radius') {
-            var radius = Number(newVal);
-            this.settings.cameraRadius = radius < minRadius ? minRadius : radius;
-            if (oldVal !== newVal && oldVal !== null) {
-                this.dispatchEvent(new CustomEvent('cameraSettingsChanged'));
-            }
-        }
-        if (name === 'camera-peek-angle-horizontal') {
-            var angle = Number(newVal);
-            angle = angle > 0 ? angle : 0;
-            angle = angle < 1 ? angle : 1;
-            this.settings.cameraPeekAngleHorizontal = angle > 0 ? angle : 0;
-            if (oldVal !== newVal && oldVal !== null) {
-                this.dispatchEvent(new CustomEvent('cameraSettingsChanged'));
-            }
-        }
-        if (name === 'camera-peek-angle-vertical') {
-            var angle = Number(newVal);
-            angle = angle > 0 ? angle : 0;
-            angle = angle < 1 ? angle : 1;
-            this.settings.cameraPeekAngleVertical = angle;
-            if (oldVal !== newVal && oldVal !== null) {
-                this.dispatchEvent(new CustomEvent('cameraSettingsChanged'));
-            }
-        }
-        if (name == 'camera-field-of-view') {
-            var fov = Number(newVal);
-            fov = fov > minFieldOfView ? fov : minFieldOfView;
-            fov = fov < maxFieldOfView ? fov : maxFieldOfView;
-            this.settings.cameraFieldOfView = fov;
-            if (oldVal !== newVal && oldVal !== null) {
-                this.dispatchEvent(new CustomEvent('cameraFieldOfViewChanged'));
-            }
-        }
-    }
-
-    connectedCallback() {
-        this.init();
-    }
-
-    init() {
-        // defined core threejs objects
-        const canvas = this.canvas;
-        const scene = new Scene();
-        const renderer = new WebGLRenderer({
-            alpha: true,
-            canvas,
-            antialias: true,
-        });
-        renderer.setSize(this.clientWidth, this.clientHeight);
-        renderer.setAnimationLoop(animate);
-        renderer.setPixelRatio(2);
-
-        //update renderer and camera when container resizes. debouncing events to reduce frequency
-        new ResizeObserver(
-            debounce((entries) => {
-                const { width, height } = entries[0].contentRect;
-                camera.aspect = width / height;
-                camera.updateProjectionMatrix();
-                renderer.setSize(width, height);
-            }, 30),
-        ).observe(this);
-
-        // add camera
-        const camera = new PerspectiveCamera(this.settings.cameraFieldOfView, this.clientWidth / this.clientHeight, 1, 2000);
-        const cameraSpherical = new Spherical(50, (3 * Math.PI) / 8, -Math.PI / 4);
-        camera.position.setFromSpherical(cameraSpherical);
-        /** @type {{ Up: boolean, Right: boolean }} */
-        const cameraState = { Up: true, Right: true };
-
-        // add orbit controls for camera
-        const controls = new OrbitControls(camera, renderer.domElement);
-        controls.enableZoom = false;
-        controls.enablePan = false;
-        controls.enableDamping = true;
-        controls.maxAzimuthAngle = maxAzimuthAngle;
-        controls.minAzimuthAngle = -maxAzimuthAngle;
-        controls.maxPolarAngle = polarAngleOffset + maxPolarAngle;
-        controls.minPolarAngle = polarAngleOffset - maxPolarAngle;
-
-        // add lighting to scene
-        const ambientLight = new AmbientLight('white', 0.5);
-        const spotLight1 = new DirectionalLight('white', 2);
-        const spotLight2 = new DirectionalLight('white', 2);
-        const spotLight3 = new DirectionalLight('white', 2);
-        const spotLight4 = new DirectionalLight('white', 2);
-        spotLight1.position.set(5, 5, 5);
-        spotLight2.position.set(-5, 5, 5);
-        spotLight3.position.set(5, -5, 0);
-        spotLight4.position.set(-10, -5, -5);
-        scene.add(ambientLight, spotLight1, spotLight2, spotLight3, spotLight4);
-
-        // create cube and add to scene
-        const cube = new Cube(this.settings);
-        scene.add(cube.group, cube.rotationGroup);
-
-        const sendState = (eventId) => {
-            const event = new CustomEvent('state', { detail: { eventId, state: cube.currentState } });
-            this.dispatchEvent(event);
-        };
-
-        // animation loop
-        function animate() {
-            controls.update();
-
-            var eventId = cube.update();
-            if (eventId) {
-                sendState(eventId);
-            }
-            renderer.render(scene, camera);
-        }
-
-        // add event listeners for rotation and camera controls
-        this.addEventListener('reset', () => {
-            cube.reset();
-            sendState('reset');
-        });
-
-        this.addEventListener('action', (e) => {
-            /**  @type {{eventId: string, action: {type: "movement" | "camera" | "rotation", actionId: string }}} move */
-            var move = e.detail.move;
-            if (move.action.type === 'camera') {
-                updateCameraState(move.action.actionId);
-                updateCameraPosition();
-                return;
-            }
-            if (move.action.type === 'movement' || move.action.type === 'rotation') {
-                handleRotationAction(move.eventId, move.action.actionId);
-                return;
-            }
-        });
-
-        /**
-         * @param {string} eventId
-         * @param {string} actionId
-         */
-        const handleRotationAction = (eventId, actionId) => {
-            const rotationDetails = getRotationDetailsFromNotation(actionId);
-            if (rotationDetails !== undefined) {
-                cube.rotate(eventId, rotationDetails);
-            }
-        };
-
-        /**
-         * @param {'peek-toggle-horizontal' | 'peek-toggle-vertical' | 'peek-right' | 'peek-left' | 'peek-up' | 'peek-down' } actionId
-         */
-        const updateCameraState = (actionId) => {
-            if (actionId === 'peek-toggle-horizontal') {
-                cameraState.Right = !cameraState.Right;
-            } else if (actionId === 'peek-toggle-vertical') {
-                cameraState.Up = !cameraState.Up;
-            } else if (actionId === 'peek-right') {
-                cameraState.Right = true;
-            } else if (actionId === 'peek-left') {
-                cameraState.Right = false;
-            } else if (actionId === 'peek-up') {
-                cameraState.Up = true;
-            } else if (actionId === 'peek-down') {
-                cameraState.Up = false;
-            }
-        };
-
-        /**
-         * @param {number | null} cameraSpeedMs
-         * @param {gsap.EaseString | gsap.EaseFunction | undefined} ease
-         */
-        const updateCameraPosition = (cameraSpeedMs = this.settings.cameraSpeedMs, ease = 'none') => {
-            cameraSpeedMs = cameraSpeedMs ? cameraSpeedMs : this.settings.cameraSpeedMs;
-            var phi = polarAngleOffset + (cameraState.Up ? -this.settings.cameraPeekAngleVertical : this.settings.cameraPeekAngleVertical) * maxPolarAngle;
-            var theta = (cameraState.Right ? this.settings.cameraPeekAngleHorizontal : -this.settings.cameraPeekAngleHorizontal) * maxAzimuthAngle;
-            const startSpherical = new Spherical().setFromVector3(camera.position);
-            const targetSpherical = new Spherical(this.settings.cameraRadius, phi, theta);
-            gsap.to(startSpherical, {
-                radius: targetSpherical.radius,
-                theta: targetSpherical.theta,
-                phi: targetSpherical.phi,
-                duration: cameraSpeedMs / 1000,
-                ease: ease,
-                onUpdate: function () {
-                    camera.position.setFromSpherical(startSpherical);
-                    camera.lookAt(cube.group.position);
-                    controls.update();
-                },
-            });
-        };
-
-        this.addEventListener('cameraSettingsChanged', () => {
-            updateCameraPosition(); // animate settings changes
-        });
-
-        this.addEventListener('cameraFieldOfViewChanged', () => {
-            camera.fov = this.settings.cameraFieldOfView;
-            camera.updateProjectionMatrix();
-        });
-
-        updateCameraPosition(1000, 'power4.inOut'); // initial animation
-    }
-}
-customElements.define('rubiks-cube', RubiksCube);

package/src/cube/cube.js

@@ -1,276 +0,0 @@
-import { Group, Vector3 } from 'three';
-import { createCoreMesh } from '../threejs/pieces';
-import { createCubeState } from './cubeState';
-import { CubeRotation } from './cubeRotation';
-
-export default class Cube {
-    /**
-     *   @param {import('../..').Settings} settings
-     */
-    constructor(settings) {
-        /** @type {import('../..').Settings} */
-        this.settings = settings;
-        /** @type {Group} */
-        this.group = this.createCubeGroup();
-        /** @type {Group} */
-        this.rotationGroup = new Group();
-        /** @type {CubeRotation[]} */
-        this.rotationQueue = [];
-        /** @type {CubeRotation | undefined} */
-        this.currentRotation = undefined;
-        /** @type {{ up: string[][], down: string[][], front: string[][], back: string[][], left: string[][], right: string[][] }} */
-        this.currentState = this.getStickerState();
-        /** @type {number | undefined} */
-        this._matchSpeed = undefined;
-        /** @type {number} */
-        this._lastGap = settings.gap;
-    }
-
-    /**
-     * creates a ThreeJS group with all the required pieces for a cube
-     * @param {Group} group
-     * @returns {Group}
-     */
-    createCubeGroup(group) {
-        var group = new Group();
-        const core = createCoreMesh();
-        core.userData = {
-            position: { x: 0, y: 0, z: 0 },
-            rotation: { x: 0, y: 0, z: 0 },
-            initialPosition: { x: 0, y: 0, z: 0 },
-            initialRotation: { x: 0, y: 0, z: 0 },
-            type: 'core',
-        };
-        group.add(core);
-
-        for (const piece of createCubeState()) {
-            var pieceGroup = piece.group;
-            pieceGroup.position.set(
-                piece.position.x * this.settings.pieceGap,
-                piece.position.y * this.settings.pieceGap,
-                piece.position.z * this.settings.pieceGap,
-            );
-            pieceGroup.rotation.set(piece.rotation.x, piece.rotation.y, piece.rotation.z);
-            pieceGroup.userData = {
-                position: Object.assign({}, piece.position),
-                rotation: Object.assign({}, piece.rotation),
-                initialPosition: Object.assign({}, piece.position),
-                initialRotation: Object.assign({}, piece.rotation),
-                type: piece.type,
-            };
-            group.add(pieceGroup);
-        }
-        return group;
-    }
-
-    /**
-     * update the cube and continue any rotations
-     * @returns {string}
-     */
-    update() {
-        if (this.currentRotation === undefined) {
-            if (this._lastGap !== this.settings.pieceGap) {
-                this.updateGap();
-            }
-            this.currentRotation = this.rotationQueue.shift();
-            if (this.currentRotation === undefined) {
-                this._matchSpeed = undefined; // reset speed for the match animation options
-                return undefined;
-            }
-        }
-        if (this.currentRotation.status === 'pending') {
-            this.rotationGroup.add(...this.getRotationLayer(this.currentRotation.rotation));
-            this.currentRotation.initialise();
-        }
-        if (this.currentRotation.status === 'initialised') {
-            var speed = this.getRotationSpeed();
-            this.currentRotation.update(this.rotationGroup, speed);
-        }
-        if (this.currentRotation.status === 'complete') {
-            this.clearRotationGroup();
-            var eventId = this.currentRotation.eventId;
-            this.currentRotation = undefined;
-            this.currentState = this.getStickerState();
-            return eventId;
-        }
-        return undefined;
-    }
-
-    /**
-     * Updates the gap of the pieces. To be used when the cube is not rotating
-     * @returns {void}
-     */
-    updateGap() {
-        if (this.currentRotation === undefined) {
-            this.group.children.forEach((piece) => {
-                var { x, y, z } = piece.userData.position;
-                piece.position.set(x * this.settings.pieceGap, y * this.settings.pieceGap, z * this.settings.pieceGap);
-            });
-            this._lastGap = this.settings.pieceGap;
-        }
-    }
-
-    /**
-     *
-     * calculates the current speed of the current rotation in ms.
-     * calculation is dependent on animation style and animation speed settings
-     * - exponential: speeds up rotations depending on the queue length
-     * - next: an animation speed of 0 when there is another animation in the queue
-     * - match: will match the speed of rotations to the frequency of key presses.
-     * - fixed: will return a constant value
-     * @returns {number}
-     */
-    getRotationSpeed() {
-        if (this.settings.animationStyle === 'exponential') {
-            return this.settings.animationSpeedMs / 2 ** this.rotationQueue.length;
-        }
-        if (this.settings.animationStyle === 'next') {
-            return this.rotationQueue.length > 0 ? 0 : this.settings.animationSpeedMs;
-        }
-        if (this.settings.animationStyle === 'match') {
-            if (this.rotationQueue.length > 0) {
-                var lastTimeStamp = this.currentRotation.timestampMs;
-                var minGap = this._matchSpeed ?? this.settings.animationSpeedMs;
-                for (var i = 0; i < this.rotationQueue.length; i++) {
-                    var gap = this.rotationQueue[i].timestampMs - lastTimeStamp;
-                    if (gap < minGap) {
-                        minGap = gap;
-                    }
-                }
-                this._matchSpeed = minGap;
-            }
-            if (this._matchSpeed !== undefined) {
-                return this._matchSpeed;
-            }
-            return this.settings.animationSpeedMs;
-        }
-        if (this.settings.animationStyle === 'fixed') {
-            return this.settings.animationSpeedMs;
-        }
-        return this.settings.animationSpeedMs;
-    }
-
-    /**
-     * Complete the current rotation and reset the cube
-     * @returns {void}
-     */
-    reset() {
-        this.rotationQueue = [];
-        if (this.currentRotation) {
-            this.currentRotation.update(this.rotationGroup, 0);
-            this.clearRotationGroup();
-            this.currentRotation = undefined;
-        }
-        this.group.children.forEach((piece) => {
-            const { x, y, z } = piece.userData.initialPosition;
-            const { x: u, y: v, z: w } = piece.userData.initialRotation;
-            piece.position.set(x * this.settings.pieceGap, y * this.settings.pieceGap, z * this.settings.pieceGap);
-            piece.rotation.set(u, v, w);
-            piece.userData.position.x = x;
-            piece.userData.position.y = y;
-            piece.userData.position.z = z;
-            piece.userData.rotation.x = u;
-            piece.userData.rotation.y = v;
-            piece.userData.rotation.z = w;
-        });
-    }
-
-    /**
-     * Adds pieces in the rotationGroup back into the main group.
-     * @returns {void}
-     */
-    clearRotationGroup() {
-        if (this.currentRotation.status != 'complete') {
-            throw Error('cannot clear rotation group while rotating');
-        }
-        this.rotationGroup.children.forEach((piece) => {
-            piece.getWorldPosition(piece.position);
-            piece.getWorldQuaternion(piece.quaternion);
-            var x = Math.round(piece.position.x);
-            var y = Math.round(piece.position.y);
-            var z = Math.round(piece.position.z);
-            piece.userData.position.x = Math.abs(x) > 1 ? Math.sign(x) : x;
-            piece.userData.position.y = Math.abs(y) > 1 ? Math.sign(y) : y;
-            piece.userData.position.z = Math.abs(z) > 1 ? Math.sign(z) : z;
-            piece.userData.rotation.x = piece.rotation.x;
-            piece.userData.rotation.y = piece.rotation.y;
-            piece.userData.rotation.z = piece.rotation.z;
-        });
-        this.group.add(...this.rotationGroup.children);
-        this.rotationGroup.rotation.set(0, 0, 0);
-        this.currentRotation.status = 'disposed';
-    }
-
-    /**
-     * @param {string} eventId
-     * @param {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}} input
-     */
-    rotate(eventId, input) {
-        this.rotationQueue.push(new CubeRotation(eventId, input));
-    }
-
-    /**
-     * @param {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}}
-     * @returns {Object3D[]}
-     */
-    getRotationLayer({ axis, layers, direction }) {
-        if (layers.length === 0) {
-            return [...this.group.children];
-        }
-        return this.group.children.filter((piece) => {
-            if (axis === 'x') {
-                return layers.includes(Math.round(piece.userData.position.x));
-            } else if (axis === 'y') {
-                return layers.includes(Math.round(piece.userData.position.y));
-            } else if (axis === 'z') {
-                return layers.includes(Math.round(piece.userData.position.z));
-            }
-            return false;
-        });
-    }
-
-    /**
-     * @returns {{ up: string[][], down: string[][], front: string[][], back: string[][], left: string[][], right: string[][] }}
-     */
-    getStickerState() {
-        const state = {
-            up: [[], [], []],
-            down: [[], [], []],
-            front: [[], [], []],
-            back: [[], [], []],
-            left: [[], [], []],
-            right: [[], [], []],
-        };
-        this.group.children.forEach((piece) => {
-            if (piece.userData.type === 'core') {
-                return;
-            }
-            piece.children.forEach((mesh) => {
-                if (mesh.userData.type === 'sticker') {
-                    const piecepos = new Vector3();
-                    piecepos.copy(piece.userData.position);
-                    piecepos.round();
-                    const stickerpos = new Vector3();
-                    mesh.getWorldPosition(stickerpos);
-                    stickerpos.sub(piecepos);
-                    stickerpos.multiplyScalar(2);
-                    stickerpos.round();
-                    if (stickerpos.x === 1) {
-                        state.right[1 - Math.round(piecepos.y)][1 - Math.round(piecepos.z)] = mesh.material.userData.face;
-                    } else if (stickerpos.x === -1) {
-                        state.left[1 - Math.round(piecepos.y)][1 + Math.round(piecepos.z)] = mesh.material.userData.face;
-                    } else if (stickerpos.y === 1) {
-                        state.up[1 + Math.round(piecepos.z)][1 + Math.round(piecepos.x)] = mesh.material.userData.face;
-                    } else if (stickerpos.y === -1) {
-                        state.down[1 - Math.round(piecepos.z)][1 + Math.round(piecepos.x)] = mesh.material.userData.face;
-                    } else if (stickerpos.z === 1) {
-                        state.front[1 - Math.round(piecepos.y)][1 + Math.round(piecepos.x)] = mesh.material.userData.face;
-                    } else if (stickerpos.z === -1) {
-                        state.back[1 - Math.round(piecepos.y)][1 - Math.round(piecepos.x)] = mesh.material.userData.face;
-                    }
-                }
-            });
-        });
-        return state;
-    }
-}

package/src/cube/cubeRotation.js

@@ -1,63 +0,0 @@
-import { Vector3, Group } from 'three';
-
-export class CubeRotation {
-    /**
-     * @param {string} eventId
-     * @param {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}} rotationDetails
-     */
-    constructor(eventId, rotationDetails) {
-        /** @type {string} */
-        this.eventId = eventId;
-        /** @type {{axis: "x"|"y"|"z", layers: (-1|0|1)[], direction: 1|-1|2|-2}} */
-        this.rotation = rotationDetails;
-        /** @type {"pending" | "initialised" | "complete" | "disposed"} */
-        this.status = 'pending';
-        /** @type {number} */
-        this.timestampMs = performance.now();
-        /** @type {number} */
-        this._lastUpdatedTimeMs = undefined;
-        /** @type {number} */
-        this._rotationPercentage = 0;
-    }
-
-    initialise() {
-        this._lastUpdatedTimeMs = performance.now();
-        this.status = 'initialised';
-    }
-
-    /**
-     *
-     * @param {Group} rotationGroup
-     * @param {number} speedMs
-     */
-    update(rotationGroup, speedMs) {
-        var intervalMs = performance.now() - this._lastUpdatedTimeMs;
-        this._lastUpdatedTimeMs = performance.now();
-
-        var increment = 100 - this._rotationPercentage;
-        if (speedMs != 0) {
-            var potentialIncrement = (intervalMs / speedMs) * 100;
-            if (potentialIncrement + this._rotationPercentage < 100) {
-                increment = potentialIncrement;
-            }
-        }
-        const rotationIncrement = (Math.abs(this.rotation.direction) * ((increment / 100) * Math.PI)) / 2;
-        this._rotationPercentage += increment;
-        rotationGroup.rotateOnWorldAxis(
-            new Vector3(
-                this.rotation.axis === 'x' ? this.rotation.direction : 0,
-                this.rotation.axis === 'y' ? this.rotation.direction : 0,
-                this.rotation.axis === 'z' ? this.rotation.direction : 0,
-            ).normalize(),
-            rotationIncrement,
-        );
-
-        if (this._rotationPercentage === 100) {
-            this.status = 'complete';
-        }
-
-        if (this._rotationPercentage > 100) {
-            throw new Error('rotation percentage > 100');
-        }
-    }
-}

package/src/threejs/materials.js

@@ -1,42 +0,0 @@
-import { MeshStandardMaterial, MeshBasicMaterial } from "three";
-export default class Materials {
-  static front = new MeshStandardMaterial({
-    color: "#2cbf13",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "front", color: "green" },
-  });
-  static back = new MeshStandardMaterial({
-    color: "blue",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "back", color: "blue" },
-  });
-  static up = new MeshStandardMaterial({
-    color: "white",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "up", color: "white" },
-  });
-  static down = new MeshStandardMaterial({
-    color: "yellow",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "down", color: "yellow" },
-  });
-  static left = new MeshStandardMaterial({
-    color: "#fc9a05",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "left", color: "orange" },
-  });
-  static right = new MeshStandardMaterial({
-    color: "red",
-    metalness: 0,
-    roughness: 0.4,
-    userData: { face: "right", color: "red" },
-  });
-  static core = new MeshBasicMaterial({
-    color: "black",
-  });
-}