From 01d48ba6ae0ed85f1e52537081e5dca47509e6ea Mon Sep 17 00:00:00 2001 From: oscarmarinmiro Date: Tue, 1 Mar 2022 16:07:44 +0100 Subject: [PATCH] - Build & Dist --- dist/aframe-stereo-component.js | 65 ++++++++++++----------------- dist/aframe-stereo-component.min.js | 2 +- examples/basic_video/index.html | 2 +- examples/build.js | 19 ++++----- index.js | 16 +++---- 5 files changed, 44 insertions(+), 60 deletions(-) diff --git a/dist/aframe-stereo-component.js b/dist/aframe-stereo-component.js index fff8f8c..679722e 100644 --- a/dist/aframe-stereo-component.js +++ b/dist/aframe-stereo-component.js @@ -139,48 +139,35 @@ object3D.rotation.y = Math.PI / 2; - // If left eye is set, and the split is horizontal, take the left half of the video texture. If the split - // is set to vertical, take the top/upper half of the video texture. - - if (this.data.eye === "left") { - var uvs = geometry.faceVertexUvs[ 0 ]; - var axis = this.data.split === "vertical" ? "y" : "x"; - for (var i = 0; i < uvs.length; i++) { - for (var j = 0; j < 3; j++) { - if (axis == "x") { - uvs[ i ][ j ][ axis ] *= 0.5; - } - else { - uvs[ i ][ j ][ axis ] *= 0.5; - uvs[ i ][ j ][ axis ] += 0.5; - } - } - } - } - // If right eye is set, and the split is horizontal, take the right half of the video texture. If the split - // is set to vertical, take the bottom/lower half of the video texture. - - if (this.data.eye === "right") { - var uvs = geometry.faceVertexUvs[ 0 ]; - var axis = this.data.split === "vertical" ? "y" : "x"; - for (var i = 0; i < uvs.length; i++) { - for (var j = 0; j < 3; j++) { - if (axis == "x") { - uvs[ i ][ j ][ axis ] *= 0.5; - uvs[ i ][ j ][ axis ] += 0.5; - } - else { - uvs[ i ][ j ][ axis ] *= 0.5; - } - } - } - } + // Calculate texture offset and repeat and modify UV's + // (cannot use in AFrame material params, since mappings are shared when pointing to the same texture, + // thus, one eye overrides the other) -> https://stackoverflow.com/questions/16976365/two-meshes-same-texture-different-offset + + var axis = this.data.split === 'horizontal' ? 'y' : 'x'; + + // !!! NOTE THAT UV texture coordinates, start at the bottom left point of the texture, so y axis coordinates for left eye on horizontal split + // are 0.5 - 1.0, and for the right eye are 0.0 - 0.5 (they are swapped from THREE.js 'y' axis logic) + + var offset = this.data.eye === 'left' ? (axis === 'y' ? {x: 0, y: 0} : {x: 0, y: 0.5}) : (axis === 'y' ? {x: 0.5, y: 0} : {x: 0, y: 0}); + + var repeat = axis === 'y' ? {x: 0.5, y: 1} : {x: 1, y: 0.5}; + + var uvAttribute = geometry.attributes.uv; + + for (var i = 0; i < uvAttribute.count; i++ ) { + var u = uvAttribute.getX(i)*repeat.x + offset.x; + var v = uvAttribute.getY(i)*repeat.y + offset.y; + + uvAttribute.setXY(i, u, v); + + } + + // Needed in BufferGeometry to update UVs - // As AFrame 0.2.0 builds bufferspheres from sphere entities, transform - // into buffergeometry for coherence + uvAttribute.needsUpdate = true - object3D.geometry = new THREE.BufferGeometry().fromGeometry(geometry); + object3D.geometry = geometry } else{ diff --git a/dist/aframe-stereo-component.min.js b/dist/aframe-stereo-component.min.js index 55e944e..b746aae 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 - + diff --git a/examples/build.js b/examples/build.js index 3b989cb..95992ae 100644 --- a/examples/build.js +++ b/examples/build.js @@ -78,22 +78,22 @@ module.exports = { // (cannot use in AFrame material params, since mappings are shared when pointing to the same texture, // thus, one eye overrides the other) -> https://stackoverflow.com/questions/16976365/two-meshes-same-texture-different-offset - const axis = this.data.split === 'horizontal' ? 'y' : 'x'; + var axis = this.data.split === 'horizontal' ? 'y' : 'x'; // !!! NOTE THAT UV texture coordinates, start at the bottom left point of the texture, so y axis coordinates for left eye on horizontal split // are 0.5 - 1.0, and for the right eye are 0.0 - 0.5 (they are swapped from THREE.js 'y' axis logic) - const offset = this.data.eye === 'left' ? (axis === 'y' ? {x: 0, y: 0} : {x: 0, y: 0.5}) : (axis === 'y' ? {x: 0.5, y: 0} : {x: 0, y: 0}) + var offset = this.data.eye === 'left' ? (axis === 'y' ? {x: 0, y: 0} : {x: 0, y: 0.5}) : (axis === 'y' ? {x: 0.5, y: 0} : {x: 0, y: 0}); - const repeat = axis === 'y' ? {x: 0.5, y: 1} : {x: 1, y: 0.5} + var repeat = axis === 'y' ? {x: 0.5, y: 1} : {x: 1, y: 0.5}; - const uvAttribute = geometry.attributes.uv + var uvAttribute = geometry.attributes.uv; - for (let i = 0; i < uvAttribute.count; i++ ) { - let u = uvAttribute.getX(i)*repeat.x + offset.x - let v = uvAttribute.getY(i)*repeat.y + offset.y + for (var i = 0; i < uvAttribute.count; i++ ) { + var u = uvAttribute.getX(i)*repeat.x + offset.x; + var v = uvAttribute.getY(i)*repeat.y + offset.y; - uvAttribute.setXY(i, u, v) + uvAttribute.setXY(i, u, v); } @@ -136,8 +136,6 @@ module.exports = { // If this value is false, it means that (a) this is a video on a sphere [see init method] // and (b) of course, tick is not added - console.log('tick') - if(!this.video_click_event_added && this.data.playOnClick){ if(typeof(this.el.sceneEl.canvas) !== 'undefined'){ @@ -150,7 +148,6 @@ module.exports = { var self = this; this.el.sceneEl.canvas.onclick = function () { - console.log('canvas clicked') self.videoEl.play(); }; diff --git a/index.js b/index.js index 049292a..2c363a8 100755 --- a/index.js +++ b/index.js @@ -70,22 +70,22 @@ module.exports = { // (cannot use in AFrame material params, since mappings are shared when pointing to the same texture, // thus, one eye overrides the other) -> https://stackoverflow.com/questions/16976365/two-meshes-same-texture-different-offset - const axis = this.data.split === 'horizontal' ? 'y' : 'x'; + var axis = this.data.split === 'horizontal' ? 'y' : 'x'; // !!! NOTE THAT UV texture coordinates, start at the bottom left point of the texture, so y axis coordinates for left eye on horizontal split // are 0.5 - 1.0, and for the right eye are 0.0 - 0.5 (they are swapped from THREE.js 'y' axis logic) - const offset = this.data.eye === 'left' ? (axis === 'y' ? {x: 0, y: 0} : {x: 0, y: 0.5}) : (axis === 'y' ? {x: 0.5, y: 0} : {x: 0, y: 0}) + var offset = this.data.eye === 'left' ? (axis === 'y' ? {x: 0, y: 0} : {x: 0, y: 0.5}) : (axis === 'y' ? {x: 0.5, y: 0} : {x: 0, y: 0}); - const repeat = axis === 'y' ? {x: 0.5, y: 1} : {x: 1, y: 0.5} + var repeat = axis === 'y' ? {x: 0.5, y: 1} : {x: 1, y: 0.5}; - const uvAttribute = geometry.attributes.uv + var uvAttribute = geometry.attributes.uv; - for (let i = 0; i < uvAttribute.count; i++ ) { - let u = uvAttribute.getX(i)*repeat.x + offset.x - let v = uvAttribute.getY(i)*repeat.y + offset.y + for (var i = 0; i < uvAttribute.count; i++ ) { + var u = uvAttribute.getX(i)*repeat.x + offset.x; + var v = uvAttribute.getY(i)*repeat.y + offset.y; - uvAttribute.setXY(i, u, v) + uvAttribute.setXY(i, u, v); }