From 3dccc62f9ca6922fe77c837e85f85eceafdf0dab Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Sun, 30 Jan 2022 00:03:05 +0300
Subject: [PATCH] Added a prop to control the phones color

---
 README.md                        | 1 +
 bundle/vue-three-d-mockup.esm.js | 8 ++++++--
 src/Mockup.vue                   | 8 ++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 5c896eb..87acfd5 100644
--- a/README.md
+++ b/README.md
@@ -46,3 +46,4 @@ export default {
 ### props:
 - `screenImg`: path to image that will be displayed on the phones screen
 - `lightClr`: color of the light in the environment
+- `phoneClr`: color of the phone
diff --git a/bundle/vue-three-d-mockup.esm.js b/bundle/vue-three-d-mockup.esm.js
index 072c14e..bdf90cc 100644
--- a/bundle/vue-three-d-mockup.esm.js
+++ b/bundle/vue-three-d-mockup.esm.js
@@ -116,7 +116,11 @@ var script = {
     },
     lightClr: {
       type: String,
-      default: 'hsl(0, 100%, 100%)',
+      default: 'white',
+    },
+    phoneClr: {
+      type: String,
+      default: 'white',
     },
   },
   setup(props) {
@@ -207,7 +211,7 @@ var script = {
             (body) => {
               body.traverse((child) => {
                 if (child instanceof THREE.Mesh) {
-                  child.material = new THREE.MeshLambertMaterial();
+                  child.material = new THREE.MeshLambertMaterial({ color: props.phoneClr });
                 }
               });
 
diff --git a/src/Mockup.vue b/src/Mockup.vue
index 107a562..9c2cbd1 100644
--- a/src/Mockup.vue
+++ b/src/Mockup.vue
@@ -24,7 +24,11 @@ export default {
     },
     lightClr: {
       type: String,
-      default: 'hsl(0, 100%, 100%)',
+      default: 'white',
+    },
+    phoneClr: {
+      type: String,
+      default: 'white',
     },
   },
   setup(props) {
@@ -115,7 +119,7 @@ export default {
             (body) => {
               body.traverse((child) => {
                 if (child instanceof THREE.Mesh) {
-                  child.material = new THREE.MeshLambertMaterial();
+                  child.material = new THREE.MeshLambertMaterial({ color: props.phoneClr });
                 }
               });