improve material hmr

README.md

@@ -21,9 +21,9 @@ I will try to rewrite some of my [WebGL demos](https://codepen.io/collection/AGZ
 Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects when you update a template**. This means the result in your browser will be automatically updated without reloading all the stuff. **This is really helpful when you are creating a TroisJS Scene**.
 
 - [ ] HMR
-  - [x] Camera : position
+  - [x] PerspectiveCamera : aspect, far, fov, near, position
   - [x] Light : position
-  - [x] Material : color
+  - [x] Material : color, depthTest, depthWrite, fog, opacity, transparent
   - [x] Mesh : position, rotation, scale
   - [ ] ...
 

src/materials/Material.js

@@ -19,7 +19,7 @@ export default {
     },
     fog: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     opacity: {
       type: Number,
@@ -40,8 +40,15 @@ export default {
   },
   mounted() {
     this.three.materials[this.id] = this.material;
-    watch(() => this.color, () => {
+
+    ['color', 'depthTest', 'depthWrite', 'fog', 'opacity', 'transparent'].forEach(p => {
+      watch(() => this[p], () => {
+        if (p === 'color') {
           this.material.color = new Color(this.color);
+        } else {
+          this.material[p] = this[p];
+        }
+      });
     });
   },
   unmounted() {