material color hmr

src/materials/BasicMaterial.js

@@ -8,4 +8,5 @@ export default {
       color: this.color,
     });
   },
+  __hmrId: 'BasicMaterial',
 };

src/materials/LambertMaterial.js

@@ -8,4 +8,5 @@ export default {
       color: this.color,
     });
   },
+  __hmrId: 'LambertMaterial',
 };

src/materials/Material.js

@@ -1,4 +1,5 @@
-import { FrontSide } from 'three';
+import { watch } from 'vue';
+import { Color, FrontSide } from 'three';
 
 export default {
   inject: ['three'],
@@ -39,6 +40,9 @@ export default {
   },
   mounted() {
     this.three.materials[this.id] = this.material;
+    watch(() => this.color, () => {
+      this.material.color = new Color(this.color);
+    });
   },
   unmounted() {
     this.material.dispose();
@@ -55,4 +59,5 @@ export default {
   render() {
     return [];
   },
+  __hmrId: 'Material',
 };

src/materials/PhongMaterial.js

@@ -8,4 +8,5 @@ export default {
       color: this.color,
     });
   },
+  __hmrId: 'PhongMaterial',
 };

src/materials/PhysicalMaterial.js

@@ -8,4 +8,5 @@ export default {
       color: this.color,
     });
   },
+  __hmrId: 'PhysicalMaterial',
 };

src/materials/ShaderMaterial.js

@@ -22,4 +22,5 @@ export default {
   render() {
     return [];
   },
+  __hmrId: 'ShaderMaterial',
 };

src/materials/StandardMaterial.js

@@ -24,4 +24,5 @@ export default {
   created() {
     this.material = new MeshStandardMaterial(this.propsValues());
   },
+  __hmrId: 'StandardMaterial',
 };

src/materials/SubSurfaceMaterial.js

@@ -66,4 +66,5 @@ export default {
       vertexColors: this.vertexColors,
     });
   },
+  __hmrId: 'SubSurfaceMaterial',
 };