improve hmr

src/lights/Light.js

@@ -1,4 +1,5 @@
 import { setFromProp } from '../tools.js';
+import useBindProp from '../use/useBindProp.js';
 
 export default {
   inject: ['scene'],
@@ -19,7 +20,7 @@ export default {
     position: Object,
   },
   mounted() {
-    setFromProp(this.light.position, this.position);
+    useBindProp(this, 'position', this.light.position);
 
     if (this.light.shadow) {
       this.light.castShadow = this.castShadow;

src/meshes/Mesh.js

@@ -1,6 +1,5 @@
-import { watch } from 'vue';
 import { Mesh } from 'three';
-import { setFromProp } from '../tools.js';
+import useBindProp from '../use/useBindProp.js';
 
 export default {
   inject: ['three', 'scene'],
@@ -31,25 +30,16 @@ export default {
         this.material = this.three.materials[this.materialId];
       }
       this.mesh = new Mesh(this.geometry, this.material);
-      this.updateMesh();
-      this.scene.add(this.mesh);
 
-      this.addWatchers();
-      this.$emit('ready');
-    },
-    addWatchers() {
-      ['position', 'rotation', 'scale'].forEach(p => {
-        watch(() => this[p], () => {
-          setFromProp(this.mesh[p], this[p]);
-        }, { deep: true });
-      });
-    },
-    updateMesh() {
-      setFromProp(this.mesh.position, this.position);
-      setFromProp(this.mesh.rotation, this.rotation);
-      setFromProp(this.mesh.scale, this.scale);
+      useBindProp(this, 'position', this.mesh.position);
+      useBindProp(this, 'rotation', this.mesh.rotation);
+      useBindProp(this, 'scale', this.mesh.scale);
+
       this.mesh.castShadow = this.castShadow;
       this.mesh.receiveShadow = this.receiveShadow;
+
+      this.scene.add(this.mesh);
+      this.$emit('ready');
     },
   },
   render() {

src/meshes/Sprite.js

@@ -0,0 +1,25 @@
+import { Sprite, SpriteMaterial, TextureLoader } from 'three';
+import useBindProp from '../use/useBindProp.js';
+
+export default {
+  emits: ['ready', 'loaded'],
+  inject: ['three', 'scene'],
+  props: {
+    src: String,
+    position: Object,
+  },
+  mounted() {
+    this.texture = new TextureLoader().load(this.src, () => { this.$emit('loaded'); });
+    this.material = new SpriteMaterial({ map: this.texture });
+    this.sprite = new Sprite(this.material);
+    useBindProp(this, 'position', this.sprite.position);
+    this.scene.add(this.sprite);
+    this.$emit('ready');
+  },
+  unmounted() {
+    this.texture.dispose();
+  },
+  render() {
+    return [];
+  },
+};

src/meshes/index.js

@@ -5,3 +5,4 @@ export { default as Sphere } from './Sphere.js';
 export { default as Text } from './Text.js';
 
 export { default as InstancedMesh } from './InstancedMesh.js';
+export { default as Sprite } from './Sprite.js';

src/plugin.js

@@ -31,6 +31,7 @@ export const TroisJSVuePlugin = {
       'Text',
 
       'InstancedMesh',
+      'Sprite',
 
       'BokehPass',
       'EffectComposer',

src/use/useBindProp.js

@@ -0,0 +1,10 @@
+import { toRef, watch } from 'vue';
+import { setFromProp } from '../tools.js';
+
+export default function useBindProp(comp, prop, object) {
+  const ref = toRef(comp, prop);
+  setFromProp(object, ref.value);
+  watch(ref, () => {
+    setFromProp(object, ref.value);
+  }, { deep: true });
+};