RGBCube/Site
1
Fork 0
mirror of https://github.com/RGBCube/Site synced 2025-07-31 13:07:46 +00:00
Code Issues Activity Actions

cube: multicube support

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

1
site/404.vto
View file

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

13
site/_includes/cube.vto
View file

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

1
site/index.vto
View file

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