[WIP] Added gallery prototype for browsing scenes

index.html

@@ -19,6 +19,16 @@
         <img id="floor" src="https://cdn.aframe.io/a-painter/images/floor.jpg" crossOrigin="anonymous">
         <img id="skymap" src="https://cdn.aframe.io/a-painter/images/sky.jpg" crossOrigin="anonymous">
         <img id="uinormal" src="https://cdn.aframe.io/a-painter/images/ui-normal.png" crossOrigin="anonymous">
+
+        <img id="preview-you-shall-not-pass" src="http://localhost:8080/assets/images/you-shall-not-pass.png">
+        <img id="preview-aframe-astronaut" src="http://localhost:8080/assets/images/aframe-astronaut.png">
+        <img id="preview-alien-creeper" src="http://localhost:8080/assets/images/alien-creeper.png">
+        <img id="preview-flying-man" src="http://localhost:8080/assets/images/flying-man.png">
+        <img id="preview-skull-head" src="http://localhost:8080/assets/images/skull-head.png">
+        <img id="preview-spongebob-imagination" src="http://localhost:8080/assets/images/spongebob-imagination.png">
+        <img id="preview-man-and-butterfly" src="http://localhost:8080/assets/images/man-and-butterfly.png">
+        <img id="preview-tree-stub" src="http://localhost:8080/assets/images/tree-stub.png">
+
         <a-asset-item id="logoobj" src="https://cdn.aframe.io/a-painter/models/logo.obj"></a-asset-item>
         <a-asset-item id="logomtl" src="https://cdn.aframe.io/a-painter/models/logo.mtl"></a-asset-item>
         <a-asset-item id="uiobj" src="https://cdn.aframe.io/a-painter/models/ui.obj"></a-asset-item>
@@ -44,6 +54,12 @@
                 rotation="-90 0 0"
                 material="shader: flat; src: #floor">
       </a-entity>
+
+      <a-entity id="carousel" position="-1.1 0.7 0" visible="false">
+        <a-image id="preview-0" position="0 1.5 -1.25" geometry="height:0.5;width:0.7" material="opacity:0.3;shader:flat" src="#preview-you-shall-not-pass"></a-image>
+        <a-image id="preview-1" position="0 0.9 -1.25" geometry="height:0.5;width:0.7" src="#preview-you-shall-not-pass"></a-image>
+        <a-image id="preview-2" position="0 0.3 -1.25" geometry="height:0.5;width:0.7" material="opacity:0.3;shader:flat" src="#preview-you-shall-not-pass"></a-image>
+      </a-entity>
       <a-entity id="sky" geometry="primitive:sphere; radius:30; phiLength:360; phiStart:0; thetaLength:90" material="shader:flat; side:back; height:2048; src:#skymap; width:2048"></a-entity>
       <a-entity id="acamera" camera look-controls-alt orbit-controls></a-entity>
     </a-scene>

src/components/gallery-controls.js

@@ -0,0 +1,119 @@
+/* globals AFRAME THREE */
+AFRAME.registerComponent('gallery-controls', {
+  dependencies: ['tracked-controls', 'brush'],
+
+  schema: {},
+
+  galleryIndex: 1,
+
+  gallery: [{
+    image: 'aframe-astronaut',
+    href: 'https://ucarecdn.com/9687f762-43ff-488d-8e33-8885770f59b3/',
+  }, {
+    image: 'you-shall-not-pass',
+    href: 'https://ucarecdn.com/962b242b-87a9-422c-b730-febdc470f203/',
+  }, {
+    image: 'alien-creeper',
+    href: 'https://ucarecdn.com/c9c89a30-7259-46aa-9b02-64b72adb3fb2/',
+  }, {
+    image: 'flying-man',
+    href: 'https://ucarecdn.com/bacf6186-96b1-404c-9751-e955ece04919/',
+  }, {
+    image: 'skull-head',
+    href: 'https://ucarecdn.com/d939bcb0-bc69-4600-a5d2-3e0b47e0639c/',
+  }, {
+    image: 'spongebob-imagination',
+    href: 'https://ucarecdn.com/b6298564-d13b-4917-89cd-6a6b2ceb8efd/',
+  }, {
+    image: 'man-and-butterfly',
+    href: 'https://ucarecdn.com/3e089e07-be62-48e1-9f12-9a284c249e77/',
+  }, {
+    image: 'tree-stub',
+    href: 'https://ucarecdn.com/3f92dffd-1c66-400d-898a-9a9decd5f07a/',
+  }],
+
+  init: function () {
+    var el = this.el;
+    var self = this;
+
+    this.setPreviews();
+
+    var handleAxisMoveDebounced = debounce(this.handleAxisMove.bind(this), 250);
+    document.addEventListener('keydown', this.handleKeyDown.bind(this));
+    // this.el.addEventListener('axismove', handleAxisMoveDebounced);
+
+    function debounce(func, wait, immediate) {
+    	var timeout;
+    	return function() {
+    		var context = this, args = arguments;
+    		var later = function() {
+    			timeout = null;
+    			if (!immediate) func.apply(context, args);
+    		};
+    		var callNow = immediate && !timeout;
+    		clearTimeout(timeout);
+    		timeout = setTimeout(later, wait);
+    		if (callNow) func.apply(context, args);
+    	};
+    };
+  },
+
+  handleKeyDown: function(evt) {
+    if (evt.keyCode === 40 || evt.keyCode === 38) {
+      this.handleAxisMove(evt);
+    }
+
+    if (evt.keyCode === 13) {
+      this.handlePreviewSelect.apply(this);
+    }
+  },
+
+  handleAxisMove: function(evt) {
+    // evt = { detail: { axis: [1, -1] } };
+    // if ((evt.detail.axis[0] === 0 && evt.detail.axis[1] === 0) &&
+    //     this.data.hand === 'left') {
+    //   return;
+    // }
+
+    var direction;
+    if (evt.keyCode === 40) {
+      direction = 'forward';
+    } else if (evt.keyCode === 38) {
+      direction = 'backward';
+    }
+
+    // direction = evt.detail.axis[1] < 0 ? 'forward' : 'backward';
+    if (direction === 'backward' && this.galleryIndex >= 1) {
+      this.galleryIndex--;
+      this.setPreviews();
+    } else if (this.galleryIndex < this.gallery.length - 1 &&
+      direction === 'forward') {
+      this.galleryIndex++;
+      this.setPreviews();
+    }
+  },
+
+  setPreviews: function () {
+    var preview0 = document.querySelector('#preview-0');
+    var preview1 = document.querySelector('#preview-1');
+    var preview2 = document.querySelector('#preview-2');
+
+    if (!this.gallery[this.galleryIndex - 1]) {
+      preview0.setAttribute('src', null);
+    } else {
+      preview0.setAttribute('src', '#preview-' + this.gallery[this.galleryIndex - 1].image);
+    }
+
+    preview1.setAttribute('src', '#preview-' + this.gallery[this.galleryIndex].image);
+
+    if (!this.gallery[this.galleryIndex + 1]) {
+      preview2.setAttribute('src', null);
+    } else {
+      preview2.setAttribute('src', '#preview-' + this.gallery[this.galleryIndex + 1].image);
+    }
+  },
+
+  handlePreviewSelect: function() {
+    this.el.sceneEl.systems.brush.loadFromUrl(this.gallery[this.galleryIndex].href);
+  },
+});

src/index.js

@@ -17,6 +17,7 @@ require('./components/line.js');
 require('./components/look-controls-alt.js');
 require('./components/orbit-controls.js');
 require('./components/paint-controls.js');
+require('./components/gallery-controls.js');
 require('./components/ui.js');
 require('./components/ui-raycaster.js');
 

src/systems/painter.js

@@ -30,6 +30,13 @@ AFRAME.registerSystem('painter', {
       document.getElementById('apainter-author').classList.remove('hidden');
     }
 
+    if (urlParams.gallery) {
+      document.getElementById('apainter-logo').classList.remove('hidden');
+      document.getElementById('logo').setAttribute('visible', false);
+      document.getElementById('right-hand').setAttribute('gallery-controls', '');
+      document.getElementById('carousel').setAttribute('visible', true);
+    }
+
     this.startPainting = false;
     var self = this;
     document.addEventListener('stroke-started', function (event) {