mirror of
https://github.com/RGBCube/rgbcube.github.io
synced 2025-07-24 15:37:41 +00:00
Make code more readable
This commit is contained in:
parent
fde2ecb25a
commit
40f1327d08
1 changed files with 69 additions and 53 deletions
122
index.html
122
index.html
|
@ -224,13 +224,45 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
class Quaternion {
|
||||
static __cube = document.querySelector(".cube");
|
||||
const __cube = document.querySelector(".cube");
|
||||
|
||||
static up = new Quaternion({x: 0, y: 1, z: 0, w: 0});
|
||||
static right = new Quaternion({x: 1, y: 0, z: 0, w: 0});
|
||||
class Vec3 {
|
||||
static up = new Vec3(0, 1, 0);
|
||||
static right = new Vec3(1, 0, 0);
|
||||
|
||||
constructor({x, y, z, w}) {
|
||||
constructor(x, y, z) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.z = z;
|
||||
}
|
||||
|
||||
normalize() {
|
||||
const length = Math.sqrt(this.x ** 2 + this.y ** 2 + this.z ** 2);
|
||||
|
||||
if (length != 0) {
|
||||
this.x /= length;
|
||||
this.y /= length;
|
||||
this.z /= length;
|
||||
}
|
||||
}
|
||||
|
||||
static sub(v, t) {
|
||||
return new Vec3(
|
||||
v.x - t.x,
|
||||
v.y - t.y,
|
||||
v.z - t.z,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
class Vec2 extends Vec3 {
|
||||
constructor(x, y) {
|
||||
super(x, y, 0)
|
||||
}
|
||||
}
|
||||
|
||||
class Quat {
|
||||
constructor(x, y, z, w) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.z = z;
|
||||
|
@ -250,30 +282,20 @@
|
|||
const z = axis.z * sinHalf;
|
||||
const w = cosHalf;
|
||||
|
||||
return new Quaternion({x: x, y: y, z: z, w: w});
|
||||
return new Quat(x, y, z, w);
|
||||
}
|
||||
|
||||
static mul(q, r) {
|
||||
return new Quat(
|
||||
q.w * r.x + q.x * r.w + q.y * r.z - q.z * r.y,
|
||||
q.w * r.y - q.x * r.z + q.y * r.w + q.z * r.x,
|
||||
q.w * r.z + q.x * r.y - q.y * r.x + q.z * r.w,
|
||||
q.w * r.w - q.x * r.x - q.y * r.y - q.z * r.z,
|
||||
);
|
||||
}
|
||||
|
||||
apply() {
|
||||
Quaternion.__cube.style.transform = `rotate3d(${this.x}, ${this.y}, ${this.z}, ${this.w}rad)`;
|
||||
}
|
||||
|
||||
normalize() {
|
||||
const length = Math.sqrt(this.x ** 2 + this.y ** 2 + this.z ** 2);
|
||||
|
||||
if (length != 0) {
|
||||
this.x /= length;
|
||||
this.y /= length;
|
||||
this.z /= length;
|
||||
}
|
||||
}
|
||||
|
||||
static multiply(q, r) {
|
||||
return new Quaternion({
|
||||
x: q.w * r.x + q.x * r.w + q.y * r.z - q.z * r.y,
|
||||
y: q.w * r.y - q.x * r.z + q.y * r.w + q.z * r.x,
|
||||
z: q.w * r.z + q.x * r.y - q.y * r.x + q.z * r.w,
|
||||
w: q.w * r.w - q.x * r.x - q.y * r.y - q.z * r.z,
|
||||
});
|
||||
__cube.style.transform = `rotate3d(${this.x}, ${this.y}, ${this.z}, ${this.w}rad)`;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -282,7 +304,7 @@
|
|||
let velocity = 0;
|
||||
|
||||
const orientation = {
|
||||
__value: new Quaternion({x: 0, y: 0, z: 0, w: 1}),
|
||||
__value: new Quat(0, 0, 0, 1),
|
||||
|
||||
set(value) {
|
||||
this.__value = value;
|
||||
|
@ -298,10 +320,7 @@
|
|||
const mouse = {
|
||||
down: false,
|
||||
lastMove: window.performance.now(),
|
||||
previous: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
previous: new Vec2(0, 0),
|
||||
};
|
||||
|
||||
document.addEventListener("mouseleave", () => {
|
||||
|
@ -312,36 +331,33 @@
|
|||
mouse.down = false;
|
||||
});
|
||||
|
||||
document.addEventListener("mousedown", () => {
|
||||
document.addEventListener("mousedown", (event) => {
|
||||
// Disables link dragging that occurs when spinning.
|
||||
event.preventDefault();
|
||||
mouse.down = true;
|
||||
});
|
||||
|
||||
document.addEventListener("mousemove", (event) => {
|
||||
if (mouse.down) {
|
||||
const newMouse = {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
};
|
||||
if (!mouse.down) return;
|
||||
|
||||
if (window.performance.now() - mouse.lastMove > 100) {
|
||||
mouse.previous = newMouse;
|
||||
}
|
||||
|
||||
const delta = {
|
||||
x: newMouse.x - mouse.previous.x,
|
||||
y: newMouse.y - mouse.previous.y,
|
||||
};
|
||||
const newMouse = new Vec2(event.clientX, event.clientY);
|
||||
|
||||
if (window.performance.now() - mouse.lastMove > 100) {
|
||||
// This is a fresh scroll.
|
||||
mouse.previous = newMouse;
|
||||
mouse.lastMove = window.performance.now();
|
||||
|
||||
const rotation = Quaternion.multiply(
|
||||
Quaternion.fromAngleAxis(delta.x * sensitivity, Quaternion.up),
|
||||
Quaternion.fromAngleAxis(delta.y * sensitivity, Quaternion.right),
|
||||
);
|
||||
|
||||
orientation.set(Quaternion.multiply(orientation.get(), rotation));
|
||||
}
|
||||
|
||||
const delta = Vec2.sub(newMouse, mouse.previous);
|
||||
|
||||
mouse.previous = newMouse;
|
||||
mouse.lastMove = window.performance.now();
|
||||
|
||||
const rotation = Quat.mul(
|
||||
Quat.fromAngleAxis(delta.x * sensitivity, Vec3.up),
|
||||
Quat.fromAngleAxis(delta.y * sensitivity, Vec3.right),
|
||||
);
|
||||
|
||||
orientation.set(Quat.mul(orientation.get(), rotation));
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue