Skip to content

Commit 5ed42ce

Browse files
Chiu PeterChiu Peter
Chiu Peter
authored and
Chiu Peter
committed
rewrite the coordination update and modify duration
1 parent 7c3930f commit 5ed42ce

File tree

6 files changed

+69
-67
lines changed

6 files changed

+69
-67
lines changed

‎src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { mount } from 'enzyme';
22
import * as React from 'react';
3-
import { CrystalToolkitScene } from './CrystalToolkitAnimationScene';
3+
import { CrystalToolkitAnimationScene } from './CrystalToolkitAnimationScene';
44
import { s2 as scene } from '../scene/simple-scene';
55
import { MOUNT_NODE_CLASS, Renderer } from '../scene/constants';
66
import Scene from '../scene/Scene';
@@ -10,7 +10,7 @@ const RENDERSCENE_CALLS_BY_REACT_RENDERING = 1; // goal is to reach 1 and stay t
1010

1111
// When we run test, three.js is bundled differently, and we encounter again the bug
1212
// where we have 2 different instances of three
13-
describe('<CrystalToolkitScene/>', () => {
13+
describe('<CrystalToolkitAnimationScene/>', () => {
1414
it('should be rendered', () => {
1515
const wrapper = renderElement();
1616
expect(wrapper.find(`.${MOUNT_NODE_CLASS}`).length).toBe(1);
@@ -34,7 +34,7 @@ describe('<CrystalToolkitScene/>', () => {
3434
function renderElement() {
3535
// we use mount to test the rendering of the underlying elements
3636
return mount(
37-
<CrystalToolkitScene
37+
<CrystalToolkitAnimationScene
3838
sceneSize={500}
3939
settings={{
4040
renderer: Renderer.SVG

‎src/components/crystal-toolkit/CrystalToolkitAnimationScene/CrystalToolkitAnimationScene.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,7 @@ export const CrystalToolkitAnimationScene: React.FC<CrystalToolkitAnimationScene
420420
mountNodeDebugRef.current!
421421
));
422422

423+
_s.removeListener();
423424
_s.animate();
424425
/**
425426
* I believe this can be removed because image requesting is now handled by

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

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,14 @@ export class AnimationHelper {
6363
}
6464

6565
const positionKF = new THREE.VectorKeyframeTrack('.position', [...kf], values);
66-
this.pushAnimations('Action', kfl, [positionKF], three);
66+
67+
let kflVal;
68+
if (animationType == 'displacement') {
69+
kflVal = -1;
70+
} else {
71+
kflVal = kfl;
72+
}
73+
this.pushAnimations('Action', kflVal, [positionKF], three);
6774
} else if (json.type === JSON3DObject.CYLINDERS) {
6875
animations.forEach((animation, aIdx) => {
6976
// create cylinders from u to v
@@ -80,23 +87,11 @@ export class AnimationHelper {
8087
// The function `this.objectBuilder.getCylinderInfo` requires the actual positions
8188
// of the atoms involved in the bond.
8289
if (animationType == 'displacement') {
83-
target = [
84-
[
85-
u_position[0] + animation[i][0][0],
86-
u_position[1] + animation[i][0][1],
87-
u_position[2] + animation[i][0][2]
88-
],
89-
[
90-
v_position[0] + animation[i][1][0],
91-
v_position[1] + animation[i][1][1],
92-
v_position[2] + animation[i][1][2]
93-
]
94-
];
90+
target = positionPair.map((item, index) =>
91+
item.map((num, idx) => num + animation[i][index][idx])
92+
);
9593
} else if (animationType == 'position') {
96-
target = [
97-
[animation[i][0][0], animation[i][0][1], animation[i][0][2]],
98-
[animation[i][1][0], animation[i][1][1], animation[i][1][2]]
99-
];
94+
target = [0, 1].map((r) => [0, 1, 2].map((c) => animation[i][r][c]));
10095
} else {
10196
console.warn(`Unknown animationType: ${animationType}`);
10297
}
@@ -118,14 +113,20 @@ export class AnimationHelper {
118113
}
119114

120115
// make keyframeTrack
121-
const positionKF = new THREE.VectorKeyframeTrack('.position', [...kf], valuesp);
122-
const quaternionKF = new THREE.QuaternionKeyframeTrack('.quaternion', [...kf], valuesq);
123-
const scalenKF = new THREE.VectorKeyframeTrack('.scale', [...kf], valuess);
116+
const positionKF = new THREE.VectorKeyframeTrack('.position', kf, valuesp);
117+
const quaternionKF = new THREE.QuaternionKeyframeTrack('.quaternion', kf, valuesq);
118+
const scalenKF = new THREE.VectorKeyframeTrack('.scale', kf, valuess);
124119

125120
// attach keyframe to object
121+
let kflVal;
122+
if (animationType == 'displacement') {
123+
kflVal = -1;
124+
} else {
125+
kflVal = kfl;
126+
}
126127
this.pushAnimations(
127128
`Cylinder-${aIdx}`,
128-
kfl,
129+
kflVal,
129130
[positionKF, quaternionKF, scalenKF],
130131
three.children[aIdx]
131132
);
@@ -255,7 +256,7 @@ export class AnimationHelper {
255256
rootObject: THREE.Object3D
256257
) {
257258
// change duration to -1 for seamlessly animation
258-
const clip = new THREE.AnimationClip(name, -1, tracks);
259+
const clip = new THREE.AnimationClip(name, duration, tracks);
259260
const mixer = new THREE.AnimationMixer(rootObject);
260261
this.mixers.push(mixer);
261262
const ca = mixer.clipAction(clip);

‎src/components/crystal-toolkit/scene/phonon-animation-position-scene.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const phonon_position_scene = {
5252
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
5353
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
5454
],
55-
animate_type: 'position'
55+
animateType: 'position'
5656
},
5757
{
5858
positions: [[0.8058217408419999, 0.066124554204, 6.963321117506]],
@@ -102,7 +102,7 @@ export const phonon_position_scene = {
102102
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
103103
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
104104
],
105-
animate_type: 'position'
105+
animateType: 'position'
106106
},
107107
{
108108
positions: [[2.9509585818639996, 5.593276804547999, 10.717722116670998]],
@@ -152,7 +152,7 @@ export const phonon_position_scene = {
152152
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
153153
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
154154
],
155-
animate_type: 'position'
155+
animateType: 'position'
156156
},
157157
{
158158
positions: [[0.766183039244, 2.055509868408, 5.167530275648]],
@@ -202,7 +202,7 @@ export const phonon_position_scene = {
202202
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
203203
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
204204
],
205-
animate_type: 'position'
205+
animateType: 'position'
206206
},
207207
{
208208
positions: [[3.032793386686, 1.595800684452, 7.298952718514]],
@@ -252,7 +252,7 @@ export const phonon_position_scene = {
252252
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
253253
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
254254
],
255-
animate_type: 'position'
255+
animateType: 'position'
256256
},
257257
{
258258
positions: [[0.6861637058060001, 5.963917645752001, 8.681792248521003]],
@@ -302,7 +302,7 @@ export const phonon_position_scene = {
302302
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
303303
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
304304
],
305-
animate_type: 'position'
305+
animateType: 'position'
306306
},
307307
{
308308
positions: [[2.99256034193, 3.60988921464, 5.040689959921]],
@@ -352,7 +352,7 @@ export const phonon_position_scene = {
352352
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
353353
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
354354
],
355-
animate_type: 'position'
355+
animateType: 'position'
356356
},
357357
{
358358
positions: [[2.9301375471039997, 6.699044893728, 5.491387800056]],
@@ -402,7 +402,7 @@ export const phonon_position_scene = {
402402
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
403403
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
404404
],
405-
animate_type: 'position'
405+
animateType: 'position'
406406
},
407407
{
408408
positions: [[0.7380484592580001, 3.421993761576, 7.8297096615549995]],
@@ -452,7 +452,7 @@ export const phonon_position_scene = {
452452
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
453453
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
454454
],
455-
animate_type: 'position'
455+
animateType: 'position'
456456
},
457457
{
458458
positions: [[3.0054153938400003, 2.98169526492, 1.8661274149220002]],
@@ -502,7 +502,7 @@ export const phonon_position_scene = {
502502
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
503503
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
504504
],
505-
animate_type: 'position'
505+
animateType: 'position'
506506
},
507507
{
508508
positions: [[0.7270396717979999, 3.9607204700159997, 3.0575744099469997]],
@@ -552,7 +552,7 @@ export const phonon_position_scene = {
552552
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
553553
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
554554
],
555-
animate_type: 'position'
555+
animateType: 'position'
556556
},
557557
{
558558
positions: [[3.053526411968, 0.621334319676, 4.1697121733169995]],
@@ -602,7 +602,7 @@ export const phonon_position_scene = {
602602
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
603603
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
604604
],
605-
animate_type: 'position'
605+
animateType: 'position'
606606
},
607607
{
608608
positions: [[0.6988530682080001, 5.388527888675999, 5.464564104883001]],
@@ -652,7 +652,7 @@ export const phonon_position_scene = {
652652
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
653653
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
654654
],
655-
animate_type: 'position'
655+
animateType: 'position'
656656
},
657657
{
658658
positions: [[2.9648909976780002, 4.9781254120559995, 7.611631257921001]],
@@ -702,7 +702,7 @@ export const phonon_position_scene = {
702702
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23,
703703
24, 25, 26, 27, 28, 29, 30, 31, 32, 33
704704
],
705-
animate_type: 'position'
705+
animateType: 'position'
706706
}
707707
],
708708
origin: [-2.184827, -3.561594, -6.015533],

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

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ export const phonon_scene = {
1414
_meta: [0],
1515
animate: [
1616
[0.0, -0.0, -0.0],
17-
[0.372089582970604, -3.9475437946e-5, -6.4731092196e-5],
17+
[6.89275107e-7, -8.370267879e-6, -0.372089590600337],
1818
[0.0, -0.0, -0.0],
19-
[-0.372089582970604, 3.9475437946e-5, 6.4731092196e-5],
19+
[-6.89275107e-7, 8.370267879e-6, 0.372089590600337],
2020
[0.0, -0.0, -0.0]
2121
],
2222
keyframes: [0, 1, 2, 3, 4],
23-
animate_type: 'displacement'
23+
animateType: 'displacement'
2424
},
2525
{
2626
positions: [[4.073500050296991, 4.073500050296991, 4.073500050296991]],
@@ -31,14 +31,14 @@ export const phonon_scene = {
3131
clickable: true,
3232
_meta: [1],
3333
animate: [
34-
[-0.0, 0.0, 0.0],
35-
[-0.372089582970605, 3.9475437946e-5, 6.4731092196e-5],
36-
[-0.0, 0.0, 0.0],
37-
[0.372089582970605, -3.9475437946e-5, -6.4731092196e-5],
38-
[-0.0, 0.0, 0.0]
34+
[0.0, -0.0, -0.0],
35+
[6.89275107e-7, -8.370267879e-6, -0.372089590600337],
36+
[0.0, -0.0, -0.0],
37+
[-6.89275107e-7, 8.370267879e-6, 0.372089590600337],
38+
[0.0, -0.0, -0.0]
3939
],
4040
keyframes: [0, 1, 2, 3, 4],
41-
animate_type: 'displacement'
41+
animateType: 'displacement'
4242
}
4343
],
4444
origin: [-2.7156667001979935, -2.7156667001979935, -2.7156667001979935],
@@ -71,50 +71,50 @@ export const phonon_scene = {
7171
[
7272
[
7373
[0.0, -0.0, -0.0],
74-
[0.0, 0.0, 0.0]
74+
[0.0, -0.0, -0.0]
7575
],
7676
[
77-
[0.3720895829706, -3.9475437945e-5, -6.473109219e-5],
78-
[0.0, 0.0, 0.0]
77+
[6.8927511e-7, -8.370267885e-6, -0.372089590600335],
78+
[6.8927511e-7, -8.370267885e-6, -0.372089590600335]
7979
],
8080
[
8181
[0.0, -0.0, -0.0],
82-
[0.0, 0.0, 0.0]
82+
[0.0, -0.0, -0.0]
8383
],
8484
[
85-
[-0.3720895829706, 3.9475437945e-5, 6.473109219e-5],
86-
[0.0, 0.0, 0.0]
85+
[-6.8927511e-7, 8.370267885e-6, 0.372089590600335],
86+
[-6.8927511e-7, 8.370267885e-6, 0.372089590600335]
8787
],
8888
[
8989
[0.0, -0.0, -0.0],
90-
[0.0, 0.0, 0.0]
90+
[0.0, -0.0, -0.0]
9191
]
9292
],
9393
[
9494
[
95-
[-0.0, 0.0, 0.0],
96-
[0.0, 0.0, 0.0]
95+
[0.0, -0.0, -0.0],
96+
[0.0, -0.0, -0.0]
9797
],
9898
[
99-
[-0.3720895829706, 3.9475437945e-5, 6.473109219e-5],
100-
[0.0, 0.0, 0.0]
99+
[6.8927511e-7, -8.370267885e-6, -0.372089590600335],
100+
[6.8927511e-7, -8.370267885e-6, -0.372089590600335]
101101
],
102102
[
103-
[-0.0, 0.0, 0.0],
104-
[0.0, 0.0, 0.0]
103+
[0.0, -0.0, -0.0],
104+
[0.0, -0.0, -0.0]
105105
],
106106
[
107-
[0.3720895829706, -3.9475437945e-5, -6.473109219e-5],
108-
[0.0, 0.0, 0.0]
107+
[-6.8927511e-7, 8.370267885e-6, 0.372089590600335],
108+
[-6.8927511e-7, 8.370267885e-6, 0.372089590600335]
109109
],
110110
[
111-
[-0.0, 0.0, 0.0],
112-
[0.0, 0.0, 0.0]
111+
[0.0, -0.0, -0.0],
112+
[0.0, -0.0, -0.0]
113113
]
114114
]
115115
],
116116
keyframes: [0, 1, 2, 3, 4],
117-
animate_type: 'displacement'
117+
animateType: 'displacement'
118118
}
119119
],
120120
origin: [-2.7156667001979935, -2.7156667001979935, -2.7156667001979935],

‎src/pages/CrystalStructureAnimationViewer/CrystalStructureAnimationViewer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export const CrystalStructureAnimationViewer: React.FC = () => {
184184
extractAxis: false,
185185
zoomToFit2D: true
186186
}}
187-
// data={phonon_scene}
187+
//data={phonon_scene}
188188
data={phonon_position_scene}
189189
sceneSize="100%"
190190
debug={false}

0 commit comments

Comments
 (0)