From b3e58ff379a208590b15ac730a3b393c4c7f7774 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Sun, 28 Feb 2021 01:10:24 +0100
Subject: [PATCH] wip

---
 src/components/demos/Demo4.vue     |  2 +-
 src/components/index.js            |  1 +
 src/components/sliders/Slider1.vue | 26 ++++++++++++++------------
 src/components/sliders/Slider2.vue | 10 ++++++----
 4 files changed, 22 insertions(+), 17 deletions(-)

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 @@
     <Scene>
       <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
       <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
-      <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
+      <InstancedMesh ref="imesh" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
         <SphereGeometry :radius="5" />
         <PhongMaterial />
       </InstancedMesh>
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);
     },