change: more visuals for quaternions

src/uitls/RotationObject.ts

@@ -13,7 +13,7 @@ export class RotationObject implements Updatable, Modifiable {
     public t: number = 0;
 
     private _qworking: Quaternion = new Quaternion();;
-    private _orientation: Group = new Group();
+    // private _orientation: Group = new Group();
     private _coordinate: Group = new Group();
     private _rotationAxis: Group = new Group();
     private _mesh?: Mesh;
@@ -159,43 +159,53 @@ export class RotationObject implements Updatable, Modifiable {
     }
 
     updateRotationAxis(): void {
-        const line = this._rotationAxis.getObjectByName("rotationAxisLine") as Line;
-        const point = this._rotationAxis.getObjectByName("rotationAxisPoint") as Mesh;
 
-        if (line.geometry)
-            line.geometry.dispose();
+        const suffix: string[] = ["A", "B", "C"];
+        const ref: Quaternion[] = [this.qa, this.qb, this._qworking];
+
+        for (let i = 0; i < suffix.length; i++) {
+            const line = this._rotationAxis.getObjectByName("rotationAxisLine" + suffix[i]) as Line;
+            const point = this._rotationAxis.getObjectByName("rotationAxisPoint" + suffix[i]) as Mesh;
+
+            if (line.geometry) line.geometry.dispose();
 
             const dir = new Vector3(
-            this._qworking.x,
-            this._qworking.y,
-            this._qworking.z
-        );
+                ref[i].x,
+                ref[i].y,
+                ref[i].z
+            )
             const origin = new Vector3(0,0,0);
 
-        line.geometry = new BufferGeometry().setFromPoints([
-            origin, dir.normalize()]);
-
+            line.geometry = new BufferGeometry().setFromPoints([origin, dir.normalize().multiplyScalar(2)]);
             point.position.copy(dir);
         }
+    }
 
     createRotationAxis(): void {
-        const dir = new Line(
+        const colors: Color[] = [
+            new Color(0xff8844),
+            new Color(0x44ff88),
+            new Color(0x884488)
+        ]
+        const suffix: string[] = ["A", "B", "C"];
+
+        for (let i = 0; i < suffix.length; i++) {
+            const line = new Line(
                 undefined,
-            new LineBasicMaterial({ color: 0xff8844 })
+                new LineBasicMaterial({ color: colors[i].getHex() })
             );
-        dir.name = "rotationAxisLine";
+            line.name = "rotationAxisLine" + suffix[i];
+            this._rotationAxis.add(line);
 
             const point = new Mesh(
-            new SphereBufferGeometry(.025, 32, 32),
-            new MeshBasicMaterial({ color: 0xff8844 })
+                new SphereBufferGeometry(.05, 32, 32),
+                new MeshBasicMaterial({ color: colors[i].getHex() })
             );
-        point.name = "rotationAxisPoint";
-
-        this._rotationAxis.add(dir);
+            point.name = "rotationAxisPoint" + suffix[i];
             this._rotationAxis.add(point);
+        }
 
         this.updateRotationAxis();
-
     }
 
     setMesh(mesh: Mesh): void {