fixed threejs compatibility + renamed threejs->three to help './make repos' generate repos from single source

dist/xrfragment.aframe.all.js

@@ -844,6 +844,7 @@ xrf.model  = {}
 xrf.mixers = []
 
 xrf.init = ((init) => function(opts){
+  console.log("add #debug to URL to see XR Fragment debuglog")
   let scene = new opts.THREE.Group()
   opts.scene.add(scene)
   opts.scene = scene
@@ -1413,7 +1414,7 @@ xrf.addEventListener('parseModel', (opts) => {
     mixer.actions.map( (action) => { 
       if( mixer.loop.timeStart != undefined ){
         action.time = mixer.loop.timeStart
-        action.setLoop( THREE.LoopOnce, )
+        action.setLoop( xrf.THREE.LoopOnce, )
         action.timeScale = mixer.timeScale
         action.enabled = true
         if( t.x != 0 ){ 
@@ -2072,9 +2073,9 @@ xrf.portalNonEuclidian = function(opts){
     stencilRef: xrf.portalNonEuclidian.stencilRef,
     needUpdate: false,
     stencilObject: false,
-    cameraDirection: new THREE.Vector3(),
+    cameraDirection: new xrf.THREE.Vector3(),
-    cameraPosition: new THREE.Vector3(),
+    cameraPosition: new xrf.THREE.Vector3(),
-    raycaster: new THREE.Raycaster(),
+    raycaster: new xrf.THREE.Raycaster(),
     isLocal: opts.isLocal,
     isLens: false,
     isInside: false,
@@ -2303,6 +2304,323 @@ xrf.addEventListener('t', (opts) => {
   let t = opts.frag.t
   xrf.scene.traverse( (n) => n.video && (n.video.playXRF(t)) )
 })
+
+// contentLoaders = {".gltf" : () => .....} and so on
+
+function loadFile(contentLoaders, multiple){
+  return () => {
+    window.notify("if you're on Meta browser, file-uploads might be disabled")
+    let input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = multiple;
+    input.accept = Object.keys(contentLoaders).join(",");
+    input.onchange = () => {
+        let files = Array.from(input.files);
+        let file = files.slice ? files[0] : files 
+        for( var i in contentLoaders ){
+          let r = new RegExp('\\'+i+'$')
+          if( file.name.match(r) ) return contentLoaders[i](file)
+        }
+        alert(file.name+" is not supported")
+    };
+    input.click();
+  }
+}
+
+function setupConsole(el){
+  if( !el ) return setTimeout( () => setupConsole( $('.lil-gui') ),200 )
+  let $console = document.createElement('textarea')
+  $console.style.position = 'absolute'
+  $console.style.display = 'block'
+  $console.style.zIndex   = 2000;
+  $console.style.background = "transparent !important"
+  $console.style.pointerEvents = 'none'
+  $console.style.top = '70px'
+  $console.style.padding = '10px'
+  $console.style.margin = '10px'
+  $console.style.background = '#000'
+  $console.style.left = $console.style.right = $console.style.bottom = 0;
+  $console.style.color = '#A6F';
+  $console.style.fontSize = '10px';
+  $console.style.fontFamily = 'Courier'
+  $console.style.border = '0'
+  $console.innerHTML = "XRFRAGMENT CONSOLE OUTPUT:\n" 
+
+  el.appendChild($console)
+
+  console.log = ( (log) => function(){
+    let str = ([...arguments]).join(" ")
+    let s = str;
+    log(s)
+    let lines = String($console.innerHTML + "\n"+s).split("\n")
+    while( lines.length > 200 ) lines.shift()
+    $console.innerHTML = lines.join("\n")
+    $console.scrollTop = $console.scrollHeight;
+  })(console.log.bind(console))
+}
+
+function setupUrlBar(el,XRF){
+  let inIframe = window.location !== window.parent.location
+  let ids = ['#overlay','a#embed','a#source','a#model','#qrcode']
+  let showButtons = () => {
+    ids.map( (i) => $(i).style.display = 'block' ) 
+    $('a#more').style.display = 'none' 
+    if( inIframe ) $('#uri').style.display = 'block'
+  }
+  $('a#more').addEventListener('click', () => showButtons() )
+
+  XRF.addEventListener('hash', () => reflectUrl() )
+  const reflectUrl = window.reflectUrl = (url) => {
+    el.value = url || document.location.search.substr(1) + document.location.hash
+    let QR = window.QR
+    QR.canvas = document.getElementById('qrcode')
+    QR.draw( document.location.href, QR.canvas )
+  }
+  reflectUrl()
+}
+
+function SnackBar(userOptions) {
+    var snackbar = this || (window.snackbar = {});
+    var _Interval;
+    var _Message;
+    var _Element;
+    var _Container;
+    
+    var _OptionDefaults = {
+        message: "Operation performed successfully.",
+        dismissible: true,
+        timeout: 7000,
+        status: ""
+    }
+    var _Options = _OptionDefaults;
+
+    function _Create() {
+        let _Containers = [ ...document.querySelectorAll(".js-snackbar-container") ]
+        _Containers.map( (c) => c.remove() )
+        _Container = null
+
+        if (!_Container) {
+            // need to create a new container for notifications
+            _Container = document.createElement("div");
+            _Container.classList.add("js-snackbar-container");
+
+            document.body.appendChild(_Container);
+        }
+        _Container.innerHTML = ''
+        _Element = document.createElement("div");
+        _Element.classList.add("js-snackbar__wrapper");
+
+        let innerSnack = document.createElement("div");
+        innerSnack.classList.add("js-snackbar", "js-snackbar--show");
+    
+        if (_Options.status) {
+            _Options.status = _Options.status.toLowerCase().trim();
+
+            let status = document.createElement("span");
+            status.classList.add("js-snackbar__status");
+
+
+            if (_Options.status === "success" || _Options.status === "green") {
+                status.classList.add("js-snackbar--success");
+            }
+            else if (_Options.status === "warning" || _Options.status === "alert" || _Options.status === "orange") {
+                status.classList.add("js-snackbar--warning");
+            }
+            else if (_Options.status === "danger" || _Options.status === "error" || _Options.status === "red") {
+                status.classList.add("js-snackbar--danger");
+            }
+            else {
+                status.classList.add("js-snackbar--info");
+            }
+
+            innerSnack.appendChild(status);
+        }
+        
+        _Message = document.createElement("span");
+        _Message.classList.add("js-snackbar__message");
+        _Message.innerHTML = _Options.message;
+
+        innerSnack.appendChild(_Message);
+
+        if (_Options.dismissible) {
+            let closeBtn = document.createElement("span");
+            closeBtn.classList.add("js-snackbar__close");
+            closeBtn.innerText = "\u00D7";
+
+            closeBtn.onclick = snackbar.Close;
+
+            innerSnack.appendChild(closeBtn);
+        }
+
+        _Element.style.height = "0px";
+        _Element.style.opacity = "0";
+        _Element.style.marginTop = "0px";
+        _Element.style.marginBottom = "0px";
+
+        _Element.appendChild(innerSnack);
+        _Container.appendChild(_Element);
+
+        if (_Options.timeout !== false) {
+            _Interval = setTimeout(snackbar.Close, _Options.timeout);
+        }
+    }
+
+    var _ConfigureDefaults = function() {
+        // if no options given, revert to default
+        if (userOptions === undefined) {
+            return;
+        }
+
+        if (userOptions.message !== undefined) {
+            _Options.message = userOptions.message;
+        }
+
+        if (userOptions.dismissible !== undefined) {
+            if (typeof (userOptions.dismissible) === "string") {
+                _Options.dismissible = (userOptions.dismissible === "true");
+            }
+            else if (typeof (userOptions.dismissible) === "boolean") {
+                _Options.dismissible = userOptions.dismissible;
+            }
+            else {
+                console.debug("Invalid option provided for 'dismissable' [" + userOptions.dismissible + "] is of type " + (typeof userOptions.dismissible));
+            }
+        }
+
+
+        if (userOptions.timeout !== undefined) {
+            if (typeof (userOptions.timeout) === "boolean" && userOptions.timeout === false) {
+                _Options.timeout = false;
+            }
+            else if (typeof (userOptions.timeout) === "string") {
+                _Options.timeout = parseInt(userOptions.timeout);
+            }
+
+
+            if (typeof (userOptions.timeout) === "number") {
+                if (userOptions.timeout === Infinity) {
+                    _Options.timeout = false;
+                }
+                else if (userOptions.timeout >= 0) {
+                    _Options.timeout = userOptions.timeout;
+                }
+                else {
+                    console.debug("Invalid timeout entered. Must be greater than or equal to 0.");
+                }
+
+                _Options.timeout = userOptions.timeout;
+            }
+
+            
+        }
+
+        if (userOptions.status !== undefined) {
+            _Options.status = userOptions.status;
+        }
+    }
+
+    snackbar.Open = function() {
+        let contentHeight = _Element.firstElementChild.scrollHeight; // get the height of the content
+
+        _Element.style.height = contentHeight + "px";
+        _Element.style.opacity = 1;
+        _Element.style.marginTop = "5px";
+        _Element.style.marginBottom = "5px";
+
+        _Element.addEventListener("transitioned", function() {
+            _Element.removeEventListener("transitioned", arguments.callee);
+            _Element.style.height = null;
+        })
+    }
+
+    snackbar.Close = function () {
+        if (_Interval)
+            clearInterval(_Interval);
+
+        let snackbarHeight = _Element.scrollHeight; // get the auto height as a px value
+        let snackbarTransitions = _Element.style.transition;
+        _Element.style.transition = "";
+
+        requestAnimationFrame(function() {
+            _Element.style.height = snackbarHeight + "px"; // set the auto height to the px height
+            _Element.style.opacity = 1;
+            _Element.style.marginTop = "0px";
+            _Element.style.marginBottom = "0px";
+            _Element.style.transition = snackbarTransitions
+
+            requestAnimationFrame(function() {
+                _Element.style.height = "0px";
+                _Element.style.opacity = 0;
+            })
+        });
+
+        setTimeout(function() {
+            try { _Container.removeChild(_Element); } catch (e) { }
+        }, 1000);
+    };
+
+    _ConfigureDefaults();
+    _Create();
+    snackbar.Open();
+}
+
+function notify(scope){
+  return function notify(str,opts){
+    str  = String(str)
+    opts = opts || {}        
+    if( !opts.status ){      
+      opts.status = "info"   
+      if( str.match(/error/g)   ) opts.status = "danger"
+      if( str.match(/warning/g) ) opts.status = "warning"
+    }
+    opts = Object.assign({ message: str , status, timeout:4000 },opts)
+    SnackBar( opts )
+  }
+}
+
+function download(){
+  function fetchAndDownload(dataurl, filename) {
+    var a = document.createElement("a");
+    a.href = dataurl;
+    a.setAttribute("download", filename);
+    a.click();
+    return false;
+  }
+  let file = document.location.search.replace(/\?/,'')
+  fetchAndDownload( file, file )
+}
+
+function embed(){
+  // *TODO* this should be part of the XRF Threejs framework
+  if( typeof THREE == 'undefined' ) THREE = xrf.THREE 
+  let radToDeg  = THREE.MathUtils.radToDeg
+  let toDeg     = (x) => x / (Math.PI / 180)
+  let camera    = document.querySelector('[camera]').object3D.parent // *TODO* fix for threejs
+
+  // *TODO* add camera direction
+  let direction = new xrf.THREE.Vector3()
+  camera.getWorldDirection(direction)
+  const pitch   = Math.asin(direction.y);
+  const yaw     = Math.atan2(direction.x, direction.z);
+  const pitchInDegrees = pitch * 180 / Math.PI;
+  const yawInDegrees = yaw * 180 / Math.PI;
+
+  let lastPos = `pos=${camera.position.x.toFixed(2)},${camera.position.y.toFixed(2)},${camera.position.z.toFixed(2)}`
+  let newHash = document.location.hash.replace(/[&]?(pos|rot)=[0-9\.-]+,[0-9\.-]+,[0-9\.-]+/,'')
+  newHash += `&${lastPos}`
+  document.location.hash = newHash.replace(/&&/,'&')
+                                  .replace(/#&/,'')
+  // copy url to clipboard 
+  var dummy = document.createElement('input'),
+      text = window.location.href;
+  document.body.appendChild(dummy);
+  dummy.value = text;
+  dummy.select();
+  document.execCommand('copy');
+  document.body.removeChild(dummy); 
+  // End of *TODO* 
+  window.notify(`<b>Link copied to clipboard!</b> ❤️<br>ps. to embed this experience in your website,<br>copy/paste the following into your HTML:<br><input type="text" value="&lt;iframe src='${document.location.href}'&gt;<br>&lt;/iframe&gt;" id="share"/>`,{timeout:10000})
+}
 window.AFRAME.registerComponent('xrf', {
   schema: {
   },

dist/xrfragment.all.js

@@ -0,0 +1,85 @@
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */
+/*
+ * generated at $(date)
+ * https://xrfragment.org
+ * SPDX-License-Identifier: MPL-2.0
+ */

dist/xrfragment.three.js

@@ -843,6 +843,7 @@ xrf.model  = {}
 xrf.mixers = []
 
 xrf.init = ((init) => function(opts){
+  console.log("add #debug to URL to see XR Fragment debuglog")
   let scene = new opts.THREE.Group()
   opts.scene.add(scene)
   opts.scene = scene
@@ -1412,7 +1413,7 @@ xrf.addEventListener('parseModel', (opts) => {
     mixer.actions.map( (action) => { 
       if( mixer.loop.timeStart != undefined ){
         action.time = mixer.loop.timeStart
-        action.setLoop( THREE.LoopOnce, )
+        action.setLoop( xrf.THREE.LoopOnce, )
         action.timeScale = mixer.timeScale
         action.enabled = true
         if( t.x != 0 ){ 
@@ -2071,9 +2072,9 @@ xrf.portalNonEuclidian = function(opts){
     stencilRef: xrf.portalNonEuclidian.stencilRef,
     needUpdate: false,
     stencilObject: false,
-    cameraDirection: new THREE.Vector3(),
+    cameraDirection: new xrf.THREE.Vector3(),
-    cameraPosition: new THREE.Vector3(),
+    cameraPosition: new xrf.THREE.Vector3(),
-    raycaster: new THREE.Raycaster(),
+    raycaster: new xrf.THREE.Raycaster(),
     isLocal: opts.isLocal,
     isLens: false,
     isInside: false,

dist/xrfragment.three.module.js

@@ -843,6 +843,7 @@ xrf.model  = {}
 xrf.mixers = []
 
 xrf.init = ((init) => function(opts){
+  console.log("add #debug to URL to see XR Fragment debuglog")
   let scene = new opts.THREE.Group()
   opts.scene.add(scene)
   opts.scene = scene
@@ -1412,7 +1413,7 @@ xrf.addEventListener('parseModel', (opts) => {
     mixer.actions.map( (action) => { 
       if( mixer.loop.timeStart != undefined ){
         action.time = mixer.loop.timeStart
-        action.setLoop( THREE.LoopOnce, )
+        action.setLoop( xrf.THREE.LoopOnce, )
         action.timeScale = mixer.timeScale
         action.enabled = true
         if( t.x != 0 ){ 
@@ -2071,9 +2072,9 @@ xrf.portalNonEuclidian = function(opts){
     stencilRef: xrf.portalNonEuclidian.stencilRef,
     needUpdate: false,
     stencilObject: false,
-    cameraDirection: new THREE.Vector3(),
+    cameraDirection: new xrf.THREE.Vector3(),
-    cameraPosition: new THREE.Vector3(),
+    cameraPosition: new xrf.THREE.Vector3(),
-    raycaster: new THREE.Raycaster(),
+    raycaster: new xrf.THREE.Raycaster(),
     isLocal: opts.isLocal,
     isLens: false,
     isInside: false,

example/aframe/sandbox/index.html

@@ -4,14 +4,12 @@
     <title>AFRAME - xrfragment sandbox</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <link rel="stylesheet" href="./../../assets/css/axist.min.css" />
+
-    <link type="text/css" rel="stylesheet" href="./../../assets/css/style.css"/>
-    <script async src="./../../assets/js/alpine.min.js" defer></script>
     <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script>
     <script src="./../../../dist/xrfragment.aframe.js"></script>
-    <script src="./../../assets/js/qr.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script>
-    <script src="./../../../dist/utils.js"></script>
+
+    <link  href="./../../assets/css/style.css" type="text/css" rel="stylesheet"/>
   </head>
   <body>
     <div id="overlay" style="display:none">

example/three/sandbox/index.html

@@ -15,7 +15,6 @@
       <input type="text" id="uri" value="" onchange="XRF.navigator.to( $('#uri').value )" style="display:none"/> 
     </div>
 
-    <!-- open AFRAME inspector: $('a-scene').components.inspector.openInspector() -->
     <a class="btn-foot" id="source" target="_blank" href="https://github.com/coderofsalvation/xrfragment-helloworld">➕ clone project</a> 
     <a class="btn-foot" id="embed" target="_blank" onclick="embed()">🔗 share</a> 
     <a class="btn-foot" id="model" target="_blank" href="index.gltf">⬇️  scene</a> 
@@ -23,7 +22,6 @@
 		<textarea style="display:none"></textarea>
     <canvas id="qrcode" style="display:none" width="300" height="300"></canvas>
 		
-		<script async src="./../../assets/js/alpine.min.js"></script>
 		<!-- Import maps polyfill -->
 		<!-- Remove this when import maps will be widely supported -->
 		<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
@@ -39,9 +37,9 @@
 		<script type="module">
 			import * as THREE from 'three';
 
-			import xrf from './../../../dist/xrfragment.three.module.js';
+			import xrf from "./../../../dist/xrfragment.three.module.js";
 
-			import { loadFile, setupConsole, setupUrlBar, notify } from './../../assets/js/utils.js';
+			import { loadFile, setupConsole, setupUrlBar, notify } from "./../../assets/js/utils.js";
 			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 			import { Lensflare, LensflareElement } from 'three/addons/objects/Lensflare.js';
 			import { BoxLineGeometry } from 'three/addons/geometries/BoxLineGeometry.js';
@@ -103,7 +101,6 @@
           camera:cameraRig,
           scene,
           renderer,
-          debug: true,
           loaders: { gltf: GLTFLoader, fbx: FBXLoader }, // which 3D assets (extensions) to check for XR fragments?
         })
 
@@ -181,23 +178,6 @@
         setupConsole()
         setupUrlBar( $('input#uri'), XRF )
 
-				// GUI
-
-				function onChange() {
-						renderer.toneMappingExposure = parameters.env;
-				}
-
-				const gui = new GUI( { width: 300 } );
-				gui.add( parameters, 'env', 0.2, 3.0, 0.1 ).onChange( onChange );
-
-				const mesh = new HTMLMesh( gui.domElement );
-				mesh.position.x = - 0.75;
-				mesh.position.y = 1.5;
-				mesh.position.z = 0.3;
-				mesh.rotation.y = Math.PI / 4;
-				mesh.scale.setScalar( 2 );
-
-
 				// Add stats.js
 				stats = new Stats();
 				stats.dom.style.width = '80px';

make

@@ -66,6 +66,7 @@ build(){
     # add js module
     cat dist/xrfragment.js            >> dist/xrfragment.module.js
     echo "export default xrfragment;" >> dist/xrfragment.module.js
+
     # add THREE 
     cat dist/xrfragment.js                  \
         src/3rd/js/*.js                     \
@@ -75,16 +76,29 @@ build(){
         src/3rd/js/three/util/*.js          \
         src/3rd/js/three/xrf/dynamic/*.js   \
         src/3rd/js/three/xrf/src/*.js    > dist/xrfragment.three.js
+
     # add THREE module
     cat dist/xrfragment.three.js        > dist/xrfragment.three.module.js
     echo "export default xrf;"  >> dist/xrfragment.three.module.js
+
     # add AFRAME 
     cat dist/xrfragment.three.js \
-        src/3rd/js/aframe/*.js          > dist/xrfragment.aframe.js
+        dist/utils.js            \
+        src/3rd/js/aframe/*.js   \
+        example/assets/js/qr.js  > dist/xrfragment.aframe.js
     # convert ESM to normal browser js
     sed 's/export //g' example/assets/js/utils.js > dist/utils.js
+    
+    # fat all-in-one standalone xrf release
+    test -f /tmp/xrf-aframe.js || {
+      wget "https://aframe.io/releases/1.5.0/aframe.min.js" -O /tmp/xrf-aframe.js
+      wget "https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js" -O /tmp/xrf-blink.js
+      for i in /tmp/xrf-*.js; do echo -e "\n" >> $i; done # add extra linebreak to prevent bundle issues
+    }
+    cat /tmp/xrf-*.js dist/xrfragment.aframe.js dist/utils.js  > dist/xrfragment.aframe.all.js
+    
     # add license headers
-    for file in dist/xrfragment.{aframe,module,three,three.module}.js; do
+    for file in dist/xrfragment.{aframe,module,three,three.module,all}.js; do
       awk 'BEGIN{ 
         print "/*"
         print " * generated at $(date)"
@@ -95,6 +109,8 @@ build(){
       }' > /tmp/tmp.js 
       mv /tmp/tmp.js $file
     done
+
+
     ls -la dist | grep js 
     return $ok
   }
@@ -103,5 +119,35 @@ build(){
   test -z $1 || "$@"
 }
 
+repos(){
+  release_dir(){
+    slug=xrfragment-$1-helloworld
+    test -d ../$slug || git clone git@github.com:coderofsalvation/$slug.git ../$slug
+    pushd $(pwd)
+    cp example/assets/index.glb ../$2/index.glb
+    cat example/$1/sandbox/index.html | \
+      sed 's|href=".*/assets|href="https://xrfragment.org/example/assets|g'                            | \
+      sed 's|"\./.*/dist|"https://xrfragment.org/dist|g'                                               | \
+      sed 's|"\./.*/assets|"https://xrfragment.org/example/assets|g' \
+      > ../$2/index.html
+    test -z $COMMIT || {
+      set -x; cd ../$slug ; set +x
+      git add index.html
+      git commit -m "update index.html to commit $(git log | awk '{ print $1; exit 0; }') from xrfragment-repo"
+      git push origin main
+      popd
+    }
+    echo " "
+  }
+
+  release_dir aframe xrfragment-aframe-helloworld aframe
+  release_dir three  xrfragment-three-helloworld three.module
+  release_dir aframe xrfragment-helloworld aframe.all
+
+  # remove aframe reference
+  sed -i 's|<script src="https:\/\/aframe.*||g' ../xrfragment-helloworld/index.html
+  sed -i 's|<script src=".*blink-controls.*||g' ../xrfragment-helloworld/index.html
+}
+
 test -z $1 && build 
 test -z $1 || "$@"

src/3rd/js/three/index.js

@@ -3,6 +3,7 @@ xrf.model  = {}
 xrf.mixers = []
 
 xrf.init = ((init) => function(opts){
+  console.log("add #debug to URL to see XR Fragment debuglog")
   let scene = new opts.THREE.Group()
   opts.scene.add(scene)
   opts.scene = scene

src/3rd/js/three/xrf/src/non-euclidian.js

@@ -11,9 +11,9 @@ xrf.portalNonEuclidian = function(opts){
     stencilRef: xrf.portalNonEuclidian.stencilRef,
     needUpdate: false,
     stencilObject: false,
-    cameraDirection: new THREE.Vector3(),
+    cameraDirection: new xrf.THREE.Vector3(),
-    cameraPosition: new THREE.Vector3(),
+    cameraPosition: new xrf.THREE.Vector3(),
-    raycaster: new THREE.Raycaster(),
+    raycaster: new xrf.THREE.Raycaster(),
     isLocal: opts.isLocal,
     isLens: false,
     isInside: false,

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

@@ -74,7 +74,7 @@ xrf.addEventListener('parseModel', (opts) => {
     mixer.actions.map( (action) => { 
       if( mixer.loop.timeStart != undefined ){
         action.time = mixer.loop.timeStart
-        action.setLoop( THREE.LoopOnce, )
+        action.setLoop( xrf.THREE.LoopOnce, )
         action.timeScale = mixer.timeScale
         action.enabled = true
         if( t.x != 0 ){