diff --git a/package-lock.json b/package-lock.json index 2ac612b..e2f1a30 100644 --- a/package-lock.json +++ b/package-lock.json @@ -99,6 +99,11 @@ "animejs": "2.2.0" } }, + "aframe-atlas-uvs-component": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/aframe-atlas-uvs-component/-/aframe-atlas-uvs-component-2.0.0.tgz", + "integrity": "sha512-2Zm07u163vwzT7VLE7y9h9oL1e3RH8CNQGIUvdE+wgl2Yo6iSZwGhIpcYRFODthEdb0vHrCyFMOATZfniq7yhw==" + }, "aframe-audioanalyser-component": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/aframe-audioanalyser-component/-/aframe-audioanalyser-component-4.0.1.tgz", @@ -148,11 +153,6 @@ "resolved": "https://registry.npmjs.org/aframe-slice9-component/-/aframe-slice9-component-1.0.0.tgz", "integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E=" }, - "aframe-state-component": { - "version": "5.0.0-beta6", - "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-5.0.0-beta6.tgz", - "integrity": "sha512-2N4V1Atq4xHEfaiEJD+ryQPBZmCA4gZGV2bbYPWImGAuFiEthaqvXp64TI0K82JjWaIEMeUTSKF1FTeCtyLq3w==" - }, "aframe-super-keyboard": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/aframe-super-keyboard/-/aframe-super-keyboard-2.0.2.tgz", diff --git a/package.json b/package.json index 8b98c32..146b01a 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ }, "dependencies": { "aframe-animation-component": "^5.1.2", + "aframe-atlas-uvs-component": "^2.0.0", "aframe-audioanalyser-component": "^4.0.1", "aframe-event-decorators": "^1.0.2", "aframe-event-set-component": "^4.0.1", diff --git a/src/components/search-thumbnail-atlas.js b/src/components/search-thumbnail-atlas.js new file mode 100644 index 0000000..c523b0b --- /dev/null +++ b/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; + } +}); diff --git a/src/index.js b/src/index.js index c6cd4c1..453eb4d 100644 --- a/src/index.js +++ b/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'); diff --git a/src/templates/menu.html b/src/templates/menu.html index 8083e0b..fe3361b 100644 --- a/src/templates/menu.html +++ b/src/templates/menu.html @@ -22,6 +22,14 @@ position="0.181 -0.055 0.001"> + + - -