fix(quaternion): quaternion toJSON returns matrix3x3 properties

basics · Apr 9, 2020 · 03b96e9 · 03b96e9
1 parent 87808ac
commit 03b96e9
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 14 deletions.
diff --git a/src/quaternion.js b/src/quaternion.js
@@ -1,9 +1,6 @@
-
 // @ts-nocheck
-import {
-  FORWARD, LEFT, RIGHT, UP, Vector, Victor
-} from './vector';
-import { isArray, multQuatVec } from './util';
+import { FORWARD, LEFT, RIGHT, UP, Vector, Victor } from './vector';
+import { isArray, multQuatVec } from './utils/math';
 import { cachedFunction } from './operator';
 import { degree, isAngle } from './degree';
 import { convertToCSSVars } from './utils/css';
@@ -112,6 +109,9 @@ function getQuat(x, y, z, w) {
 }
 
 function from(x, y, z, w) {
+  if (x && typeof x.w === 'number') {
+    return getQuat(x.x, x.y, x.z, x.w);
+  }
   return getQuat(x, y, z, w) || [0, 0, 0, 1];
 }
 
@@ -129,13 +129,13 @@ class AQuaternion {
   }
 
   multiply(other, y, z, w) {
+    if (typeof other.w === 'number') {
+      return this.multiplyQuaternion(other);
+    }
     const o = getQuat(other, y, z, w);
     if (o) {
       return this.multiplyQuaternion(new this.constructor(o));
     }
-    if (typeof other.w === 'number') {
-      return this.multiplyQuaternion(other);
-    }
     return this.multiplyVector(other);
   }
 
@@ -264,11 +264,24 @@ class AQuaternion {
    * @returns {object}
    */
   toJSON() {
+    const {
+      x, y, z, w
+    } = this;
+
     return {
-      x: this.x,
-      y: this.y,
-      z: this.z,
-      w: this.w
+      x,
+      y,
+      z,
+      w,
+      a1: 1 - ((y * y) * 2) - ((z * z) * 2),
+      a2: ((x * y) * 2) - ((z * w) * 2),
+      a3: ((x * z) * 2) + ((y * w) * 2),
+      b1: ((x * y) * 2) + ((z * w) * 2),
+      b2: 1 - ((x * x) * 2) - ((z * z) * 2),
+      b3: ((y * z) * 2) - ((x * w) * 2),
+      c1: ((x * z) * 2) - ((y * w) * 2),
+      c2: ((y * z) * 2) + ((x * w) * 2),
+      c3: 1 - ((x * x) * 2) - ((y * y) * 2)
     };
   }
 
@@ -435,7 +448,11 @@ const quaternionFactory = cachedFunction((x, y, z, w) => new Quaternion(x, y, z,
  */
 /**
  * @template Q
- * @typedef {QuatZero<Q> & QuatDir<Q> & QuatDirUp<Q> & QuatAxis<Q> & QuatArr<Q> & QuatZero<Q>} QuatFac
+ * @typedef {(q: { x: number, y: number, z: number, w: number }) => Q} QuatOther
+ */
+/**
+ * @template Q
+ * @typedef {QuatZero<Q> & QuatDir<Q> & QuatDirUp<Q> & QuatAxis<Q> & QuatArr<Q> & QuatZero<Q> & QuatOther<Q>} QuatFac
  */
 
 /**

diff --git a/test/css.js b/test/css.js
@@ -1,8 +1,51 @@
 import { assert } from 'chai';
 import { css } from '../src/css';
-import { victor } from '../src';
+import { iquaternion, victor } from '../src';
 
 describe('style test.', () => {
+
+  it('a transform should behave like in 3d game engines', () => {
+
+    // const template = `
+    //   transform: matrix3d(
+    //    var(--rot-a1), var(--rot-b1), var(--rot-c1), var(--translation-x),
+    //    var(--rot-a2), var(--rot-b2), var(--rot-c2), var(--translation-y),
+    //    var(--rot-a3), var(--rot-b3), var(--rot-c3), var(--translation-z),
+    //    var(--scale-x), var(--scale-y), var(--scale-z), 1.0);
+
+    const transform = css();
+
+    transform.translation = victor(-5, -6, -7);
+    transform.rotation = iquaternion(victor(0, 0, -1), victor(0, 1, 0));
+    transform.scale = victor(1, 1, 1);
+
+
+    const { vars } = transform;
+
+    assert.deepEqual(vars, {
+      '--rotation-a1': -1,
+      '--rotation-a2': 0,
+      '--rotation-a3': 0,
+      '--rotation-b1': 0,
+      '--rotation-b2': 1,
+      '--rotation-b3': 0,
+      '--rotation-c1': 0,
+      '--rotation-c2': 0,
+      '--rotation-c3': -1,
+      '--rotation-w': 0,
+      '--rotation-x': 0,
+      '--rotation-y': 1,
+      '--rotation-z': 0,
+      '--scale-x': 1,
+      '--scale-y': 1,
+      '--scale-z': 1,
+      '--translation-x': -5,
+      '--translation-y': -6,
+      '--translation-z': -7
+    });
+
+  });
+
   // https://github.com/keithclark/cssvr/blob/master/src/js/viewport.js#L74
   it('a matrix should behave like in the cool cs vr demo', () => {