update phong & standard

src/materials/PhongMaterial.js

@@ -1,13 +1,33 @@
 import { MeshPhongMaterial } from 'three';
+import { watch } from 'vue';
 import { propsValues } from '../tools.js';
 import Material from './Material';
 
 export default {
   extends: Material,
+  props: {
+    emissive: { type: [Number, String], default: 0 },
+    emissiveIntensity: { type: Number, default: 1 },
+    reflectivity: { type: Number, default: 1 },
+    shininess: { type: Number, default: 30 },
+    specular: { type: [String, Number], default: 0x111111 },
+  },
   methods: {
     createMaterial() {
+      console.log(this.$props);
       this.material = new MeshPhongMaterial(propsValues(this.$props, ['id']));
     },
+    addWatchers() {
+      ['emissive', 'emissiveIntensity', 'reflectivity', 'shininess', 'specular'].forEach(p => {
+        watch(() => this[p], (value) => {
+          if (p === 'emissive' || p === 'specular') {
+            this.material[p].set(value);
+          } else {
+            this.material[p] = value;
+          }
+        });
+      });
+    },
   },
   __hmrId: 'PhongMaterial',
 };

src/materials/StandardMaterial.js

@@ -1,4 +1,4 @@
-import { Color, MeshStandardMaterial } from 'three';
+import { MeshStandardMaterial } from 'three';
 import { watch } from 'vue';
 import { propsValues } from '../tools.js';
 import Material from './Material';
@@ -19,7 +19,7 @@ export default {
       ['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => {
         watch(() => this[p], (value) => {
           if (p === 'emissive') {
-            this.material.emissive = new Color(value);
+            this.material[p].set(value);
           } else {
             this.material[p] = value;
           }