diff --git a/src/components/InteractiveObjects/PairMatchingGame.js b/src/components/InteractiveObjects/PairMatchingGame.js index 52339d5..71b99c2 100644 --- a/src/components/InteractiveObjects/PairMatchingGame.js +++ b/src/components/InteractiveObjects/PairMatchingGame.js @@ -1,7 +1,5 @@ -import { BoxGeometry, Mesh, MeshStandardMaterial, Group, Vector3 } from 'three'; -import { LineGeometry } from 'three/examples/jsm/Addons.js'; -import { LineMaterial } from 'three/examples/jsm/Addons.js'; -import { Line2 } from 'three/examples/jsm/Addons.js'; +import { BoxGeometry, Mesh, MeshStandardMaterial, Group, Vector3, CatmullRomCurve3 } from 'three'; +import { LineMaterial, LineGeometry, Line2 } from 'three/examples/jsm/Addons.js'; import { centerOrigin } from '@/lib/MeshUtils'; import { EventManager } from '@/lib/EventManager'; import Utils from '@/lib/Utils'; @@ -60,17 +58,15 @@ class PairMatchingGame extends EventManager { let clicked, done = []; let connect = (a, b)=>{ - let g = new LineGeometry(); - g.setFromPoints([ + let crc = new CatmullRomCurve3([ a.position, - new Vector3().copy(a.position).lerpVectors(a.position, b.position, 0.5).multiplyScalar(1.1), + new Vector3().copy(a.position).lerpVectors(a.position, b.position, 0.5).multiplyScalar(1 + Math.random() * 0.1 * done.length / c), b.position - ]); + ]) + let g = new LineGeometry().setFromPoints( crc.getPoints(7) ); let m = new Line2(g, new LineMaterial( { color: 0x00FF00, linewidth: 5, // in world units with size attenuation, pixels otherwise - dashed: false, - alphaToCoverage: true, } )); container.add(m) } @@ -85,9 +81,11 @@ class PairMatchingGame extends EventManager { if (oc.userData.gd.id === clicked.userData.gd.id){ connect(oc, clicked); done.push(oc.userData.gd.id) - }else{ - clicked = null; + if (done.length == c) { + this.dispatchEvent({type:'finish'}) + } } + clicked = null; }else{ clicked.scale.setScalar(1.2); }