Added a prop to control the phones color

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

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 });
                 }
               });
 

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 });
                 }
               });