Center universally

src/Demo.vue

@@ -20,7 +20,6 @@
         y: -0.3,
         z: -0.06,
       }]"
-      phoneClr="black"
     />
 
     <video

src/Mockup.vue

@@ -119,9 +119,8 @@ export default {
 
           recomputeUVs();
 
-          screen.translateX(-width / 2);
-          screen.translateY(-height / 2);
-          screen.translateZ(6);
+          screen.translateZ(3.6);
+          screen.geometry.center();
           phone.add(screen);
         };
 
@@ -130,14 +129,17 @@ export default {
           loader.load(
             phoneObj,
             (body) => {
+              const bodyGroup = new THREE.Object3D();
               body.traverse((child) => {
                 if (child instanceof THREE.Mesh) {
                   child.material = new THREE.MeshLambertMaterial({ color: props.phoneClr });
+                  child.geometry.center();
+                  const mesh = new THREE.Mesh(child.geometry, child.material);
+                  bodyGroup.add(mesh);
                 }
               });
 
-              body.position.y = -60;
-              phone.add(body);
+              phone.add(bodyGroup);
             },
           );
         };

src/MockupModel.js

@@ -96,6 +96,9 @@ export default class MockupModel extends Group {
 
   lookAtAnim(dt, { x, y, z }) {
     const target = new Vector3();
+    // const boxTarget = new Vector3();
+    // const boundingBox = new Box3().setFromObject(this);
+    // boundingBox.getSize(boxTarget);
     target.x = x;
     target.y = y;
     target.z = z;

src/utils/roundedPlane.js

@@ -1,7 +1,7 @@
 import { Shape, ShapeBufferGeometry } from 'three';
 
 export default function roundedPlane(width, height, radius) {
-  const x = 1; const y = 1;
+  const x = 0; const y = 0;
   const shape = new Shape();
 
   shape.moveTo(x, y + radius);