mirror of
https://github.com/RGBCube/Site
synced 2025-07-30 20:47:46 +00:00
cube: multicube support
This commit is contained in:
parent
23bdfef6cc
commit
0ffe6c39b1
3 changed files with 11 additions and 4 deletions
|
@ -39,4 +39,5 @@ prevent_zoom: true
|
|||
{{ set cube_face_bottom = cube_face }}
|
||||
|
||||
{{ set cube_size = "5rem" }}
|
||||
{{ set cube_last = true }}
|
||||
{{ include "cube.vto" }}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -42,4 +42,5 @@ prevent_zoom: true
|
|||
{{ /set }}
|
||||
|
||||
{{ set cube_size = "5rem" }}
|
||||
{{ set cube_last = true }}
|
||||
{{ include "rgbcube.vto" }}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue