Added a build process

src/Demo.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import Mockup from './Mockup.vue';
+import Mockup from '../bundle/vue-three-d-mockup.esm';
 
 export default {
   components: {

src/Mockup.vue

@@ -114,9 +114,14 @@ export default {
           loader.load(
             phoneObj,
             (body) => {
+              body.traverse((child) => {
+                if (child instanceof THREE.Mesh) {
+                  child.material = new THREE.MeshLambertMaterial();
+                }
+              });
+
               body.position.y = -60;
               phone.add(body);
-              scene.add(phone);
             },
           );
         };
@@ -125,6 +130,7 @@ export default {
         phone.acceleration.y = -0.01;
         phone.rotation.x = -0.1;
         phone.rotation.y = 0.5;
+        scene.add(phone);
         screenInit();
         bodyInit();
       };

src/MockupModel.js

@@ -4,6 +4,19 @@ export default class MockupModel extends Group {
   constructor() {
     super();
 
+    this.home = {
+      position: {
+        x: 0,
+        y: 0,
+        z: 0,
+      },
+      rotation: {
+        x: 0,
+        y: 0,
+        z: 0,
+      },
+    };
+
     this.speed = {
       x: 0,
       y: 0,
@@ -19,13 +32,14 @@ export default class MockupModel extends Group {
 
   floatAnim() {
     const maxSpeed = 0.1;
+    const acceleration = 0.01;
 
     if (this.position.y < -2) {
-      this.acceleration.y = 0.01;
+      this.acceleration.y = acceleration;
     }
 
     if (this.position.y > 2) {
-      this.acceleration.y = -0.01;
+      this.acceleration.y = -acceleration;
     }
 
     this.speed.y = Math.min(this.speed.y + this.acceleration.y, maxSpeed);

src/index.js

@@ -1,3 +0,0 @@
-import Mockup from './Mockup.vue';
-
-export default Mockup;