update cell mesh instead of re-draw

src/atoms/AtomsViewer.js

@@ -127,8 +127,7 @@ class AtomsViewer {
     // update vector fields related to the atoms attribute
     this.VFManager.updateArrowMesh(null, atoms);
     // update cell
-    this.cellManager.cell = this.atoms.cell;
-    this.cellManager.draw();
+    this.cellManager.updateCellMesh(this.originalCell);
   }
 
   get currentFrame() {

src/atoms/cell.js

@@ -52,6 +52,8 @@ export class CellManager {
   draw() {
     this.clear();
     if (!this.viewer.originalCell.some((row) => row.every((cell) => cell === 0))) {
+      // copy the cell as current cell
+      this.currentCell = this.viewer.originalCell.map((row) => row.slice());
       this.cellMesh = this.drawUnitCell();
       this.cellVectors = this.drawUnitCellVectors();
     }
@@ -159,6 +161,87 @@ export class CellManager {
     // Return the group for further control if needed
     return unitCellGroup;
   }
+
+  updateCellMesh(cell) {
+    // Validate the cell matrix format
+    if (!cell || cell.length !== 3) {
+      console.warn("Invalid cell data for updating cell mesh");
+      return;
+    }
+    if (!this.cellMesh && !this.currentCell) {
+      return;
+    }
+    // If the cell is the same as the current cell within tolerance, do nothing
+    const eps = 1e-5;
+    if (cell.every((row, i) => row.every((cellValue, j) => Math.abs(cellValue - this.currentCell[i][j]) < eps))) {
+      return;
+    }
+
+    if (this.cellMesh) {
+      // Update vertices based on new cell parameters
+      const cellMatrix = cell;
+      const origin = new THREE.Vector3(0, 0, 0);
+
+      const v0 = origin;
+      const v1 = new THREE.Vector3(...cellMatrix[0]);
+      const v2 = new THREE.Vector3(...cellMatrix[1]);
+      const v3 = new THREE.Vector3().addVectors(v1, v2);
+      const v4 = new THREE.Vector3(...cellMatrix[2]);
+      const v5 = new THREE.Vector3().addVectors(v1, v4);
+      const v6 = new THREE.Vector3().addVectors(v2, v4);
+      const v7 = new THREE.Vector3().addVectors(v3, v4);
+
+      // Update geometry points
+      const points = [
+        v0.clone(),
+        v1.clone(),
+        v1.clone(),
+        v3.clone(),
+        v3.clone(),
+        v2.clone(),
+        v2.clone(),
+        v0.clone(),
+        v4.clone(),
+        v5.clone(),
+        v5.clone(),
+        v7.clone(),
+        v7.clone(),
+        v6.clone(),
+        v6.clone(),
+        v4.clone(),
+        v0.clone(),
+        v4.clone(),
+        v1.clone(),
+        v5.clone(),
+        v2.clone(),
+        v6.clone(),
+        v3.clone(),
+        v7.clone(),
+      ];
+
+      // Replace old geometry with new geometry points
+      this.cellMesh.geometry.setFromPoints(points);
+    }
+
+    if (this.cellVectors) {
+      // Update arrow directions
+      const directions = [new THREE.Vector3(...cell[0]).normalize(), new THREE.Vector3(...cell[1]).normalize(), new THREE.Vector3(...cell[2]).normalize()];
+
+      // Update the direction of each arrow by applying a new rotation
+      const axis = new THREE.Vector3(0, 1, 0); // Default arrow direction is along Y-axis
+
+      for (let i = 0; i < 3; i++) {
+        const quaternion = new THREE.Quaternion().setFromUnitVectors(axis, directions[i]);
+        this.cellVectors.children[i].setRotationFromQuaternion(quaternion);
+      }
+
+      // Update label positions
+      const offset = 3.3; // Offset position for labels based on new directions
+      this.cellVectors.children[3].position.copy(directions[0].multiplyScalar(offset));
+      this.cellVectors.children[4].position.copy(directions[1].multiplyScalar(offset));
+      this.cellVectors.children[5].position.copy(directions[2].multiplyScalar(offset));
+    }
+  }
 }
 
 function createSpriteLabel(position, text, color, size) {

tests/e2e/testCell.html

@@ -29,6 +29,19 @@
           const newAtoms = atoms.copy();
           //cell is 3x3 matrix,  scale the unit cell
           newAtoms.cell = newAtoms.cell.map((row) => row.map((v) => v * (1 + i * 0.02)));
+          // rotate the 3x3 matrix by 10 degree from the z axis
+          const angle = 5 * i * (Math.PI / 180);
+          const rotationMatrix = [
+            [Math.cos(angle), -Math.sin(angle), 0],
+            [Math.sin(angle), Math.cos(angle), 0],
+            [0, 0, 1],
+          ];
+          newAtoms.cell = newAtoms.cell.map((row) => [
+            row[0] * rotationMatrix[0][0] + row[1] * rotationMatrix[0][1] + row[2] * rotationMatrix[0][2],
+            row[0] * rotationMatrix[1][0] + row[1] * rotationMatrix[1][1] + row[2] * rotationMatrix[1][2],
+            row[0] * rotationMatrix[2][0] + row[1] * rotationMatrix[2][1] + row[2] * rotationMatrix[2][2],
+          ]);
+
           trajectory.push(newAtoms);
         }
         const editor = new weas.WEAS({ domElement });