update materials

src/materials/Material.js

@@ -1,11 +1,41 @@
+import { FrontSide } from 'three';
+
 export default {
   inject: ['three'],
   props: {
     id: String,
     color: {
-      type: String,
+      type: [String, Number],
       default: '#ffffff',
     },
+    depthTest: {
+      type: Boolean,
+      default: true,
+    },
+    depthWrite: {
+      type: Boolean,
+      default: true,
+    },
+    fog: {
+      type: Boolean,
+      default: false,
+    },
+    opacity: {
+      type: Number,
+      default: 1,
+    },
+    side: {
+      type: Number,
+      default: FrontSide,
+    },
+    transparent: {
+      type: Boolean,
+      default: false,
+    },
+    vertexColors: {
+      type: Boolean,
+      default: false,
+    },
   },
   mounted() {
     this.three.materials[this.id] = this.material;
@@ -13,6 +43,15 @@ export default {
   unmounted() {
     this.material.dispose();
   },
+  methods: {
+    propsValues() {
+      const props = {};
+      for (const [key, value] of Object.entries(this.$props)) {
+        if (key !== 'id') props[key] = value;
+      }
+      return props;
+    },
+  },
   render() {
     return [];
   },

src/materials/StandardMaterial.js

@@ -3,9 +3,25 @@ import Material from './Material';
 
 export default {
   extends: Material,
+  props: {
+    emissive: {
+      type: [Number, String],
+      default: 0,
+    },
+    emissiveIntensity: {
+      type: Number,
+      default: 1,
+    },
+    metalness: {
+      type: Number,
+      default: 0,
+    },
+    roughness: {
+      type: Number,
+      default: 1,
+    },
+  },
   created() {
-    this.material = new MeshStandardMaterial({
+    this.material = new MeshStandardMaterial(this.propsValues());
-      color: this.color,
-    });
   },
 };