wip

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>

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';

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,
+      loader,
-      loadTextures,
       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.plane1.setTexture(this.loader.textures[i]);
-        this.plane2.setTexture(this.textures[j]);
+        this.plane2.setTexture(this.loader.textures[j]);
       }
 
       this.progress = progress1;

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);
     },