texture hmr

src/core/CubeTexture.js

@@ -1,5 +1,5 @@
 import { CubeTextureLoader } from 'three';
-// import { watch } from 'vue';
+import { watch } from 'vue';
 
 export default {
   inject: ['three'],
@@ -15,14 +15,22 @@ export default {
     onError: Function,
   },
   created() {
-    this.texture = new CubeTextureLoader()
+    this.createTexture();
-      .setPath(this.path)
+    watch(() => this.path, this.refreshTexture);
-      .load(this.urls, this.onLoaded, this.onProgress, this.onError);
+    watch(() => this.urls, this.refreshTexture);
   },
   unmounted() {
     this.texture.dispose();
   },
   methods: {
+    createTexture() {
+      this.texture = new CubeTextureLoader()
+        .setPath(this.path)
+        .load(this.urls, this.onLoaded, this.onProgress, this.onError);
+    },
+    refreshTexture() {
+      this.createTexture();
+    },
     onLoaded() {
       if (this.onLoad) this.onLoad();
       this.$emit('loaded');

src/core/Texture.js

@@ -1,5 +1,5 @@
 import { TextureLoader } from 'three';
-// import { watch } from 'vue';
+import { watch } from 'vue';
 
 export default {
   inject: ['three'],
@@ -11,12 +11,19 @@ export default {
     onError: Function,
   },
   created() {
-    this.texture = new TextureLoader().load(this.src, this.onLoaded, this.onProgress, this.onError);
+    this.createTexture();
+    watch(() => this.src, this.refreshTexture);
   },
   unmounted() {
     this.texture.dispose();
   },
   methods: {
+    createTexture() {
+      this.texture = new TextureLoader().load(this.src, this.onLoaded, this.onProgress, this.onError);
+    },
+    refreshTexture() {
+      this.createTexture();
+    },
     onLoaded() {
       if (this.onLoad) this.onLoad();
       this.$emit('loaded');

src/materials/EnvMap.js

@@ -9,5 +9,11 @@ export default {
   unmounted() {
     this.material.setEnvMap(null);
   },
+  methods: {
+    refreshTexture() {
+      this.createTexture();
+      this.material.setEnvMap(this.texture);
+    },
+  },
   __hmrId: 'EnvMap',
 };

src/materials/Map.js

@@ -10,6 +10,10 @@ export default {
     this.material.setMap(null);
   },
   methods: {
+    refreshTexture() {
+      this.createTexture();
+      this.material.setMap(this.texture);
+    },
   },
   __hmrId: 'Map',
 };