work on texture atlasing

src/components/search-thumbnail-atlas.js

@@ -0,0 +1,35 @@
+AFRAME.registerComponent('search-thumbnail-atlas', {
+  dependencies: ['dynamic-texture-atlas', 'geometry', 'material'],
+
+  schema: {
+    dummyUpdater: {type: 'string'}
+  },
+
+  init: function () {
+    this.el.setAttribute('material', 'src', '#searchThumbnailImagesCanvas');
+    this.images = [];
+  },
+
+  update: function () {
+    var el = this.el;
+    var data = this.data;
+
+    const results = el.sceneEl.systems.state.state.searchResultsPage;
+    for (let i = 0; i < results.length; i++) {
+      let img = this.images[i] = this.images[i] || document.createElement('img');
+      img.crossOrigin = 'anonymous';
+      img.src = results[i].image;
+      if (img.complete) {
+        this.el.components['dynamic-texture-atlas'].drawTexture(img, i, 1);
+      } else {
+        img.onload = (function (i) {
+          return () => {
+            this.el.components['dynamic-texture-atlas'].drawTexture(img, i, 1);
+          };
+        })(i);
+      }
+    }
+
+    this.el.getObject3D('mesh').material.map.needsUpdate = true;
+  }
+});

src/index.js

@@ -3,6 +3,7 @@ function requireAll (req) { req.keys().forEach(req); }
 require('../vendor/BufferGeometryUtils');
 
 require('aframe-animation-component');
+require('aframe-atlas-uvs-component');
 require('aframe-audioanalyser-component');
 require('aframe-event-set-component');
 require('aframe-geometry-merger-component');

src/templates/menu.html

@@ -22,6 +22,14 @@
     position="0.181 -0.055 0.001">
   </a-entity>
 
+  <a-entity
+    id="searchThumbnailImages"
+    bind__search-thumbnail-atlas="dummyUpdater: search.songSubNameTexts"
+    geometry="primitive: plane; buffer: false; width: 0.2; height: 0.12"
+    dynamic-texture-atlas="canvasId: searchThumbnailImagesCanvas; canvasWidth: 64; canvasHeight: 512; numColumns: 1; numRows: 6"
+    material="shader: flat"
+    position="-0.45 -0.13 0.001"></a-entity>
+
   <a-entity
     id="searchSongNameTextSelected"
     mixin="textFont"
@@ -83,13 +91,6 @@
         animation__mouseleave="property: components.material.material.opacity; from: 1.0; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
         animation__mouseleavevisible="property: visible; from: true; to: false; startEvents: mouseleave; pauseEvents: mouseenter; dur: 160"
         visible="false"></a-entity>
-      <a-entity class="searchResultContent" position="0.125 -0.05 0">
-        <a-entity
-          class="searchResultImage"
-          bind-item__search-result-image="id: item.id"
-          geometry="primitive: plane; width: 0.2; height: 0.2"
-          material="shader: flat; color: #223"
-          position="-0.576 -0.08 0.001"></a-entity>
       </a-entity>
     </a-entity>
   </template>