1
Fork 0
mirror of https://github.com/RGBCube/Site synced 2025-07-30 20:47:46 +00:00

cube: multicube support

This commit is contained in:
RGBCube 2025-06-03 03:50:41 +03:00
parent 23bdfef6cc
commit 0ffe6c39b1
Signed by: RGBCube
SSH key fingerprint: SHA256:CzqbPcfwt+GxFYNnFVCqoN5Itn4YFrshg1TrnACpA5M
3 changed files with 11 additions and 4 deletions

View file

@ -39,4 +39,5 @@ prevent_zoom: true
{{ set cube_face_bottom = cube_face }}
{{ set cube_size = "5rem" }}
{{ set cube_last = true }}
{{ include "cube.vto" }}

View file

@ -1,3 +1,4 @@
{{ if cube_last }}
<style>
cube-face {
height: {{ cube_size }};
@ -14,6 +15,7 @@
.cube-face-right { transform: rotateY( 89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
.cube-face-left { transform: rotateY(-89.99999999999999deg) translateZ(calc({{ cube_size }} / 2 - 1px)); }
</style>
{{ /if }}
<cube-scene class="
flex items-center justify-center
@ -33,6 +35,7 @@
</cube-itself>
</cube-scene>
{{ if cube_last }}
<script>
"use strict";
@ -117,15 +120,16 @@
};
const orient = {
element: document.querySelector("cube-itself"),
elements: document.querySelectorAll("cube-itself"),
quat: Quat(0, 0, 0, 1),
set(q) {
this.quat = q;
this.element.style.transform = `rotate3d(${q.x}, ${q.y}, ${q.z}, ${
Math.acos(q.w) * 2
}rad)`;
for (const element of this.elements) {
element.style.transform =
`rotate3d(${q.x}, ${q.y}, ${q.z}, ${Math.acos(q.w) * 2}rad)`;
}
},
get() {
@ -265,3 +269,4 @@
updateFrame(0);
</script>
{{ /if }}

View file

@ -42,4 +42,5 @@ prevent_zoom: true
{{ /set }}
{{ set cube_size = "5rem" }}
{{ set cube_last = true }}
{{ include "rgbcube.vto" }}