diff --git a/src/components/demos/Demo4.vue b/src/components/demos/Demo4.vue index 03a3eea..50e3dde 100644 --- a/src/components/demos/Demo4.vue +++ b/src/components/demos/Demo4.vue @@ -4,7 +4,7 @@ - + diff --git a/src/components/index.js b/src/components/index.js index 2ba5c6c..a005b6c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,5 +4,6 @@ export { default as NoisySphere } from './noisy/NoisySphere.js'; export { default as NoisyText } from './noisy/NoisyText.js'; export { default as Slider1 } from './sliders/Slider1.vue'; +export { default as Slider2 } from './sliders/Slider2.vue'; export { default as GLTFViewer } from './viewers/GLTFViewer.vue'; diff --git a/src/components/sliders/Slider1.vue b/src/components/sliders/Slider1.vue index f83d7d0..30fc58b 100644 --- a/src/components/sliders/Slider1.vue +++ b/src/components/sliders/Slider1.vue @@ -19,10 +19,9 @@ export default { events: { type: Object, default: () => { return { wheel: true, click: true, keyup: true }; } }, }, setup() { - const { textures, loadTextures } = useTextures(); + const loader = useTextures(); return { - textures, - loadTextures, + loader, progress: 0, targetProgress: 0, }; @@ -33,13 +32,15 @@ export default { if (this.images.length < 2) { console.error('This slider needs at least 2 images.'); } else { - this.loadTextures(this.images, this.init); + this.loader.loadTextures(this.images, this.init); } }, unmounted() { - document.removeEventListener('click', this.onClick); + this.loader.dispose(); + const domElement = this.three.renderer.domElement; + domElement.removeEventListener('click', this.onClick); + domElement.removeEventListener('wheel', this.onWheel); document.removeEventListener('keyup', this.onKeyup); - window.removeEventListener('wheel', this.onWheel); }, methods: { init() { @@ -56,9 +57,10 @@ export default { } ); - if (this.events.click) document.addEventListener('click', this.onClick); + const domElement = this.three.renderer.domElement; + if (this.events.click) domElement.addEventListener('click', this.onClick); + if (this.events.wheel) domElement.addEventListener('wheel', this.onWheel); if (this.events.keyup) document.addEventListener('keyup', this.onKeyup); - if (this.events.wheel) window.addEventListener('wheel', this.onWheel); this.three.onBeforeRender(this.updateProgress); this.three.onAfterResize(this.onResize); }, @@ -70,14 +72,14 @@ export default { renderer, screen: this.three.size, size: 10, anim: 1, - texture: this.textures[0], + texture: this.loader.textures[0], }); this.plane2 = new AnimatedPlane({ renderer, screen: this.three.size, size: 10, anim: 2, - texture: this.textures[1], + texture: this.loader.textures[1], }); this.setPlanesProgress(0); @@ -137,8 +139,8 @@ export default { if ((pdiff > 0 && p1 < p0) || (pdiff < 0 && p0 < p1)) { const i = Math.floor(progress1) % this.images.length; const j = (i + 1) % this.images.length; - this.plane1.setTexture(this.textures[i]); - this.plane2.setTexture(this.textures[j]); + this.plane1.setTexture(this.loader.textures[i]); + this.plane2.setTexture(this.loader.textures[j]); } this.progress = progress1; diff --git a/src/components/sliders/Slider2.vue b/src/components/sliders/Slider2.vue index 7a66a69..80c3655 100644 --- a/src/components/sliders/Slider2.vue +++ b/src/components/sliders/Slider2.vue @@ -39,9 +39,10 @@ export default { }, unmounted() { this.loader.dispose(); - document.removeEventListener('click', this.onClick); + const domElement = this.three.renderer.domElement; + domElement.removeEventListener('click', this.onClick); + domElement.removeEventListener('wheel', this.onWheel); document.removeEventListener('keyup', this.onKeyup); - window.removeEventListener('wheel', this.onWheel); }, methods: { init() { @@ -57,9 +58,10 @@ export default { } ); - if (this.events.click) document.addEventListener('click', this.onClick); + const domElement = this.three.renderer.domElement; + if (this.events.click) domElement.addEventListener('click', this.onClick); + if (this.events.wheel) domElement.addEventListener('wheel', this.onWheel); if (this.events.keyup) document.addEventListener('keyup', this.onKeyup); - if (this.events.wheel) window.addEventListener('wheel', this.onWheel); this.three.onBeforeRender(this.animate); this.three.onAfterResize(this.onResize); },