RGBCube/rgbcube.github.io
1
Fork 0
mirror of https://github.com/RGBCube/rgbcube.github.io synced 2025-05-16 15:04:58 +00:00
Code Issues Activity Actions

Clean up code and disable velocity for now

Browse source
This commit is contained in:
RGBCube 2023-12-19 18:23:16 +03:00
parent 4eed4e5eab
commit a8c87c164a
No known key found for this signature in database
1 changed files with 18 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

42
cube.js
View file

@ -1,11 +1,6 @@
"use strict"; "use strict";
const __cube = document.querySelector(".cube");
class Vec3 { class Vec3 {
static up = new Vec3(0, 1, 0);
static right = new Vec3(1, 0, 0);
constructor(x, y, z) { constructor(x, y, z) {
this.x = x; this.x = x;
this.y = y; this.y = y;
@ -20,6 +15,8 @@ class Vec3 {
this.x *= factor; this.x *= factor;
this.y *= factor; this.y *= factor;
this.z *= factor; this.z *= factor;
return this;
} }
normalize() { normalize() {
@ -30,6 +27,8 @@ class Vec3 {
this.y /= length; this.y /= length;
this.z /= length; this.z /= length;
} }
return this;
} }
static sub(v, t) { static sub(v, t) {
@ -51,6 +50,7 @@ class Quat {
static fromAxis(axis) { static fromAxis(axis) {
const angle = axis.length(); const angle = axis.length();
axis.normalize(); axis.normalize();
const half = angle / 2; const half = angle / 2;
@ -74,10 +74,6 @@ class Quat {
q.w * r.w - q.x * r.x - q.y * r.y - q.z * r.z, q.w * r.w - q.x * r.x - q.y * r.y - q.z * r.z,
); );
} }
apply() {
__cube.style.transform = `rotate3d(${this.x}, ${this.y}, ${this.z}, ${Math.acos(this.w) * 2}rad)`;
}
} }
let friction = 3; let friction = 3;
@ -85,11 +81,14 @@ let sensitivity = 0.01;
let velocity = new Vec3(0, 0, 0); let velocity = new Vec3(0, 0, 0);
const orientation = { const orientation = {
__cube: document.querySelector(".cube"),
__value: new Quat(0, 0, 0, 1), __value: new Quat(0, 0, 0, 1),
set(value) { set(value) {
this.__value = value; this.__value = value;
this.__value.apply();
const q = this.__value;
this.__cube.style.transform = `rotate3d(${q.x}, ${q.y}, ${q.z}, ${Math.acos(q.w) * 2}rad)`;
}, },
get() { get() {
@ -97,7 +96,7 @@ const orientation = {
}, },
}; };
(() => { {
const mouse = { const mouse = {
down: false, down: false,
lastMove: 0, lastMove: 0,
@ -128,17 +127,13 @@ const orientation = {
mouse.previous = newMouse; mouse.previous = newMouse;
mouse.lastMove = window.performance.now(); mouse.lastMove = window.performance.now();
const axis = new Vec3(-delta.y, delta.x, 0); const axis = new Vec3(-delta.y, delta.x, 0)
axis.normalize(); .normalize()
axis.scale(delta.length() * sensitivity); .scale(delta.length() * sensitivity);
const rotation = Quat.fromAxis(axis); const rotation = Quat.fromAxis(axis);
orientation.set(Quat.mul(rotation, orientation.get())); orientation.set(Quat.mul(rotation, orientation.get()));
console.log(timeDelta);
velocity.x += axis.x / timeDelta;
velocity.y += axis.y / timeDelta;
}; };
document.addEventListener("mousemove", handleMove); document.addEventListener("mousemove", handleMove);
@ -171,13 +166,11 @@ const orientation = {
const delta = (timestamp - lastUpdate) / 1000; const delta = (timestamp - lastUpdate) / 1000;
lastUpdate = timestamp; lastUpdate = timestamp;
const axis = new Vec3(velocity.x, velocity.y, velocity.z);
const omega = velocity.length();
const decay = Math.exp(-delta * friction); const decay = Math.exp(-delta * friction);
const effectiveDelta = friction > 0 ? (1 - decay) / friction : delta; const effectiveDelta = friction > 0 ? (1 - decay) / friction : delta;
let theta = effectiveDelta * omega; let theta = effectiveDelta * velocity.length();
velocity.x *= decay; velocity.x *= decay;
velocity.y *= decay; velocity.y *= decay;
@ -191,8 +184,9 @@ const orientation = {
velocity.z = 0; velocity.z = 0;
} }
axis.normalize(); const axis = new Vec3(velocity.x, velocity.y, velocity.z)
axis.scale(theta); .normalize()
.scale(theta);
const rotation = Quat.fromAxis(axis); const rotation = Quat.fromAxis(axis);
@ -202,4 +196,4 @@ const orientation = {
}; };
updateFrame(0); updateFrame(0);
})(); }