WIP quaternion animacija, ciscenje

anim.js

@@ -54,7 +54,7 @@ var kameraZ = 0;
 // Scena, kamera in render
 scene = new THREE.Scene;
 
-camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 0.1, 2000);
+camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 1, 10000);
 camera.position.z = odmik_kamere;
 
 renderer = new THREE.WebGLRenderer({
@@ -91,6 +91,7 @@ function objAnim() {
     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;

test.js

@@ -1,15 +1,12 @@
 console.log("Hello, Sky!");
 
 /**** ☭☭☭☭☭☭☭☭☭☭☭☭ ******
-/☭☭☭☭ Parametri razni ☭☭☭☭ *
+/☭☭☭☭  Test skripta   ☭☭☭☭ *
 ******☭☭☭☭☭☭☭☭☭☭☭☭******/
 
 // Odmik kamere
 var odmik_kamere = 100;
 
-// Rotacija kamere
-var cam_rot_offset = 1;
-
 // Vidni kot
 var FOV = 140;
 
@@ -18,27 +15,11 @@ var width = 25;
 var height = 150;
 var depth = 50;
 
-// Stevec, za razno animiranje
+// Parametri animacije (euler)
-var stevec = 0;
-
-// Parametri animacije
 var rotacijaX = 0.000;
 var rotacijaY = 0.000;
 var rotacijaZ = 0.000;
 
-// Pozicija
-var posX = 0;
-var posY = 0;
-var posZ = 0;
-
-// Zamik pri novem objektu
-var barva = 0.333;
-var saturacija = 1;
-var svetlost = 0.4;
-
-// Drugi parametri
-var wDiff = 0.5;
-
 // Scena, kamera in render
 scene = new THREE.Scene;
 
@@ -62,7 +43,9 @@ var mat = new THREE.MeshBasicMaterial({
   wireframe: true
 });
 // quaternion = new THREE.Quaternion();
-quaternion = null;
+var quaternion = null;
+var conjugation = null;
+
 var cube = new THREE.Mesh(geo, mat);
 scene.add(cube);                // 
 
@@ -70,65 +53,26 @@ var objekti = [cube];
 
 function render () {
     requestAnimationFrame(render);
-
-    stevec += 1;
     renderer.render(scene, camera);
-
     objAnim();
-    //camRotate();
 };
 
 // Funkcija za animacijo objektov
 function objAnim() {
   objekti.map(function (obj) {
-    obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
+    if (conjugation) {
-    /*
+      //obj.setRotationFromEuler(new THREE.Euler(rotacijaY, -rotacijaX, rotacijaZ, 'XYZ'));
-    if (quaternion) {
+      newq = quaternion.clone();
-      obj.setRotationFromQuaternion(new THREE.Quaternion(...quaternion));
+      //newq.multiplyQuaternions(quaternion, conjugation);
+      //newq.multiply(conjugation);
+      //obj.setRotationFromQuaternion(THREE.Quaternion.multiplyQuaternions(quaternion, conjugation));
+      obj.setRotationFromQuaternion(newq);
+      console.log(obj.rotation.x);
     }
-    */
-
-    /*
-    obj.rotation.y = -rotacijaX;
-    obj.rotation.x = rotacijaY;
-    obj.rotation.z = rotacijaZ;
-    */
-
-    /*
-    const cor = 0.8;
-    obj.position.x += posX / 1000;
-    obj.position.x *= cor;
-    obj.position.y += posY / 1000;
-    obj.position.y *= cor;
-    obj.position.z += posZ / 1000;
-    obj.position.z *= cor;
-    */
   });
 };
 
 
-var xAksa = new THREE.Vector3(0, 1, 0);
-function camRotate () {
-    // rotiraj po z osi
-    camera.translateX(cam_rot_offset);
-    camera.translateZ(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2)));
-
-    /*
-    camera.translateY(cam_rot_offset);
-    camera.translateX(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2)));
-
-    camera.translateY(cam_rot_offset);
-    camera.translateX(odmik_kamere - Math.sqrt(Math.pow(odmik_kamere, 2) + Math.pow(cam_rot_offset, 2)));
-
-
-
-    camera.position.x = Math.sin((stevec % 10) / 10) * cam_rot_offset;
-    camera.position.y = Math.cos((stevec % 10) / 10) * cam_rot_offset;
-    */
-
-    camera.lookAt(scene.position);
-};
-
 // Inicializiraj
 document.onreadystatechange = function () {
     if (document.readyState === 'complete') {
@@ -150,22 +94,30 @@ window.addEventListener('resize', onWindowResize, false);
 // Poslusaj OSC evente
 keysPressed = [0, 0, 0, 0];
 
+const getVal = function (msg) {
+  return msg.value;
+}
+
 oscCallbacks = {
   '/keys/': [
     function(args) {
       keysPressed = [...args];
     }
   ],
-  /*
   '/quaternion/': [
     function (args) {
-      quaternion = args.map(function (a) { return a.value; });
+      if (quaternion) {
+        [quaternion.w, quaternion.x, quaternion.y, quaternion.z] =  args.map(getVal);
+      } else {
+        quaternion = new THREE.Quaternion(args[0], args[1], args[2], args[3]);
+        conjugation = quaternion.clone();
+        conjugation.conjugate();
       }
-  ]
+    }
-  */
+  ],
   '/gyro/': [
     function (args) {
-      [rotacijaX, rotacijaY, rotacijaZ] = args.map(function (a) { return a.value; });
+      [rotacijaX, rotacijaY, rotacijaZ] = args.map(getVal);
     }
   ]
 }