improve hmr

README.md

@@ -22,8 +22,10 @@ Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects
 
 - [ ] HMR
   - [x] PerspectiveCamera : aspect, far, fov, near, position
-  - [x] Light : position
+  - [x] Light : castShadow, color, intensity, position, target
+    - [x] SpotLight : angle, decay, distance, penumbra
   - [x] Material : color, depthTest, depthWrite, fog, opacity, transparent
+    - [x] StandardMaterial : emissive, emissiveIntensity, metalness, roughness
   - [x] Mesh : position, rotation, scale
   - [ ] ...
 

src/core/PerspectiveCamera.js

@@ -1,5 +1,5 @@
 import { PerspectiveCamera, Vector3 } from 'three';
-import { toRef, watch } from 'vue';
+import { watch } from 'vue';
 import useBindProp from '../use/useBindProp.js';
 
 export default {

src/lights/DirectionalLight.js

@@ -3,6 +3,9 @@ import Light from './Light.js';
 
 export default {
   extends: Light,
+  props: {
+    target: Object,
+  },
   created() {
     this.light = new DirectionalLight(this.color, this.intensity);
   },

src/lights/Light.js

@@ -1,3 +1,5 @@
+import { Color } from 'three';
+import { watch } from 'vue';
 import { setFromProp } from '../tools.js';
 import useBindProp from '../use/useBindProp.js';
 
@@ -22,11 +24,25 @@ export default {
   mounted() {
     useBindProp(this, 'position', this.light.position);
 
+    if (this.light.target) {
+      useBindProp(this, 'target', this.light.target.position);
+    }
+
     if (this.light.shadow) {
       this.light.castShadow = this.castShadow;
       setFromProp(this.light.shadow.mapSize, this.shadowMapSize);
     }
 
+    ['color', 'intensity', 'castShadow'].forEach(p => {
+      watch(() => this[p], () => {
+        if (p === 'color') {
+          this.light.color = new Color(this.color);
+        } else {
+          this.light[p] = this[p];
+        }
+      });
+    });
+
     this.scene.add(this.light);
     if (this.light.target) this.scene.add(this.light.target);
   },

src/lights/SpotLight.js

@@ -1,28 +1,35 @@
 import { SpotLight } from 'three';
+import { watch } from 'vue';
 import Light from './Light.js';
 
 export default {
   extends: Light,
   props: {
-    distance: {
-      type: Number,
-      default: 0,
-    },
     angle: {
       type: Number,
       default: Math.PI / 3,
     },
-    penumbra: {
-      type: Number,
-      default: 0,
-    },
     decay: {
       type: Number,
       default: 1,
     },
+    distance: {
+      type: Number,
+      default: 0,
+    },
+    penumbra: {
+      type: Number,
+      default: 0,
+    },
+    target: Object,
   },
   created() {
     this.light = new SpotLight(this.color, this.intensity, this.distance, this.angle, this.penumbra, this.decay);
+    ['angle', 'decay', 'distance', 'penumbra'].forEach(p => {
+      watch(() => this[p], () => {
+        this.light[p] = this[p];
+      });
+    });
   },
   __hmrId: 'SpotLight',
 };

src/materials/StandardMaterial.js

@@ -1,4 +1,5 @@
-import { MeshStandardMaterial } from 'three';
+import { Color, MeshStandardMaterial } from 'three';
+import { watch } from 'vue';
 import Material from './Material';
 
 export default {
@@ -23,6 +24,15 @@ export default {
   },
   created() {
     this.material = new MeshStandardMaterial(this.propsValues());
+    ['emissive', 'emissiveIntensity', 'metalness', 'roughness'].forEach(p => {
+      watch(() => this[p], () => {
+        if (p === 'emissive') {
+          this.material.emissive = new Color(this.emissive);
+        } else {
+          this.material[p] = this[p];
+        }
+      });
+    });
   },
   __hmrId: 'StandardMaterial',
 };