wireframe props, fix #20, close #22

src/materials/BasicMaterial.js

@@ -1,13 +1,19 @@
 import { MeshBasicMaterial } from 'three';
-import { propsValues } from '../tools.js';
+import { bindProps, propsValues } from '../tools.js';
-import Material from './Material';
+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',
 };

src/materials/LambertMaterial.js

@@ -1,13 +1,19 @@
 import { MeshLambertMaterial } from 'three';
-import { propsValues } from '../tools.js';
+import { bindProps, propsValues } from '../tools.js';
-import Material from './Material';
+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',
 };

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

src/materials/PhongMaterial.js

@@ -1,7 +1,7 @@
 import { MeshPhongMaterial } from 'three';
 import { watch } from 'vue';
-import { propsValues } from '../tools.js';
+import { bindProps, propsValues } from '../tools.js';
-import Material from './Material';
+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',

src/materials/StandardMaterial.js

@@ -1,7 +1,7 @@
 import { MeshStandardMaterial } from 'three';
 import { watch } from 'vue';
-import { bindProp, propsValues } from '../tools.js';
+import { bindProp, bindProps, propsValues } from '../tools.js';
-import Material from './Material';
+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',

src/materials/ToonMaterial.js

@@ -1,13 +1,19 @@
 import { MeshToonMaterial } from 'three';
-import { propsValues } from '../tools.js';
+import { bindProps, propsValues } from '../tools.js';
-import Material from './Material';
+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',
 };

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