2020-10-04 06:07:10 +08:00
|
|
|
import { TextureLoader } from 'three';
|
2020-10-04 06:20:27 +08:00
|
|
|
import { watch } from 'vue';
|
2020-10-04 06:07:10 +08:00
|
|
|
|
|
|
|
export default {
|
2020-10-04 20:00:07 +08:00
|
|
|
inject: ['material'],
|
2020-10-04 06:07:10 +08:00
|
|
|
emits: ['loaded'],
|
|
|
|
props: {
|
|
|
|
src: String,
|
|
|
|
onLoad: Function,
|
|
|
|
onProgress: Function,
|
|
|
|
onError: Function,
|
2020-10-04 20:00:07 +08:00
|
|
|
id: { type: String, default: 'map' },
|
2020-10-04 06:07:10 +08:00
|
|
|
},
|
|
|
|
created() {
|
2020-10-04 20:00:07 +08:00
|
|
|
this.refreshTexture();
|
2020-10-04 06:20:27 +08:00
|
|
|
watch(() => this.src, this.refreshTexture);
|
2020-10-04 06:07:10 +08:00
|
|
|
},
|
|
|
|
unmounted() {
|
2020-10-05 04:23:00 +08:00
|
|
|
this.material.setTexture(null, this.id);
|
2020-10-04 06:07:10 +08:00
|
|
|
this.texture.dispose();
|
|
|
|
},
|
|
|
|
methods: {
|
2020-10-04 06:20:27 +08:00
|
|
|
createTexture() {
|
|
|
|
this.texture = new TextureLoader().load(this.src, this.onLoaded, this.onProgress, this.onError);
|
|
|
|
},
|
|
|
|
refreshTexture() {
|
|
|
|
this.createTexture();
|
2020-10-04 20:00:07 +08:00
|
|
|
this.material.setTexture(this.texture, this.id);
|
2020-10-04 06:20:27 +08:00
|
|
|
},
|
2020-10-04 06:07:10 +08:00
|
|
|
onLoaded() {
|
|
|
|
if (this.onLoad) this.onLoad();
|
|
|
|
this.$emit('loaded');
|
|
|
|
},
|
|
|
|
},
|
2021-03-07 06:14:22 +08:00
|
|
|
render() { return []; },
|
2020-10-04 06:07:10 +08:00
|
|
|
};
|