PairMatchingGame with animations

src/components/InteractiveObjects/PairMatchingGame.js

@@ -1,4 +1,4 @@
-import { BoxGeometry, Mesh, MeshStandardMaterial, Group, Vector3, CatmullRomCurve3 } from 'three';
+import { BoxGeometry, Mesh, MeshStandardMaterial, Group, Vector3, CatmullRomCurve3, Color } from 'three';
 import { LineMaterial, LineGeometry, Line2 } from 'three/examples/jsm/Addons.js';
 import { centerOrigin } from '@/lib/MeshUtils';
 import { EventManager } from '@/lib/EventManager';
@@ -20,6 +20,8 @@ class PairMatchingGame extends EventManager {
             let material = new MeshStandardMaterial({
                 map: await engine.loadTexture(data.$go.asset.name),
                 alphaTest: 0.5,
+                emissive: 0x00ff00,
+                emissiveIntensity: 0
                 // roughness:1, metalness:0,
                 // normalMap: await engine.loadTexture('NormalMap.png', '/static/textures/'),
             });
@@ -45,7 +47,7 @@ class PairMatchingGame extends EventManager {
                         uv[xi].array[8 * i + 6] = s[0] + 1 / 2;
                         uv[xi].array[8 * i + 7] = s[1];
                     }
-                    let mesh = new Mesh(b[xi], material);
+                    let mesh = new Mesh(b[xi], material.clone());
                     mesh.position.set(xi * dx, o[xi][i] * dy, 0);
                     mesh.userData.gd = {
                         pair: xi,
@@ -71,23 +73,30 @@ class PairMatchingGame extends EventManager {
                 container.add(m)
             }
 
+            let actionDef = {material:{emissiveIntensity:k=>(1+Math.sin((k*2+1.5)*Math.PI))*4 }};
+
             let clickFn = (i) => {
                 let oc = clicked;
+                if (done.includes(i.object.userData.gd.id)) return;
                 clicked = i.object;
-                if (done.includes(clicked.userData.gd.id)) return;
+                clicked.material.emissive.setHex(0x00ff00);
                 if (oc && oc.userData.gd.pair != clicked.userData.gd.pair){
-                    oc.scale.setScalar(1);
-                    clicked.scale.setScalar(1);
                     if (oc.userData.gd.id === clicked.userData.gd.id){
                         connect(oc, clicked);
                         done.push(oc.userData.gd.id)
                         if (done.length == c) {
                             this.dispatchEvent({type:'finish'})
                         }
+                    }else{
+                        clicked.material.emissive.setHex(0xff0000);
+                        oc.material.emissive.setHex(0xff0000);
                     }
+                    aq.clear(oc, true);
+                    aq.add({ o: clicked, a: actionDef, t: 1 });
+                    aq.add({ o: oc, a: actionDef, t: 1 });
                     clicked = null;
                 }else{
-                    clicked.scale.setScalar(1.2);
+                    aq.add({ o: clicked, a: actionDef, t: 1, r: true })
                 }
             };