From 444060b91de31c0c49984d6ee43d6d79c47465a6 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Sat, 13 Mar 2021 16:41:01 +0100
Subject: [PATCH] wireframe props, fix #20, close #22

---
 src/materials/BasicMaterial.js    | 10 ++++++++--
 src/materials/LambertMaterial.js  | 10 ++++++++--
 src/materials/Material.js         |  8 ++++++++
 src/materials/PhongMaterial.js    |  6 ++++--
 src/materials/StandardMaterial.js | 11 +++++++----
 src/materials/ToonMaterial.js     | 10 ++++++++--
 src/tools.js                      |  6 ++++++
 7 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/materials/BasicMaterial.js b/src/materials/BasicMaterial.js
index 900cc08..6a82eca 100644
--- a/src/materials/BasicMaterial.js
+++ b/src/materials/BasicMaterial.js
@@ -1,13 +1,19 @@
 import { MeshBasicMaterial } from 'three';
-import { propsValues } from '../tools.js';
-import Material from './Material';
+import { bindProps, propsValues } from '../tools.js';
+import Material, { wireframeProps } from './Material';
 
 export default {
   extends: Material,
+  props: {
+    ...wireframeProps,
+  },
   methods: {
     createMaterial() {
       this.material = new MeshBasicMaterial(propsValues(this.$props));
     },
+    addWatchers() {
+      bindProps(this, Object.keys(wireframeProps), this.material);
+    },
   },
   __hmrId: 'BasicMaterial',
 };
diff --git a/src/materials/LambertMaterial.js b/src/materials/LambertMaterial.js
index bb83ee2..7e33e35 100644
--- a/src/materials/LambertMaterial.js
+++ b/src/materials/LambertMaterial.js
@@ -1,13 +1,19 @@
 import { MeshLambertMaterial } from 'three';
-import { propsValues } from '../tools.js';
-import Material from './Material';
+import { bindProps, propsValues } from '../tools.js';
+import Material, { wireframeProps } from './Material';
 
 export default {
   extends: Material,
+  props: {
+    ...wireframeProps,
+  },
   methods: {
     createMaterial() {
       this.material = new MeshLambertMaterial(propsValues(this.$props));
     },
+    addWatchers() {
+      bindProps(this, Object.keys(wireframeProps), this.material);
+    },
   },
   __hmrId: 'LambertMaterial',
 };
diff --git a/src/materials/Material.js b/src/materials/Material.js
index f36d43d..90c64df 100644
--- a/src/materials/Material.js
+++ b/src/materials/Material.js
@@ -53,3 +53,11 @@ export default {
   },
   __hmrId: 'Material',
 };
+
+export const wireframeProps = {
+  wireframe: { type: Boolean, default: false },
+  // not needed for WebGL
+  // wireframeLinecap: { type: String, default: 'round' },
+  // wireframeLinejoin: { type: String, default: 'round' },
+  wireframeLinewidth: { type: Number, default: 1 }, // not really useful
+};
diff --git a/src/materials/PhongMaterial.js b/src/materials/PhongMaterial.js
index 77a7c43..2a0258a 100644
--- a/src/materials/PhongMaterial.js
+++ b/src/materials/PhongMaterial.js
@@ -1,7 +1,7 @@
 import { MeshPhongMaterial } from 'three';
 import { watch } from 'vue';
-import { propsValues } from '../tools.js';
-import Material from './Material';
+import { bindProps, propsValues } from '../tools.js';
+import Material, { wireframeProps } from './Material';
 
 export default {
   extends: Material,
@@ -12,6 +12,7 @@ export default {
     shininess: { type: Number, default: 30 },
     specular: { type: [String, Number], default: 0x111111 },
     flatShading: Boolean,
+    ...wireframeProps,
   },
   methods: {
     createMaterial() {
@@ -28,6 +29,7 @@ export default {
           }
         });
       });
+      bindProps(this, Object.keys(wireframeProps), this.material);
     },
   },
   __hmrId: 'PhongMaterial',
diff --git a/src/materials/StandardMaterial.js b/src/materials/StandardMaterial.js
index 062f6b1..1c39a0d 100644
--- a/src/materials/StandardMaterial.js
+++ b/src/materials/StandardMaterial.js
@@ -1,7 +1,7 @@
 import { MeshStandardMaterial } from 'three';
 import { watch } from 'vue';
-import { bindProp, propsValues } from '../tools.js';
-import Material from './Material';
+import { bindProp, bindProps, propsValues } from '../tools.js';
+import Material, { wireframeProps } from './Material';
 
 const props = {
   aoMapIntensity: { type: Number, default: 1 },
@@ -17,12 +17,14 @@ const props = {
   roughness: { type: Number, default: 1 },
   refractionRatio: { type: Number, default: 0.98 },
   flatShading: Boolean,
-  wireframe: Boolean,
 };
 
 export default {
   extends: Material,
-  props,
+  props: {
+    ...props,
+    ...wireframeProps,
+  },
   methods: {
     createMaterial() {
       this.material = new MeshStandardMaterial(propsValues(this.$props, ['normalScale']));
@@ -40,6 +42,7 @@ export default {
         });
       });
       bindProp(this, 'normalScale', this.material);
+      bindProps(this, Object.keys(wireframeProps), this.material);
     },
   },
   __hmrId: 'StandardMaterial',
diff --git a/src/materials/ToonMaterial.js b/src/materials/ToonMaterial.js
index 8cc12ce..f790edd 100644
--- a/src/materials/ToonMaterial.js
+++ b/src/materials/ToonMaterial.js
@@ -1,13 +1,19 @@
 import { MeshToonMaterial } from 'three';
-import { propsValues } from '../tools.js';
-import Material from './Material';
+import { bindProps, propsValues } from '../tools.js';
+import Material, { wireframeProps } from './Material';
 
 export default {
   extends: Material,
+  props: {
+    ...wireframeProps,
+  },
   methods: {
     createMaterial() {
       this.material = new MeshToonMaterial(propsValues(this.$props));
     },
+    addWatchers() {
+      bindProps(this, Object.keys(wireframeProps), this.material);
+    },
   },
   __hmrId: 'ToonMaterial',
 };
diff --git a/src/tools.js b/src/tools.js
index 8d7c5d7..09aa896 100644
--- a/src/tools.js
+++ b/src/tools.js
@@ -8,6 +8,12 @@ export function setFromProp(o, prop) {
   }
 };
 
+export function bindProps(src, props, dst) {
+  props.forEach(prop => {
+    bindProp(src, prop, dst);
+  });
+};
+
 export function bindProp(src, srcProp, dst, dstProp) {
   if (!dstProp) dstProp = srcProp;
   const ref = toRef(src, srcProp);