add physics to interactive objects

src/components/InteractiveObjects/PuzzleGame1.js

@@ -1,11 +1,12 @@
 import { BoxGeometry, Mesh, MeshBasicMaterial, Group } from 'three';
 import { MotionEngine } from '../../lib/MotionEngine';
+import { centerOrigin } from '@/lib/MeshUtils';
 
 class PuzzleGame1 {
     constructor(engine, data) {
         return new Promise(async (resolve, reject)=>{
             let w = data.w, h = data.h, wh = w*h;
-            this.object = new Group();
+            let container = new Group();
             const aq = new MotionEngine();
             const pr = [[0, 2], [0, -1], [0, 1], [1, 0], [-1, 0], [0, 0]];
             let d = 1.2;
@@ -50,16 +51,16 @@ class PuzzleGame1 {
                 if (idxs[4] == idxs[5]){
                     mesh._dd = true;
                 }
-                this.object.add(mesh);
+                container.add(mesh);
             }
 
-            this.object.children[0].onBeforeRender = () => {
+            container.children[0].onBeforeRender = () => {
                 this.update();
             };
 
             var check = () => {
                 let i = 0;
-                this.object.children.forEach(o=>{
+                container.children.forEach(o=>{
                     if (o._ri == 5 || o._dd && o._ri == 0) i++;
                 })
                 return i == wh;
@@ -76,7 +77,7 @@ class PuzzleGame1 {
                 }
             };
 
-            this.object.children.forEach(c => {
+            container.children.forEach(c => {
                 engine.clickable.add(c, clickFn);
             });
 
@@ -84,18 +85,20 @@ class PuzzleGame1 {
                 aq.update();
                 if (aq.isIdle() && !this.done && check()) {
                     this.done = true;
-                    this.object.children.forEach((c, i) => {
+                    container.children.forEach((c, i) => {
                         aq.add({
                             o: c,
                             a: { position: { x: i % w, y: Math.trunc(i/w)} },
                             t: 1,
-                            f: i == 0 && this.onfinish
+                            f: i == 0 && this.onfinish || undefined
                         });
                     });
                     //engine.dashboard.addPoints(10);
                 }
             };
 
+            this.object = centerOrigin(container);
+
             resolve(this);
         })
     }