wip: src

dist/xrfragment.aframe.js

@@ -1352,7 +1352,6 @@ xrf.frag.src = function(v, opts){
 
   const localSRC = () => {
     
-    // scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
     setTimeout( () => {
       // scale URI XR Fragments inside src-value 
       for( var i in frag ){
@@ -1398,10 +1397,7 @@ xrf.frag.src = function(v, opts){
   else externalSRC()                  // external file
 }
 
-/*
+// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
- * replace the src-mesh with the contents of the src
- */
-
 xrf.frag.src.scale = function(scene, opts, url){
     let { mesh, model, camera, renderer, THREE} = opts
     let restrictToBoundingBox = mesh.geometry
@@ -1438,6 +1434,10 @@ xrf.frag.src.scale = function(scene, opts, url){
     if( !opts.recursive && mesh.material ) mesh.material.visible = false // lets hide the preview object because deleting disables animations+nested objs
 }
 
+/*
+ * replace the src-mesh with the contents of the src
+ */
+
 xrf.frag.src.type = {}
 
 /*
@@ -1474,6 +1474,49 @@ xrf.frag.src.type['model/gltf+json'] = function( url, opts ){
     loader.load(url, onLoad )
   })
 }
+
+/*
+ * mimetype: image/png 
+ * mimetype: image/jpg 
+ * mimetype: image/gif 
+ */
+
+xrf.frag.src.type['image/png'] = function(url,opts){
+  let {mesh} = opts
+  let restrictToBoundingBox = mesh.geometry
+  const texture = new THREE.TextureLoader().load( url );
+	texture.colorSpace = THREE.SRGBColorSpace;
+
+  //const geometry = new THREE.BoxGeometry();
+  const material = new THREE.MeshBasicMaterial({ 
+    map: texture, 
+    transparent: url.match(/(png|gif)/) ? true : false,
+    side: THREE.DoubleSide,
+    color: 0xFFFFFF,
+    opacity:1
+  });
+
+  // stretch image by forcing uv-coordinages 
+  if( mesh.geometry ){
+    if( mesh.geometry.attributes.uv ){ // buffergeometries 
+      let uv = mesh.geometry.attributes.uv;
+      //       i  u  v
+      uv.setXY(0, 0, 0 )
+      uv.setXY(1, 1, 0 )
+      uv.setXY(2, 0, 1 )
+      uv.setXY(3, 1, 1 )
+    }else {
+      console.warn("xrfragment: uv's of ${url} might be off for non-buffer-geometries *TODO*")
+      //if( geometry.faceVertexUvs ){
+      // *TODO* force uv's of dynamically created geometries (in threejs)
+      //}
+    }
+  }
+  mesh.material = material
+}
+xrf.frag.src.type['image/gif'] = xrf.frag.src.type['image/png']
+xrf.frag.src.type['image/jpg'] = xrf.frag.src.type['image/png']
+
 window.AFRAME.registerComponent('xrf', {
   schema: {
   },

dist/xrfragment.three.js

@@ -1352,7 +1352,6 @@ xrf.frag.src = function(v, opts){
 
   const localSRC = () => {
     
-    // scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
     setTimeout( () => {
       // scale URI XR Fragments inside src-value 
       for( var i in frag ){
@@ -1398,10 +1397,7 @@ xrf.frag.src = function(v, opts){
   else externalSRC()                  // external file
 }
 
-/*
+// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
- * replace the src-mesh with the contents of the src
- */
-
 xrf.frag.src.scale = function(scene, opts, url){
     let { mesh, model, camera, renderer, THREE} = opts
     let restrictToBoundingBox = mesh.geometry
@@ -1438,6 +1434,10 @@ xrf.frag.src.scale = function(scene, opts, url){
     if( !opts.recursive && mesh.material ) mesh.material.visible = false // lets hide the preview object because deleting disables animations+nested objs
 }
 
+/*
+ * replace the src-mesh with the contents of the src
+ */
+
 xrf.frag.src.type = {}
 
 /*
@@ -1474,3 +1474,46 @@ xrf.frag.src.type['model/gltf+json'] = function( url, opts ){
     loader.load(url, onLoad )
   })
 }
+
+/*
+ * mimetype: image/png 
+ * mimetype: image/jpg 
+ * mimetype: image/gif 
+ */
+
+xrf.frag.src.type['image/png'] = function(url,opts){
+  let {mesh} = opts
+  let restrictToBoundingBox = mesh.geometry
+  const texture = new THREE.TextureLoader().load( url );
+	texture.colorSpace = THREE.SRGBColorSpace;
+
+  //const geometry = new THREE.BoxGeometry();
+  const material = new THREE.MeshBasicMaterial({ 
+    map: texture, 
+    transparent: url.match(/(png|gif)/) ? true : false,
+    side: THREE.DoubleSide,
+    color: 0xFFFFFF,
+    opacity:1
+  });
+
+  // stretch image by forcing uv-coordinages 
+  if( mesh.geometry ){
+    if( mesh.geometry.attributes.uv ){ // buffergeometries 
+      let uv = mesh.geometry.attributes.uv;
+      //       i  u  v
+      uv.setXY(0, 0, 0 )
+      uv.setXY(1, 1, 0 )
+      uv.setXY(2, 0, 1 )
+      uv.setXY(3, 1, 1 )
+    }else {
+      console.warn("xrfragment: uv's of ${url} might be off for non-buffer-geometries *TODO*")
+      //if( geometry.faceVertexUvs ){
+      // *TODO* force uv's of dynamically created geometries (in threejs)
+      //}
+    }
+  }
+  mesh.material = material
+}
+xrf.frag.src.type['image/gif'] = xrf.frag.src.type['image/png']
+xrf.frag.src.type['image/jpg'] = xrf.frag.src.type['image/png']
+

dist/xrfragment.three.module.js

@@ -1352,7 +1352,6 @@ xrf.frag.src = function(v, opts){
 
   const localSRC = () => {
     
-    // scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
     setTimeout( () => {
       // scale URI XR Fragments inside src-value 
       for( var i in frag ){
@@ -1398,10 +1397,7 @@ xrf.frag.src = function(v, opts){
   else externalSRC()                  // external file
 }
 
-/*
+// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
- * replace the src-mesh with the contents of the src
- */
-
 xrf.frag.src.scale = function(scene, opts, url){
     let { mesh, model, camera, renderer, THREE} = opts
     let restrictToBoundingBox = mesh.geometry
@@ -1438,6 +1434,10 @@ xrf.frag.src.scale = function(scene, opts, url){
     if( !opts.recursive && mesh.material ) mesh.material.visible = false // lets hide the preview object because deleting disables animations+nested objs
 }
 
+/*
+ * replace the src-mesh with the contents of the src
+ */
+
 xrf.frag.src.type = {}
 
 /*
@@ -1474,4 +1474,47 @@ xrf.frag.src.type['model/gltf+json'] = function( url, opts ){
     loader.load(url, onLoad )
   })
 }
+
+/*
+ * mimetype: image/png 
+ * mimetype: image/jpg 
+ * mimetype: image/gif 
+ */
+
+xrf.frag.src.type['image/png'] = function(url,opts){
+  let {mesh} = opts
+  let restrictToBoundingBox = mesh.geometry
+  const texture = new THREE.TextureLoader().load( url );
+	texture.colorSpace = THREE.SRGBColorSpace;
+
+  //const geometry = new THREE.BoxGeometry();
+  const material = new THREE.MeshBasicMaterial({ 
+    map: texture, 
+    transparent: url.match(/(png|gif)/) ? true : false,
+    side: THREE.DoubleSide,
+    color: 0xFFFFFF,
+    opacity:1
+  });
+
+  // stretch image by forcing uv-coordinages 
+  if( mesh.geometry ){
+    if( mesh.geometry.attributes.uv ){ // buffergeometries 
+      let uv = mesh.geometry.attributes.uv;
+      //       i  u  v
+      uv.setXY(0, 0, 0 )
+      uv.setXY(1, 1, 0 )
+      uv.setXY(2, 0, 1 )
+      uv.setXY(3, 1, 1 )
+    }else {
+      console.warn("xrfragment: uv's of ${url} might be off for non-buffer-geometries *TODO*")
+      //if( geometry.faceVertexUvs ){
+      // *TODO* force uv's of dynamically created geometries (in threejs)
+      //}
+    }
+  }
+  mesh.material = material
+}
+xrf.frag.src.type['image/gif'] = xrf.frag.src.type['image/png']
+xrf.frag.src.type['image/jpg'] = xrf.frag.src.type['image/png']
+
 export default xrf;

src/3rd/js/three/xrf/src.js

@@ -12,7 +12,6 @@ xrf.frag.src = function(v, opts){
 
   const localSRC = () => {
     
-    // scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
     setTimeout( () => {
       // scale URI XR Fragments inside src-value 
       for( var i in frag ){
@@ -58,10 +57,7 @@ xrf.frag.src = function(v, opts){
   else externalSRC()                  // external file
 }
 
-/*
+// scale embedded XR fragments https://xrfragment.org/#scaling%20of%20instanced%20objects
- * replace the src-mesh with the contents of the src
- */
-
 xrf.frag.src.scale = function(scene, opts, url){
     let { mesh, model, camera, renderer, THREE} = opts
     let restrictToBoundingBox = mesh.geometry
@@ -98,6 +94,10 @@ xrf.frag.src.scale = function(scene, opts, url){
     if( !opts.recursive && mesh.material ) mesh.material.visible = false // lets hide the preview object because deleting disables animations+nested objs
 }
 
+/*
+ * replace the src-mesh with the contents of the src
+ */
+
 xrf.frag.src.type = {}
 
 /*
@@ -142,11 +142,37 @@ xrf.frag.src.type['model/gltf+json'] = function( url, opts ){
  */
 
 xrf.frag.src.type['image/png'] = function(url,opts){
-const texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
+  let {mesh} = opts
+  let restrictToBoundingBox = mesh.geometry
+  const texture = new THREE.TextureLoader().load( url );
 	texture.colorSpace = THREE.SRGBColorSpace;
 
-				const geometry = new THREE.BoxGeometry();
+  //const geometry = new THREE.BoxGeometry();
-				const material = new THREE.MeshBasicMaterial( { map: texture } );
+  const material = new THREE.MeshBasicMaterial({ 
+    map: texture, 
+    transparent: url.match(/(png|gif)/) ? true : false,
+    side: THREE.DoubleSide,
+    color: 0xFFFFFF,
+    opacity:1
+  });
+
+  // stretch image by forcing uv-coordinages 
+  if( mesh.geometry ){
+    if( mesh.geometry.attributes.uv ){ // buffergeometries 
+      let uv = mesh.geometry.attributes.uv;
+      //       i  u  v
+      uv.setXY(0, 0, 0 )
+      uv.setXY(1, 1, 0 )
+      uv.setXY(2, 0, 1 )
+      uv.setXY(3, 1, 1 )
+    }else {
+      console.warn("xrfragment: uv's of ${url} might be off for non-buffer-geometries *TODO*")
+      //if( geometry.faceVertexUvs ){
+      // *TODO* force uv's of dynamically created geometries (in threejs)
+      //}
+    }
+  }
+  mesh.material = material
 }
 xrf.frag.src.type['image/gif'] = xrf.frag.src.type['image/png']
 xrf.frag.src.type['image/jpg'] = xrf.frag.src.type['image/png']