diff --git a/src/core/CubeTexture.js b/src/core/CubeTexture.js index 3f5e16b..96cd560 100644 --- a/src/core/CubeTexture.js +++ b/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() - .setPath(this.path) - .load(this.urls, this.onLoaded, this.onProgress, this.onError); + this.createTexture(); + watch(() => this.path, this.refreshTexture); + 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'); diff --git a/src/core/Texture.js b/src/core/Texture.js index e6e76bb..6adf560 100644 --- a/src/core/Texture.js +++ b/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'); diff --git a/src/materials/EnvMap.js b/src/materials/EnvMap.js index bdc9359..699a0b8 100644 --- a/src/materials/EnvMap.js +++ b/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', }; diff --git a/src/materials/Map.js b/src/materials/Map.js index c45e851..6d878f3 100644 --- a/src/materials/Map.js +++ b/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', };