From aad86ea41ac909ad087b1ba0a512bd6b8bab4cf6 Mon Sep 17 00:00:00 2001 From: QuanticPotatoes Date: Thu, 15 Mar 2018 15:24:54 +0100 Subject: [PATCH 01/13] :sparkles: split image & add example --- dist/aframe-stereo-component.js | 20 +- dist/aframe-stereo-component.min.js | 2 +- examples/build.js | 72062 ++++++++++++------------- examples/index.html | 3 +- examples/split_image/index.html | 30 + examples/split_image/textures/LR.jpg | Bin 0 -> 4450381 bytes index.js | 20 +- package-lock.json | 7954 +++ 8 files changed, 43997 insertions(+), 36094 deletions(-) create mode 100644 examples/split_image/index.html create mode 100644 examples/split_image/textures/LR.jpg create mode 100644 package-lock.json diff --git a/dist/aframe-stereo-component.js b/dist/aframe-stereo-component.js index fff8f8c..1d0dc21 100644 --- a/dist/aframe-stereo-component.js +++ b/dist/aframe-stereo-component.js @@ -82,11 +82,10 @@ schema: { eye: { type: 'string', default: "left"}, mode: { type: 'string', default: "full"}, - split: { type: 'string', default: "horizontal"}, + split: { type: 'string', default: ""}, playOnClick: { type: 'boolean', default: true }, }, init: function(){ - // Flag to acknowledge if 'click' on video has been attached to canvas // Keep in mind that canvas is the last thing initialized on a scene so have to wait for the event // or just check in every tick if is not undefined @@ -94,6 +93,8 @@ this.video_click_event_added = false; this.material_is_a_video = false; + this.material_is_a_image = false; + // Check if material is a video from html tag (object3D.material.map instanceof THREE.VideoTexture does not // always work @@ -102,9 +103,10 @@ var src = this.el.getAttribute("material").src; // If src is an object and its tagName is video... - if (typeof src === 'object' && ('tagName' in src && src.tagName === "VIDEO")) { this.material_is_a_video = true; + } else if (typeof src === 'object' && ('tagName' in src && src.tagName === "IMG")) { + this.material_is_a_image = true; } } @@ -120,7 +122,8 @@ return object3D.geometry instanceof geometry; }); - if (isValidGeometry && this.material_is_a_video) { + + if (isValidGeometry && (this.material_is_a_video || this.material_is_a_image && !!this.data.split)) { // if half-dome mode, rebuild geometry (with default 100, radius, 64 width segments and 64 height segments) @@ -183,15 +186,12 @@ object3D.geometry = new THREE.BufferGeometry().fromGeometry(geometry); } - else{ - - // No need to attach video click if not a sphere and not a video, set this to true - - this.video_click_event_added = true; + if(!this.material_is_a_video) { + // No need to attach video click if not a sphere and not a video, set this to true + this.video_click_event_added = true; } - }, // On element update, put in the right layer, 0:both, 1:left, 2:right (spheres or not) diff --git a/dist/aframe-stereo-component.min.js b/dist/aframe-stereo-component.min.js index 55e944e..1a66b8d 100644 --- a/dist/aframe-stereo-component.min.js +++ b/dist/aframe-stereo-component.min.js @@ -1 +1 @@ -!function(e){function t(a){if(i[a])return i[a].exports;var r=i[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){!function(){if(!AFRAME)return void console.error("Component attempted to register before AFRAME was available.");var e={stereo:i(1).stereo_component,stereocam:i(1).stereocam_component};Object.keys(e).forEach(function(t){AFRAME.aframeCore?AFRAME.aframeCore.registerComponent(t,e[t]):AFRAME.registerComponent(t,e[t])})}()},function(e,t){e.exports={stereo_component:{schema:{eye:{type:"string",default:"left"},mode:{type:"string",default:"full"},split:{type:"string",default:"horizontal"},playOnClick:{type:"boolean",default:!0}},init:function(){if(this.video_click_event_added=!1,this.material_is_a_video=!1,null!==this.el.getAttribute("material")&&"src"in this.el.getAttribute("material")&&""!==this.el.getAttribute("material").src){var e=this.el.getAttribute("material").src;"object"==typeof e&&"tagName"in e&&"VIDEO"===e.tagName&&(this.material_is_a_video=!0)}var t=this.el.object3D.children[0],i=[THREE.SphereGeometry,THREE.SphereBufferGeometry,THREE.BufferGeometry],a=i.some(function(e){return t.geometry instanceof e});if(a&&this.material_is_a_video){if("half"===this.data.mode)var r=this.el.getAttribute("geometry"),o=new THREE.SphereGeometry(r.radius||100,r.segmentsWidth||64,r.segmentsHeight||64,Math.PI/2,Math.PI,0,Math.PI);else var r=this.el.getAttribute("geometry"),o=new THREE.SphereGeometry(r.radius||100,r.segmentsWidth||64,r.segmentsHeight||64);if(t.rotation.y=Math.PI/2,"left"===this.data.eye)for(var n=o.faceVertexUvs[0],s="vertical"===this.data.split?"y":"x",l=0;l 0) { - throw new Error('Invalid string. Length must be a multiple of 4') - } + this.repeatDelay = function (amount) { - // the number of equal signs (place holders) - // if there are two placeholders, than the two characters before it - // represent one byte - // if there is only one, then the three characters before it represent 2 bytes - // this is just a cheap hack to not do indexOf twice - return b64[len - 2] === '=' ? 2 : b64[len - 1] === '=' ? 1 : 0 -} + _repeatDelayTime = amount; + return this; -function byteLength (b64) { - // base64 is 4/3 + up to two characters of the original data - return b64.length * 3 / 4 - placeHoldersCount(b64) -} + }; -function toByteArray (b64) { - var i, j, l, tmp, placeHolders, arr - var len = b64.length - placeHolders = placeHoldersCount(b64) + this.yoyo = function (yoyo) { - arr = new Arr(len * 3 / 4 - placeHolders) + _yoyo = yoyo; + return this; - // if there are placeholders, only get up to the last complete 4 chars - l = placeHolders > 0 ? len - 4 : len + }; - var L = 0 - for (i = 0, j = 0; i < l; i += 4, j += 3) { - tmp = (revLookup[b64.charCodeAt(i)] << 18) | (revLookup[b64.charCodeAt(i + 1)] << 12) | (revLookup[b64.charCodeAt(i + 2)] << 6) | revLookup[b64.charCodeAt(i + 3)] - arr[L++] = (tmp >> 16) & 0xFF - arr[L++] = (tmp >> 8) & 0xFF - arr[L++] = tmp & 0xFF - } + this.easing = function (easing) { - if (placeHolders === 2) { - tmp = (revLookup[b64.charCodeAt(i)] << 2) | (revLookup[b64.charCodeAt(i + 1)] >> 4) - arr[L++] = tmp & 0xFF - } else if (placeHolders === 1) { - tmp = (revLookup[b64.charCodeAt(i)] << 10) | (revLookup[b64.charCodeAt(i + 1)] << 4) | (revLookup[b64.charCodeAt(i + 2)] >> 2) - arr[L++] = (tmp >> 8) & 0xFF - arr[L++] = tmp & 0xFF - } + _easingFunction = easing; + return this; - return arr -} + }; -function tripletToBase64 (num) { - return lookup[num >> 18 & 0x3F] + lookup[num >> 12 & 0x3F] + lookup[num >> 6 & 0x3F] + lookup[num & 0x3F] -} + this.interpolation = function (interpolation) { -function encodeChunk (uint8, start, end) { - var tmp - var output = [] - for (var i = start; i < end; i += 3) { - tmp = (uint8[i] << 16) + (uint8[i + 1] << 8) + (uint8[i + 2]) - output.push(tripletToBase64(tmp)) - } - return output.join('') -} + _interpolationFunction = interpolation; + return this; -function fromByteArray (uint8) { - var tmp - var len = uint8.length - var extraBytes = len % 3 // if we have 1 byte left, pad 2 bytes - var output = '' - var parts = [] - var maxChunkLength = 16383 // must be multiple of 3 + }; - // go through the array every three bytes, we'll deal with trailing stuff later - for (var i = 0, len2 = len - extraBytes; i < len2; i += maxChunkLength) { - parts.push(encodeChunk(uint8, i, (i + maxChunkLength) > len2 ? len2 : (i + maxChunkLength))) - } + this.chain = function () { - // pad the end with zeros, but make sure to not forget the extra bytes - if (extraBytes === 1) { - tmp = uint8[len - 1] - output += lookup[tmp >> 2] - output += lookup[(tmp << 4) & 0x3F] - output += '==' - } else if (extraBytes === 2) { - tmp = (uint8[len - 2] << 8) + (uint8[len - 1]) - output += lookup[tmp >> 10] - output += lookup[(tmp >> 4) & 0x3F] - output += lookup[(tmp << 2) & 0x3F] - output += '=' - } + _chainedTweens = arguments; + return this; - parts.push(output) + }; - return parts.join('') -} + this.onStart = function (callback) { -},{}],4:[function(_dereq_,module,exports){ -'use strict'; -// For more information about browser field, check out the browser field at https://github.com/substack/browserify-handbook#browser-field. + _onStartCallback = callback; + return this; -module.exports = { - // Create a tag with optional data attributes - createLink: function(href, attributes) { - var head = document.head || document.getElementsByTagName('head')[0]; - var link = document.createElement('link'); + }; - link.href = href; - link.rel = 'stylesheet'; + this.onUpdate = function (callback) { - for (var key in attributes) { - if ( ! attributes.hasOwnProperty(key)) { - continue; - } - var value = attributes[key]; - link.setAttribute('data-' + key, value); - } + _onUpdateCallback = callback; + return this; - head.appendChild(link); - }, - // Create a