update documentation

example/assets/style.css

@@ -20,7 +20,7 @@
 }
 
 textarea, select, input[type="text"] {
-	background: linear-gradient( var(--lighter-gray), var(--gray) ) !important;
+	background: transparent; /* linear-gradient( var(--lighter-gray), var(--gray) ) !important; */
 }
 
 input[type="submit"] {
@@ -57,3 +57,15 @@ input[type="submit"] {
 	right: 9px;
 	top: 8px;
 }
+
+#overlay > input[type="text"]{
+    height: 29px;
+    font-size: 14px;
+    position: absolute;
+    left: 280px;
+    top: 9px;
+    padding: 5px;
+    width: 40%;
+    background: #f0f0f0;
+    border-color: #Ccc;
+}

example/assets/utils.js

@@ -19,3 +19,28 @@ export function loadFile(contentLoaders, multiple){
     input.click();
   }
 }
+
+export function setupConsole($console){
+  $console.style.position = 'absolute'
+  $console.style.display = 'block'
+  $console.style.zIndex   = 1000;
+  $console.style.background = "transparent !important"
+  $console.style.pointerEvents = 'none'
+  $console.style.top = '70px'
+  $console.style.padding = '5px 20px 25px 25px'
+  $console.style.left = $console.style.right = $console.style.bottom = 0;
+  $console.style.color = '#0008';
+  $console.style.fontSize = '12px';
+  $console.style.fontFamily = 'Courier'
+  $console.style.border = '0'
+  $console.innerHTML = "XRFRAGMENT CONSOLE OUTPUT:\n" 
+
+  console.log = ( (log) => function(){
+    let s = new Date().toISOString().substr(11).substr(0,8) + " " + ([...arguments]).join(" ").replace(/.*[0-9]: /,"")
+    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))
+}

example/threejs/basic/index.html

@@ -12,8 +12,16 @@
     <div id="overlay">
       <img src="./../../assets/logo.png" class="logo"/>
 			<input type="submit" value="load 3D asset"></input>
+			<input type="text" list="urls" value="./example/asset/example1.gltf"/>
+			<datalist id="urls" x-data="{ urls: ['./example/asset/example1.gltf'] }" >
+				 <template x-for="url in urls">
+						<option x-text="url"></option>
+				</template>
+			</datalist>
     </div>
+		<textarea style="display:none"></textarea>
 		
+		<script async src="./../../assets/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>
@@ -30,7 +38,7 @@
 			import * as THREE from 'three';
 
 			import xrfragment from './../../../dist/xrfragment.module.js';
-			import { loadFile }   from './../../assets/utils.js';
+			import { loadFile, setupConsole }   from './../../assets/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';
@@ -172,6 +180,8 @@
 				controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
 				scene.add( controllerGrip2 );
 
+        setupConsole( document.querySelector('textarea') )
+
 				// GUI
 
 				function onChange() {
@@ -212,7 +222,7 @@
 					".gltf": (file) => file.arrayBuffer().then( (data) => loader.parse( data, '', loadGLTF, console.error ) ),
 					".glb":  (file) => file.arrayBuffer().then( (data) => loader.parse( data, '', loadGLTF, console.error ) )
 				})
-				document.querySelector("#overlay > input").addEventListener("click", fileLoaders )
+				document.querySelector("#overlay > input[type=submit]").addEventListener("click", fileLoaders )
 
 			}