From 397d6505de310bab440e0e6539280b758949528f Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Wed, 2 Feb 2022 00:22:48 +0300
Subject: [PATCH] Clean up Mockup Class and update README

---
 README.md                        | 35 ++++++++++++++++----------------
 bundle/vue-three-d-mockup.esm.js | 15 +++++++-------
 src/MockupModel.js               | 15 +++++++-------
 3 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index 3c04e21..7fc5273 100644
--- a/README.md
+++ b/README.md
@@ -11,12 +11,11 @@ $ npm install vue-three-d-mockup
 ## Usage
 
 ```html
-<Mockup 
-  screen="screen.png"
-/>
+<Mockup screen="screen.png" />
 ```
 
 #### Use as an async component (the 3d model is quite large so this provides a significant performance boost):
+
 ```js
 <script>
 import { defineAsyncComponent } from 'vue';
@@ -30,6 +29,7 @@ export default {
 ```
 
 #### Or normally:
+
 ```js
 <script>
 import Mockup from 'vue-three-d-mockup';
@@ -42,21 +42,22 @@ export default {
 </script>
 ```
 
-| Prop       | Type               | Required | Default                        | Description                                                                                                                                                              |
-|------------|--------------------|----------|--------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `screen`   | String  \| Element | `true`   | none                           | Path an image that will be displayed on the phones screen or the  `<video>`  element displayed on the phones screen. When using the latter there are caveats, see below. |
-| `lightClr` | String             | `false`  | `"white"`                      | Color of the light as a CSS-style string.                                                                                                                                |
-| `phoneClr` | String             | `false`  | `"white"`                      | Color of the phone as a CSS-style string.                                                                                                                                |
-| `rotation` | Object             | `false`  | `{ x: -0.2, y: 0.3, z: 0.06 }` | The orientation of the phone described in rotation values arround the 3 axes.                                                                                            |
+| Prop       | Type                       | Required | Default                        | Description                                                                                                                                                                                                                 |
+| ---------- | -------------------------- | -------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `screen`   | String \| Element \| Array | `true`   | none                           | Path to an image that will be displayed on the phones screen or the `<video>` element displayed on the phones screen. When using the latter there are caveats, see below. Can also be an array of any of the options above. |
+| `lightClr` | String                     | `false`  | `"white"`                      | Color of the light as a CSS-style string.                                                                                                                                                                                   |
+| `phoneClr` | String                     | `false`  | `"white"`                      | Color of the phone as a CSS-style string.                                                                                                                                                                                   |
+| `position` | Object \| Array            | `false`  | `{ x: 0, y: 0, z: 0 }`         | The position of the phone. Can also be an array if multiple screens specified.                                                                                                                                              |  |
+| `rotation` | Object \| Array            | `false`  | `{ x: -0.2, y: 0.3, z: 0.06 }` | The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.                                                                                           |
 
 ### Caveats:
 
-- The `screen` prop is unreactive, so when using it as a video 
-it's important to only render the `Mockup` element when the video 
-is loaded. Check out [Demo.vue](src/Demo.vue) to see an example of how 
-to do this.
-- The video on the model will not be shown if the original `<video>` 
-element is hidden with `display: none`, so use `visibility: hidden` 
-instead. 
+- The `screen` prop is unreactive, so when using it as a video
+  it's important to only render the `Mockup` element when the video
+  is loaded. Check out [Demo.vue](src/Demo.vue) to see an example of how
+  to do this.
+- The video on the model will not be shown if the original `<video>`
+  element is hidden with `display: none`, so use `visibility: hidden`
+  instead.
 - The video may not be autoplaying if the original `<video>` element
-is scrolled off screen. 
+  is scrolled off screen.
diff --git a/bundle/vue-three-d-mockup.esm.js b/bundle/vue-three-d-mockup.esm.js
index f459c94..8282ef8 100644
--- a/bundle/vue-three-d-mockup.esm.js
+++ b/bundle/vue-three-d-mockup.esm.js
@@ -3,6 +3,12 @@ import * as THREE from 'three';
 import { Group, Vector3, Shape, ShapeBufferGeometry } from 'three';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
 
+function xyz(target, source) {
+  target.x = source.x;
+  target.y = source.y;
+  target.z = source.z;
+}
+
 class MockupModel extends Group {
   constructor(home) {
     super();
@@ -16,13 +22,8 @@ class MockupModel extends Group {
   }
 
   reset() {
-    this.position.x = this.home.position.x;
-    this.position.y = this.home.position.y;
-    this.position.z = this.home.position.z;
-
-    this.rotation.x = this.home.rotation.x;
-    this.rotation.y = this.home.rotation.y;
-    this.rotation.z = this.home.rotation.z;
+    xyz(this.position, this.home.position);
+    xyz(this.rotation, this.home.rotation);
 
     this.speed = {
       x: 0,
diff --git a/src/MockupModel.js b/src/MockupModel.js
index 4cefad2..67b9ad1 100644
--- a/src/MockupModel.js
+++ b/src/MockupModel.js
@@ -1,5 +1,11 @@
 import { Group, Vector3 } from 'three';
 
+function xyz(target, source) {
+  target.x = source.x;
+  target.y = source.y;
+  target.z = source.z;
+}
+
 export default class MockupModel extends Group {
   constructor(home) {
     super();
@@ -13,13 +19,8 @@ export default class MockupModel extends Group {
   }
 
   reset() {
-    this.position.x = this.home.position.x;
-    this.position.y = this.home.position.y;
-    this.position.z = this.home.position.z;
-
-    this.rotation.x = this.home.rotation.x;
-    this.rotation.y = this.home.rotation.y;
-    this.rotation.z = this.home.rotation.z;
+    xyz(this.position, this.home.position);
+    xyz(this.rotation, this.home.rotation);
 
     this.speed = {
       x: 0,