update to time dependent animation

Author: minhsueh

src/components/crystal-toolkit/PhononAnimationScene/PhononAnimationScene.test.tsx

@@ -1,6 +1,6 @@
 import { mount } from 'enzyme';
 import * as React from 'react';
-import { CrystalToolkitAnimationScene } from './PhononAnimationScene';
+import { PhononAnimationScene } from './PhononAnimationScene';
 import { phonon_scene as scene } from '../scene/phonon-animation-scene';
 import { MOUNT_NODE_CLASS, Renderer } from '../scene/constants';
 import Scene from '../scene/Scene';
@@ -10,7 +10,7 @@ const RENDERSCENE_CALLS_BY_REACT_RENDERING = 3; // goal is to reach 1 and stay t
 
 // When we run test, three.js is bundled differently, and we encounter again the bug
 // where we have 2 different instances of three
-describe('<CrystalToolkitAnimationScene/>', () => {
+describe('<PhononAnimationScene/>', () => {
   it('should be rendered', () => {
     const wrapper = renderElement();
     expect(wrapper.find(`.${MOUNT_NODE_CLASS}`).length).toBe(1);
@@ -34,7 +34,7 @@ describe('<CrystalToolkitAnimationScene/>', () => {
 function renderElement() {
   // we use mount to test the rendering of the underlying elements
   return mount(
-    <CrystalToolkitAnimationScene
+    <PhononAnimationScene
       sceneSize={500}
       settings={{
         renderer: Renderer.SVG

src/components/crystal-toolkit/PhononAnimationScene/PhononAnimationScene.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react';
 import Scene from '../scene/Scene';
 import { subscribe } from '../scene/download-event';
-import './CrystalToolkitAnimationScene.less';
+import './PhononAnimationScene.less';
 import {
   AnimationStyle,
   DEBUG_STYLE,
@@ -102,6 +102,13 @@ export interface PhononAnimationSceneProps {
    *    defaultZoom: 1, // 1 will zoom to fit object exactly, <1 will add padding between object and box bounds
    *    zoomToFit2D: false // if true, will zoom to fit object only along the X and Y axes (not Z)
    *    extractAxis: false // will remove the axis from the main scene
+   *    omega: 0.0 // The eigen frequency
+   *    phases: [0, 0] // Per-atom phase theta_i = q · R_i (radians). Length should equal number of atoms.
+   *    amplitude: 150 //The amplitude of vibration
+   *    eigenVectors: [[[2.369e-7, 0], [-6.908e-7, 0], [-0.002, 0]], [[2.369e-7, 0], [-6.908e-7, 0], [-0.002, 0]]] //  The eigenvectors for each atom with the given wave vector and frequency
+   *    velocity: 0.5 // The velocity coef, scale 0 to 1
+   *
+   *
    * }
    * There are several additional options used for debugging and testing,
    * please consult the source code directly for these.
@@ -235,23 +242,6 @@ export interface PhononAnimationSceneProps {
    * @default true
    */
   showPositionButton?: boolean;
-  /**
-   * The eigen frequency
-   */
-  omega: number;
-  /**
-   * Per-atom phase theta_i = q · R_i (radians).
-   * Length should equal number of atoms.
-   */
-  phases: number[];
-  /**
-   * The amplitude of vibration
-   */
-  amplitude: number;
-  /**
-   * The eigenvectors for each atom with the given wave vector and frequency
-   */
-  eigenVectors: number[];
 }
 
 /**
@@ -410,6 +400,10 @@ export const PhononAnimationScene: React.FC<PhononAnimationSceneProps> = ({
 
   // called after the component is mounted, so refs are correctly populated
   useEffect(() => {
+    if (!props.data || !props.data.name || !props.data.contents) {
+      return;
+    }
+
     const _s = (scene.current = new Scene(
       props.data,
       mountNodeRef.current!,
@@ -437,7 +431,9 @@ export const PhononAnimationScene: React.FC<PhononAnimationSceneProps> = ({
       mountNodeDebugRef.current!
     ));
     _s.removeListener();
-    _s.animate();
+    if (props.data !== undefined && props.data !== null) {
+      _s.animate();
+    }
 
     /**
      * I believe this can be removed because image requesting is now handled by
@@ -450,17 +446,18 @@ export const PhononAnimationScene: React.FC<PhononAnimationSceneProps> = ({
       subscription.unsubscribe();
       _s.onDestroy();
     };
-  }, []);
+  }, [props.data]);
 
   // Note(chab) those hooks will be executed sequentially at mount time, and on change of the deps array elements
-  useEffect(
-    () => scene.current!.enableDebug(props.debug!, mountNodeDebugRef.current),
-    [props.debug]
-  );
+  useEffect(() => {
+    if (!scene.current) return;
+    scene.current!.enableDebug(props.debug!, mountNodeDebugRef.current);
+  }, [props.debug]);
   // An interesting classical react issue that we fixed : look at the stories, we do not pass anymore an empty object,
   // but a reference to an empty object, otherwise, it will be a different reference, and treated as a different object, thus
   // triggering the effect
   useEffect(() => {
+    if (!scene.current) return;
     if (!props.data || !(props.data as any).name || !(props.data as any).contents) {
       console.warn(
         'no data passed ( or missing name /content ), scene will not be updated',
@@ -470,25 +467,28 @@ export const PhononAnimationScene: React.FC<PhononAnimationSceneProps> = ({
     }
 
     //FIXME(chab) we have to much calls to renderScene
-    !!props.data && scene.current!.addToScene(props.data, false);
+    //!!props.data && scene.current!.addToScene(props.data, false);
+    scene.current.addToScene(props.data, false);
     // !!props.data && scene.current!.addToScene(props.data, false);
     // scene.current!.animate();
     scene.current!.toggleVisibility(props.toggleVisibility as any);
   }, [props.data]);
-  useEffect(
-    () => scene.current!.toggleVisibility(props.toggleVisibility as any),
-    [props.toggleVisibility]
-  );
-  useEffect(
-    () => scene.current!.updateInsetSettings(props.inletSize!, props.inletPadding!, props.axisView),
-    [props.inletSize, props.inletPadding, props.axisView]
-  );
+  useEffect(() => {
+    if (!scene.current) return;
+    scene.current!.toggleVisibility(props.toggleVisibility as any);
+  }, [props.toggleVisibility]);
+  useEffect(() => {
+    if (!scene.current) return;
+    scene.current!.updateInsetSettings(props.inletSize!, props.inletPadding!, props.axisView);
+  }, [props.inletSize, props.inletPadding, props.axisView]);
 
   useEffect(() => {
+    if (!scene.current) return;
     scene.current!.resizeRendererToDisplaySize();
   }, [props.sceneSize]);
 
   useEffect(() => {
+    if (!scene.current) return;
     const { filetype } = props.imageRequest;
     if (filetype) {
       requestImage(filetype, scene.current!);
@@ -505,6 +505,7 @@ export const PhononAnimationScene: React.FC<PhononAnimationSceneProps> = ({
   const cameraDispatch = cameraContext ? cameraContext.dispatch : cameraReducerDispatch;
   if (cameraState) {
     useEffect(() => {
+      if (!scene.current) return;
       props.setProps({ currentCameraState: cameraState });
 
       if (cameraState && cameraState.position && cameraState.quaternion && cameraState.zoom) {
@@ -528,6 +529,7 @@ export const PhononAnimationScene: React.FC<PhononAnimationSceneProps> = ({
    * and save the new state into the cameraState
    */
   useEffect(() => {
+    if (!scene.current) return;
     if (props.customCameraState) {
       const { position: p, quaternion: q, zoom } = props.customCameraState;
       /**
@@ -554,6 +556,7 @@ export const PhononAnimationScene: React.FC<PhononAnimationSceneProps> = ({
   }, [props.customCameraState]);
 
   useEffect(() => {
+    if (!scene.current) return;
     props.animation && scene.current!.updateAnimationStyle(props.animation as AnimationStyle);
   }, [props.animation]);
 

src/components/crystal-toolkit/scene/Scene.ts

@@ -103,6 +103,7 @@ export default class Scene {
     if (!renderer) {
       throw new Error('No renderer');
     }
+
     this.renderer = renderer;
     this.renderer.setSize(this.cachedMountNodeSize.width, this.cachedMountNodeSize.height);
     //TODO(chab) This should be simpler
@@ -384,10 +385,10 @@ export default class Scene {
           sceneJson.amplitude,
           sceneJson.phases,
           sceneJson.omega,
-          sceneJson.eigenVectors
+          sceneJson.eigenVectors,
+          sceneJson.velocity
         )
       : new AnimationHelper(this.objectBuilder);
-    // this.animationHelper = new AnimationHelper(this.objectBuilder);
     window.addEventListener('resize', this.windowListener, false);
     this.inset = new InsetHelper(
       this.axis,
@@ -809,12 +810,21 @@ export default class Scene {
     this.inset.onDestroy();
     this.controls.dispose();
     disposeSceneHierarchy(this.scene);
-    this.scene.dispose();
+    // this.scene.dispose();
     if (this.renderer instanceof THREE.WebGLRenderer) {
       this.renderer.forceContextLoss();
       this.renderer.dispose();
     }
-    this.renderer.domElement!.parentElement!.removeChild(this.renderer.domElement);
+    // remove CSS2D overlay
+    if (this.labelRenderer?.domElement?.parentElement) {
+      this.labelRenderer.domElement.parentElement.removeChild(this.labelRenderer.domElement);
+    }
+
+    // remove canvas/SVG
+    if (this.renderer?.domElement?.parentElement) {
+      this.renderer.domElement.parentElement.removeChild(this.renderer.domElement);
+    }
+    // this.renderer.domElement!.parentElement!.removeChild(this.renderer.domElement);
     this.renderer.domElement = undefined as any;
     this.renderer = null as any;
     this.stop();

src/components/crystal-toolkit/scene/phonon-animation-helper.ts

@@ -27,22 +27,25 @@ export class PhononAnimationHelper {
     private A: number,
     private phases: number[],
     private omega: number,
-    private eigenVectors: number[]
+    private eigenVectors: number[],
+    private velocity: number
   ) {
-    this.atomNumber = phases.length;
+    this.atomNumber = Array.isArray(phases) ? phases.length : 0;
   }
 
   public reset() {
     this.atomMeshes = new Array(this.atomNumber);
-    this.unitCellAtomIndexArray = new Array(this.atomNumber);
+    this.unitCellAtomIndexArray = new Array<number>(this.atomNumber);
     this.bondMeshes = new Map<string, THREE.Mesh>();
   }
 
   public buildAnimationSupport(json: SceneJsonObject, three: THREE.Object3D) {
     if (json.type === JSON3DObject.SPHERES) {
-      const atomIndex = json._meta.atom_idx?.[0];
+      if (json._meta === undefined) return;
+      const atomIndex = json._meta[0].atom_idx?.[0];
       if (atomIndex === undefined) return;
-      const unitCellAtomIndex = json._meta.unit_cell_atom_idx?.[0];
+      const unitCellAtomIndex = json._meta[0].unit_cell_atom_idx?.[0];
+      if (atomIndex === undefined || unitCellAtomIndex === undefined) return;
       this.unitCellAtomIndexArray[atomIndex] = unitCellAtomIndex;
 
       const mesh = three.children[0] as THREE.Mesh;
@@ -52,7 +55,9 @@ export class PhononAnimationHelper {
       if (!meta) return;
 
       for (let i = meta.length - 1; i >= 0; i--) {
-        const [atomIndex1, atomIndex2] = meta[i].atom_idx;
+        const pair = meta[i].atom_idx;
+        if (!pair || pair.length < 2) return;
+        const [atomIndex1, atomIndex2] = pair;
         const bondKey = PhononAnimationHelper.bondKey(atomIndex1, atomIndex2);
 
         if (!this.bondMeshes.has(bondKey)) {
@@ -69,30 +74,30 @@ export class PhononAnimationHelper {
   public updateTime(time: number) {}
 
   public animate() {
-    // requestAnimationFrame(this.animate);
-
     const delta = this.clock.getElapsedTime();
-    const A = 100; // this.A;
+    const velocity = this.velocity;
+    const modified_delta = delta * velocity;
+    const A = this.A;
     const omega = this.omega;
     const phases = this.phases;
 
     const temAtomPosition = new Array(this.atomNumber);
 
     // update atoms
     this.atomMeshes.forEach((mesh, atomIndex) => {
-      let base = mesh.userData.basePos as THREE.Vector3 | undefined;
+      let base = mesh.userData.basePos;
 
       const unitCellAtomIndex = this.unitCellAtomIndexArray[atomIndex];
 
-      if (!base) {
+      if (!(base && base.isVector3)) {
         base = mesh.position.clone();
         mesh.userData.basePos = base;
       }
 
       const phase = phases[unitCellAtomIndex];
       const eigenVector = this.eigenVectors[unitCellAtomIndex];
 
-      const theta = omega * delta + phase;
+      const theta = phase - omega * modified_delta;
 
       const cos = Math.cos(theta);
       const sin = Math.sin(theta);