Multiple mockups

bundle/vue-three-d-mockup.esm.js

@@ -152,7 +152,7 @@ var script = {
     const container = ref(null);
     let camera;
     let scene;
-    let phone;
+    const phones = [];
     let renderer;
     let mouseX = 0;
     let mouseY = 0;
@@ -172,6 +172,21 @@ var script = {
       };
 
       const phoneInit = (screenSrc, home) => {
+        const phone = new MockupModel({
+          position: {
+            x: 0,
+            y: 0,
+            z: 0,
+            ...home.position,
+          },
+          rotation: {
+            x: -0.2,
+            y: 0.3,
+            z: 0.06,
+            ...home.rotation,
+          },
+        });
+
         const screenInit = () => {
           const scale = 6;
           const width = scale * 9; const height = scale * 19.3;
@@ -236,31 +251,42 @@ var script = {
           );
         };
 
-        phone = new MockupModel({
-          position: {
-            x: 0,
-            y: 0,
-            z: 0,
-            ...home.position,
-          },
-          rotation: {
-            x: -0.2,
-            y: 0.3,
-            z: 0.06,
-            ...home.rotation,
-          },
-        });
         phone.startFloat();
         scene.add(phone);
         screenInit();
         bodyInit();
+
+        return phone;
       };
 
       renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
       renderer.setSize(container.value.clientWidth, container.value.clientHeight);
 
       environmentInit();
-      phoneInit(props.screen, { position: props.position, rotation: props.rotation });
+
+      if (Array.isArray(props.screen)) {
+        for (let i = 0; i <= props.screen.length - 1; i += 1) {
+          phones.push(
+            phoneInit(
+              props.screen[i],
+              {
+                position: props.position[i],
+                rotation: props.rotation[i],
+              },
+            ),
+          );
+        }
+      } else {
+        phones.push(
+          phoneInit(
+            props.screen,
+            {
+              position: props.position,
+              rotation: props.rotation,
+            },
+          ),
+        );
+      }
 
       container.value.appendChild(renderer.domElement);
     }
@@ -273,23 +299,31 @@ var script = {
 
       requestAnimationFrame(animate);
 
-      if (phone) {
+      if (phones.length) {
-        phone.animation(deltaTime, { x: mouseX, y: mouseY, z: camera.position.z });
+        phones.forEach((phone) => {
+          phone.animation(deltaTime, { x: mouseX, y: mouseY, z: camera.position.z });
+        });
       }
 
       renderer.render(scene, camera);
     }
 
     function handleMouseEnter() {
-      if (phone) {
+      if (phones.length) {
-        phone.animation = phone.lookAtAnim;
+        phones.forEach((phone) => {
-        phone.goingHome = false;
+          phone.animation = phone.lookAtAnim;
-        clearTimeout(phone.homeTimeout);
+          phone.goingHome = false;
+          clearTimeout(phone.homeTimeout);
+        });
       }
     }
 
     function handleMouseLeave() {
-      if (phone) { phone.animation = phone.homeAnim; }
+      if (phones.length) {
+        phones.forEach((phone) => {
+          phone.animation = phone.homeAnim;
+        });
+      }
     }
 
     function handleMouseMove(event) {

src/Demo.vue

@@ -3,22 +3,25 @@
     <h1>
       vue-three-d-mockup
     </h1>
-    <div class="showcase">
+
-      <Mockup
+    <Mockup
-        v-if="vidReady"
+      v-if="vidReady"
-        class="mockup"
+      class="mockup"
-        :screen="$refs.video"
+      :screen="[$refs.video, require('./assets/screen.png')]"
-      />
+      :position="[
-      <Mockup
+        {
-        class="mockup"
+          x: -50
-        :screen="require('./assets/screen.png')"
+        },
-        :rotation="{
+        {
-          y: -0.3,
+          x: 50
-          z: -0.06,
+        },
-        }"
+      ]"
-        phoneClr="black"
+      :rotation="[{}, {
-      />
+        y: -0.3,
-    </div>
+        z: -0.06,
+      }]"
+      phoneClr="black"
+    />
 
     <video
       src="@/assets/screen.mp4"
@@ -67,14 +70,8 @@ video {
   visibility: hidden;
 }
 
-.showcase {
-  display: flex;
-  justify-content: space-evenly;
-}
-
 .mockup {
-  width: 500px;
+  width: 800px;
   height: 500px;
-  margin: auto;
 }
 </style>

src/Mockup.vue

@@ -43,7 +43,7 @@ export default {
     const container = ref(null);
     let camera;
     let scene;
-    let phone;
+    const phones = [];
     let renderer;
     let mouseX = 0;
     let mouseY = 0;
@@ -63,6 +63,21 @@ export default {
       };
 
       const phoneInit = (screenSrc, home) => {
+        const phone = new MockupModel({
+          position: {
+            x: 0,
+            y: 0,
+            z: 0,
+            ...home.position,
+          },
+          rotation: {
+            x: -0.2,
+            y: 0.3,
+            z: 0.06,
+            ...home.rotation,
+          },
+        });
+
         const screenInit = () => {
           const scale = 6;
           const width = scale * 9; const height = scale * 19.3;
@@ -127,31 +142,42 @@ export default {
           );
         };
 
-        phone = new MockupModel({
-          position: {
-            x: 0,
-            y: 0,
-            z: 0,
-            ...home.position,
-          },
-          rotation: {
-            x: -0.2,
-            y: 0.3,
-            z: 0.06,
-            ...home.rotation,
-          },
-        });
         phone.startFloat();
         scene.add(phone);
         screenInit();
         bodyInit();
+
+        return phone;
       };
 
       renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
       renderer.setSize(container.value.clientWidth, container.value.clientHeight);
 
       environmentInit();
-      phoneInit(props.screen, { position: props.position, rotation: props.rotation });
+
+      if (Array.isArray(props.screen)) {
+        for (let i = 0; i <= props.screen.length - 1; i += 1) {
+          phones.push(
+            phoneInit(
+              props.screen[i],
+              {
+                position: props.position[i],
+                rotation: props.rotation[i],
+              },
+            ),
+          );
+        }
+      } else {
+        phones.push(
+          phoneInit(
+            props.screen,
+            {
+              position: props.position,
+              rotation: props.rotation,
+            },
+          ),
+        );
+      }
 
       container.value.appendChild(renderer.domElement);
     }
@@ -164,23 +190,31 @@ export default {
 
       requestAnimationFrame(animate);
 
-      if (phone) {
+      if (phones.length) {
-        phone.animation(deltaTime, { x: mouseX, y: mouseY, z: camera.position.z });
+        phones.forEach((phone) => {
+          phone.animation(deltaTime, { x: mouseX, y: mouseY, z: camera.position.z });
+        });
       }
 
       renderer.render(scene, camera);
     }
 
     function handleMouseEnter() {
-      if (phone) {
+      if (phones.length) {
-        phone.animation = phone.lookAtAnim;
+        phones.forEach((phone) => {
-        phone.goingHome = false;
+          phone.animation = phone.lookAtAnim;
-        clearTimeout(phone.homeTimeout);
+          phone.goingHome = false;
+          clearTimeout(phone.homeTimeout);
+        });
       }
     }
 
     function handleMouseLeave() {
-      if (phone) { phone.animation = phone.homeAnim; }
+      if (phones.length) {
+        phones.forEach((phone) => {
+          phone.animation = phone.homeAnim;
+        });
+      }
     }
 
     function handleMouseMove(event) {