117 lines
4.2 KiB
HTML
117 lines
4.2 KiB
HTML
|
<html>
|
||
|
<head>
|
||
|
<link rel="stylesheet" href="https://unpkg.com/axist@latest/dist/axist.min.css" />
|
||
|
</head>
|
||
|
<body>
|
||
|
<script src="./../dist/xrfragment.js"></script>
|
||
|
<script>
|
||
|
var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}
|
||
|
|
||
|
DOMReady(function () {
|
||
|
|
||
|
let XRF = xrfragment;
|
||
|
let $ = (e) => document.querySelector(e)
|
||
|
|
||
|
log = (str) => {
|
||
|
$("#console").innerHTML = JSON.stringify(str, null, 2)
|
||
|
$("#console").style.border = "10px solid #"+ ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0")+"66";
|
||
|
}
|
||
|
|
||
|
let update = () => {
|
||
|
let result = {}
|
||
|
XRF.Parser.parse( $('#fragment').value, $('#value').value, result );
|
||
|
log(result)
|
||
|
}
|
||
|
|
||
|
$("#fragment").addEventListener("change", (e) => {
|
||
|
let opt = e.target.options[ e.target.selectedIndex ]
|
||
|
$('#value').value = opt.getAttribute("x")
|
||
|
update()
|
||
|
})
|
||
|
|
||
|
$('#value').addEventListener("change", update )
|
||
|
$('#value').addEventListener("keyup", update )
|
||
|
|
||
|
addEventListener("hashchange", (e) => log( XRF.URI.parse( document.location.href, true ) ) );
|
||
|
|
||
|
if( document.location.hash.length < 2 ) document.location.hash = "#t=1,100"
|
||
|
|
||
|
})
|
||
|
|
||
|
</script>
|
||
|
<section id="forms">
|
||
|
<a class="title-link" href="#forms"><h3 class="title">XR Fragments</h3></a>
|
||
|
<form>
|
||
|
<fieldset>
|
||
|
<p>
|
||
|
<table>
|
||
|
<tr>
|
||
|
<td width="200">
|
||
|
<label for="fragment">Property in 3D file</label>
|
||
|
<br><br>
|
||
|
<select id="fragment" class="w-100">
|
||
|
<optgroup label="asset loading / linking">
|
||
|
<option x="1">prio</option>
|
||
|
<option x="pos=0,0,1&fov=2">#</option>
|
||
|
<option x="foo">class</option>
|
||
|
<option x="./2.gtlf">src</option>
|
||
|
</optgroup>
|
||
|
<optgroup label="href navigation / portals / teleporting">
|
||
|
<option x="1,2,0">pos</option>
|
||
|
<option x="3.gltf#q=.kitchen">href</option>
|
||
|
</optgroup>
|
||
|
<optgroup label="query selector / object manipulation">
|
||
|
<option x=".summer -.winter cube" selected="selected" default>q</option>
|
||
|
<option x="2" >scale</option>
|
||
|
<option x="1,2,3">rot</option>
|
||
|
<option x="1,1,1">translate</option>
|
||
|
<option x="1">visible</option>
|
||
|
</optgroup>
|
||
|
<optgroup label="animation">
|
||
|
<option x="1,200">t</option>
|
||
|
<option x="0,-9.8,0">gravity</option>
|
||
|
<option x="0.2,1">physics</option>
|
||
|
<option x=#scroll=1,0|2s">scroll</option>
|
||
|
</optgroup>
|
||
|
<optgroup label="device / viewport settings">
|
||
|
<option x="90">fov</option>
|
||
|
<option x="1,100">clip</option>
|
||
|
<option x="5m|FFAACC">fog</option>
|
||
|
</optgroup>
|
||
|
<optgroup label="author / metadata">
|
||
|
<option x="XXX">namespace</option>
|
||
|
<option x="GPL-3.0-or-later">SPFX</option>
|
||
|
<option x="1m">unit</option>
|
||
|
<option x="this is an example scene">description</option>
|
||
|
</optgroup>
|
||
|
<optgroup label="multiparty">
|
||
|
<option x="matrix://matrix.org/#myroom&room.key=123">src_session</option>
|
||
|
</optgroup>
|
||
|
</select>
|
||
|
</td>
|
||
|
<td style="text-align:left">
|
||
|
<label for="value">Value</label>
|
||
|
<br><br>
|
||
|
<input id="value" class="w-100" type="text" value=".summer -.winter cube" placeholder="" >
|
||
|
</td>
|
||
|
</tr>
|
||
|
<tr>
|
||
|
<td colspan="2" style="border=bottom:none;color:#666">
|
||
|
<br><br>
|
||
|
ps1. you can test BROWSER_OVERRIDE-enabled fragments (<i>#t=1,200</i> or <i>#fog=2m|FFAABB</i> e.g.) by updating the url<br><br>
|
||
|
ps2. see <a href="https://hackmd.io/r-w6JaRgR8OJkbaHiQ8pmQ?view#Asset-linking-fragments" target="_blank">the documentation here</a>
|
||
|
</td>
|
||
|
</tr>
|
||
|
</table>
|
||
|
</p>
|
||
|
<p>
|
||
|
<label for="console">parser output:</label>
|
||
|
<br><br>
|
||
|
<textarea id="console" style="width:100%;height:50vh;" placeholder="" class="w-100"></textarea>
|
||
|
</p>
|
||
|
</fieldset>
|
||
|
</form>
|
||
|
</section>
|
||
|
</body>
|
||
|
</html>
|