g1smo
/
wavey-wind
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

WIP quaternioni

rob
Jurij Podgoršek 2021-12-24 07:17:42 +01:00
parent 381fed824e
commit 02ec213e1d
6 changed files with 181 additions and 4374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
anim.js
View File

@ -46,10 +46,24 @@ var barva_mod = 0.003;
var saturacija = 1;
var svetlost = 0.4;
// Rotiranje kamere
var kameraX = 0;
var kameraY = 0;
var kameraZ = 0;
// Quaternioni za rotacijo in kalibracijo
var qWW = new THREE.Quaternion(-1, 0, 0, 0);
var qWWo = new THREE.Quaternion(-1, 0, 0, 0);
var qObj = new THREE.Quaternion(-1, 0, 0, 0);
var qOld = new THREE.Quaternion(-1, 0, 0, 0);
var qStart = new THREE.Quaternion(-1, 0, 0, 0);
var qCalibrate = new THREE.Quaternion();
var calibrate = true;
var reset = false;
// Gumbi in pa pospesek
var keysPressed = [0, 0, 0, 0];
var accel = [0, 0, 0];
// Scena, kamera in render
scene = new THREE.Scene;
@ -72,26 +86,50 @@ renderer.setClearColor(0x000000, 1);
function render () {
requestAnimationFrame(render);
stevec += 1;
requestAnimationFrame(render);
stevec += 1;
// Dodaj objekt vcasih
if (stevec % gostota_obj === 0) {
addObj(width, width);
}
renderer.render(scene, camera);
// Dodaj objekt vcasih
if (stevec % gostota_obj === 0) {
addObj(width, width);
}
renderer.render(scene, camera);
objAnim();
camRotate();
modulirajParametre();
objAnim();
camRotate();
};
function modulirajParametre() {
// Vsi gumbi? => RESET
if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4 && !reset) {
reset = true;
window.location.reload()
}
// Posodobi kvaternion polozaja kontrolerja
qObj = qWW.clone();
qObj.multiply(qStart);
if (calibrate) {
qStart = qWW.clone();
qStart.conjugate();
calibrate = false;
console.log("RESET!");
}
// Rotiranje manualno (z rocnimi gibi "iz sredine")
if (keysPressed[2]) {
objekti[0].rotation.apply
}
}
// Funkcija za animacijo objektov
function objAnim() {
objekti.map(function (obj) {
obj.rotation.x += drotacijaX / 100;
obj.rotation.y += drotacijaY / 100;
obj.rotation.z += drotacijaZ / 100;
obj.setRotationFromQuaternion(quaternion);
obj.scale.z += width / 4;
obj.scale.y += width / 4;
@ -103,36 +141,42 @@ function objAnim() {
// Funkcija za dodajanje novih objektov
function addObj(w, h) {
var col = new THREE.Color();
col.setHSL(stevec * barva_mod, saturacija, svetlost);
var col = new THREE.Color();
col.setHSL(stevec * barva_mod, saturacija, svetlost);
var mat = new THREE.LineBasicMaterial({
color: col
});
var mat = new THREE.LineBasicMaterial({
color: col
});
var geo = new THREE.Geometry();
var geo = new THREE.BufferGeometry();
var offset = h / 2;
var offset = h / 2;
geo.vertices.push(new THREE.Vector3(-offset, 0, 0), new THREE.Vector3(0, offset, 0));
geo.vertices.push(new THREE.Vector3(-offset, 0, 0), new THREE.Vector3(0, -offset, 0));
geo.vertices.push(new THREE.Vector3(offset, 0, 0), new THREE.Vector3(0, offset, 0));
geo.vertices.push(new THREE.Vector3(offset, 0, 0), new THREE.Vector3(0, -offset, 0));
// Karo
var vertices = new Float32Array([
-offset, 0, 0, 0, offset, 0,
-offset, 0, 0, 0, -offset, 0,
offset, 0, 0, 0, offset, 0,
offset, 0, 0, 0, -offset, 0
]);
var obj = new THREE.Line(geo, mat, THREE.LineSegments);
// 3d objekt (3 komponente na vertex)
geo.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
scene.add(obj);
obj.rotation.x = rotacijaX;
obj.rotation.y = rotacijaY;
obj.rotation.z = rotacijaZ;
var obj = new THREE.Line(geo, mat, THREE.LineSegments);
// Pocisti za seboj
if (objekti.push(obj) > obj_limit) {
while (objekti.length > obj_limit) {
scene.remove(objekti[0]);
objekti.shift();
}
scene.add(obj);
obj.rotation.x = rotacijaX;
obj.rotation.y = rotacijaY;
obj.rotation.z = rotacijaZ;
// Pocisti za seboj
if (objekti.push(obj) > obj_limit) {
while (objekti.length > obj_limit) {
scene.remove(objekti[0]);
objekti.shift();
}
}
};
var xAksa = new THREE.Vector3(0, 1, 0);
@ -175,10 +219,6 @@ function onWindowResize() {
window.addEventListener('resize', onWindowResize, false);
var keysPressed = [0, 0, 0, 0];
var gyro = [0, 0, 0];
var accel = [0, 0, 0];
const getVal = function (msg) {
return msg.value;
}
@ -189,14 +229,23 @@ oscCallbacks = {
keysPressed = args.map(getVal);
}
],
'/quaternion/': [
function (args) {
console.log(1);
// Popravimo osi (w x y z po defaultu HMM)
qWWo = qWW.clone();
[qWW.w, qWW.z, qWW.x, qWW.y] = args.map(getVal);
// Dve sta obratno :)
qWW.x *= -1;
qWW.z *= -1;
}
],
/*
'/gyro/': [
function (args) {
var [gx, gy, gz] = args.map(getVal);
console.log(keysPressed)
if (keysPressed[0] && keysPressed[1] && keysPressed[2] && keysPressed[3]) {
window.location.reload()
}
if (keysPressed[2]) {
rotacijaX += gyro[0] - gx
@ -224,5 +273,6 @@ oscCallbacks = {
gyro = [gx, gy, gz]
}
]
],
*/
}

9
index.html
View File

@ -3,15 +3,12 @@
<meta charset="UTF-8">
<title>wavey wind</title>
<style type="text/css">
body {
margin: 0
}
body { margin: 0; }
</style>
</head>
<body>
<div id="anim-container">
</div>
<div id="anim-container"></div>
<script src="node_modules/three/build/three.min.js"></script>
<script src="node_modules/osc/dist/osc-browser.js"></script>
<script src="anim.js"></script>

1
osctl.js
View File

@ -20,7 +20,6 @@ oscPort.on("ready", function () {
});
*/
oscPort.on("message", function (msg) {
//console.log("OSC message", msg.address, oscCallbacks);
oscCallbacks[msg.address].forEach(cb => cb(msg.args))
});
});

4319
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -8,7 +8,7 @@
"nouislider": "14.6.2",
"osc": "^2.4.2",
"pm2": "^5.1.0",
"three": "0.120.1",
"three": "0.135.0",
"ws": "^7.3.1"
},
"scripts": {

94
test.js
View File

@ -15,11 +15,16 @@ var width = 25;
var height = 150;
var depth = 50;
// Parametri animacije (euler)
// Parametri rotacije (euler)
var rotacijaX = 0.000;
var rotacijaY = 0.000;
var rotacijaZ = 0.000;
// Parametri pospeska
var accX = 0.000;
var accY = 0.000;
var accZ = 0.000;
// Scena, kamera in render
scene = new THREE.Scene;
@ -36,56 +41,73 @@ renderer.setClearColor(0xFFFFFF, 1);
// Črno ozadje
//renderer.setClearColor(0x000000, 1);
var skupina = new THREE.Group();
// Dodaj test skatlo
var geo = new THREE.BoxGeometry(width, height, depth);
var mat = new THREE.MeshBasicMaterial({
color: 0xff00ff,
wireframe: true
});
var cube = new THREE.Mesh(geo, mat);
var start = false;
skupina.add(cube);
// Za pospeskomer - os X
var gAX = new THREE.CylinderGeometry(10, 10, 10, 16);
var mAX = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var AX = new THREE.Mesh(gAX, mAX);
skupina.add(AX);
// Damo vse skupaj v kader
scene.add(skupina);
// Quaternioni za rotacijo in kalibracijo
var qWW = new THREE.Quaternion();
var qObj = new THREE.Quaternion(-1, 0, 0, 0);
var qStart = null;
var qStart = new THREE.Quaternion(-1, 0, 0, 0);
var qCalibrate = new THREE.Quaternion();
var reset = false;
var cube = new THREE.Mesh(geo, mat);
scene.add(cube); //
var objekti = [cube];
function render () {
requestAnimationFrame(render);
renderer.render(scene, camera);
requestAnimationFrame(render);
renderer.render(scene, camera);
if (start) {
objAnim();
} else {
if (qWW) {
qStart = qWW.clone();
qStart.inverse();
start = true;
}
}
objAnim();
};
// Funkcija za animacijo objektov
function objAnim() {
objekti.map(function (obj) {
//obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
//newq = quaternion.clone();
//newq.multiplyQuaternions(quaternion, conjugation);
//newq.multiply(conjugation);
//quaternion.premultiply(conjugation);
//quaternion.normalize();
//console.log(quaternion);
//obj.setRotationFromQuaternion(THREE.Quaternion.multiplyQuaternions(quaternion, conjugation));
//quaterion = new THREE.Quaternion(-1, 0, 0, 0);
//qObj = qWW.clone();
//qObj.multiply(qStart);
obj.setRotationFromQuaternion(qWW);
//obj.setRotationFromQuaternion(conjugation);
console.log(obj.rotation.x);
// Apliciramo rotacijo (po quaternionih - eulerji zajebavajo.)
qObj = qWW.clone();
qObj.multiply(qStart);
obj.setRotationFromQuaternion(qObj);
AX.scale.x = accX;
console.log(accX);
});
// Drzimo vse stiri gumbe (reset)? - kalibracija!
if ((keysPressed[0] + keysPressed[1] + keysPressed[2] + keysPressed[3]) === 4) {
if (!reset) {
qStart = qWW.clone();
qStart.conjugate();
reset = true;
console.log("RESET!");
}
} else {
if (reset) {
reset = false;
console.log("reset off....");
}
}
};
@ -117,12 +139,22 @@ const getVal = function (msg) {
oscCallbacks = {
'/keys/': [
function(args) {
keysPressed = [...args];
keysPressed = args.map(getVal);
}
],
'/quaternion/': [
function (args) {
[qWW.w, qWW.x, qWW.y, qWW.z] = args.map(getVal);
// Popravimo osi (w x y z po defaultu HMM)
[qWW.w, qWW.z, qWW.x, qWW.y] = args.map(getVal);
// Dve sta obratno :)
qWW.x *= -1;
qWW.z *= -1;
}
],
'/accel/': [
function (args) {
console.log('accel', args.map(getVal));
[accX, accY, accZ] = args.map(getVal);
}
],
'/gyro/': [