2023-05-09 17:42:29 +02:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
2023-05-22 18:58:05 +02:00
|
|
|
|
<head>
|
|
|
|
|
|
<title>AFRAME - xrfragment sandbox</title>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
2023-05-22 14:10:44 +02:00
|
|
|
|
<link rel="stylesheet" href="./../../assets/css/axist.min.css" />
|
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="./../../assets/css/style.css"/>
|
2023-05-22 18:58:05 +02:00
|
|
|
|
<script async src="./../../assets/js/alpine.min.js" defer></script>
|
2023-11-16 14:50:57 +01:00
|
|
|
|
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
|
2023-05-10 19:12:15 +02:00
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/aframe-blink-controls/dist/aframe-blink-controls.min.js"></script>
|
2023-05-22 18:58:05 +02:00
|
|
|
|
<script src="./../../../dist/xrfragment.aframe.js"></script>
|
2023-10-13 11:45:17 +02:00
|
|
|
|
<script src="./../../assets/js/qr.js"></script>
|
2023-10-15 13:35:54 +02:00
|
|
|
|
<script src="./../../../dist/utils.js"></script>
|
2023-05-22 18:58:05 +02:00
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2023-10-12 17:04:46 +02:00
|
|
|
|
<div id="overlay" style="display:none">
|
2023-05-09 17:42:29 +02:00
|
|
|
|
<img src="./../../assets/logo.png" class="logo"/>
|
2023-05-23 12:05:00 +02:00
|
|
|
|
<button id="navback" onclick="history.back()"><</button>
|
|
|
|
|
|
<button id="navforward" onclick="history.forward()">></button>
|
2023-10-12 17:04:46 +02:00
|
|
|
|
<input type="submit" value="load 3D file"></input>
|
2023-10-15 13:35:54 +02:00
|
|
|
|
<input type="text" id="uri" value="" onchange="AFRAME.XRF.navigator.to( $('#uri').value )" style="display:none"/>
|
2023-05-09 17:42:29 +02:00
|
|
|
|
</div>
|
2023-10-12 17:04:46 +02:00
|
|
|
|
|
|
|
|
|
|
<!-- open AFRAME inspector: $('a-scene').components.inspector.openInspector() -->
|
2023-10-15 13:35:54 +02:00
|
|
|
|
<a class="btn-foot" id="source" target="_blank" href="https://github.com/coderofsalvation/xrfragment-helloworld">➕ host</a>
|
|
|
|
|
|
<a class="btn-foot" id="embed" target="_blank" onclick="window.embed()">🔗 share</a>
|
|
|
|
|
|
<a class="btn-foot" id="model" target="_blank" onclick="window.download()">⬇️ scene</a>
|
2023-10-12 17:04:46 +02:00
|
|
|
|
<a class="btn-foot" id="more" target="_blank">XRF</a>
|
2023-05-22 18:58:05 +02:00
|
|
|
|
<textarea style="display:none"></textarea>
|
2023-10-13 11:45:17 +02:00
|
|
|
|
<canvas id="qrcode" style="display:none" width="300" height="300"></canvas>
|
|
|
|
|
|
|
2023-11-08 18:28:18 +01:00
|
|
|
|
<a-scene renderer="colorManagement: true; highRefreshRate:true" light="defaultLightsEnabled: false">
|
2023-11-28 13:27:53 +01:00
|
|
|
|
<a-entity id="player">
|
|
|
|
|
|
<a-entity camera="fov:90" position="0 1.6 0" wasd-controls look-controls id="camera"></a-entity>
|
2023-11-29 19:39:31 +01:00
|
|
|
|
<a-entity id="left-hand" laser-controls="hand: left" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor">
|
2023-11-02 18:15:05 +01:00
|
|
|
|
<a-entity rotation="-35 0 0" position="0 0.1 0" id="navigator">
|
2023-05-22 18:58:05 +02:00
|
|
|
|
<a-entity id="back" xrf-button="label: <; width:0.05; action: history.back()" position="-0.025 0 0" class="ray"></a-entity>
|
|
|
|
|
|
<a-entity id="next" xrf-button="label: >; width:0.05; action: history.forward()" position=" 0.025 0 0" class="ray"></a-entity>
|
|
|
|
|
|
</a-entity>
|
|
|
|
|
|
</a-entity>
|
2023-11-29 19:39:31 +01:00
|
|
|
|
<a-entity id="right-hand" laser-controls="hand: right" raycaster="objects:.ray" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: .floor"></a-entity>
|
2023-05-22 18:58:05 +02:00
|
|
|
|
</a-entity>
|
|
|
|
|
|
|
2023-11-16 14:50:57 +01:00
|
|
|
|
<a-entity id="home" xrf="index.glb"></a-entity>
|
2023-05-09 17:42:29 +02:00
|
|
|
|
</a-scene>
|
|
|
|
|
|
|
2023-10-15 13:35:54 +02:00
|
|
|
|
<script>
|
2023-05-09 17:42:29 +02:00
|
|
|
|
window.$ = (s) => document.querySelector(s)
|
2023-05-22 18:58:05 +02:00
|
|
|
|
if( document.location.search.length > 2 )
|
|
|
|
|
|
$('#home').setAttribute('xrf', document.location.search.substr(1)+document.location.hash )
|
2023-11-01 19:15:12 +01:00
|
|
|
|
|
2023-05-09 17:42:29 +02:00
|
|
|
|
|
2023-09-15 19:43:11 +02:00
|
|
|
|
$('a-scene').addEventListener('XRF', () => {
|
2023-10-26 13:19:03 +02:00
|
|
|
|
window.notify = notify(window)
|
|
|
|
|
|
window.embed = embed
|
2023-11-01 19:15:12 +01:00
|
|
|
|
window.notify('loading '+document.location.search.substr(1))
|
|
|
|
|
|
|
2023-11-08 18:28:18 +01:00
|
|
|
|
// reroute console messages to snackbar notifications
|
2023-11-01 19:15:12 +01:00
|
|
|
|
console.log = ( (log) => function(str){
|
2023-11-08 18:28:18 +01:00
|
|
|
|
if( str.match(/URL:/) ) str += "<br><br>(use back-button to go back)"
|
2023-11-01 19:15:12 +01:00
|
|
|
|
if( String(str).match(/:.*#/) ) window.notify(str)
|
|
|
|
|
|
log(str)
|
|
|
|
|
|
})(console.log)
|
|
|
|
|
|
|
2023-06-02 12:00:21 +02:00
|
|
|
|
let XRF = window.AFRAME.XRF
|
2023-05-22 18:58:05 +02:00
|
|
|
|
setupConsole( $('textarea') )
|
2023-06-02 12:00:21 +02:00
|
|
|
|
setupUrlBar( $('input#uri'), XRF )
|
2023-06-02 09:42:52 +02:00
|
|
|
|
|
2023-11-08 18:28:18 +01:00
|
|
|
|
// on localhost enable debugging mode for developer convenience
|
|
|
|
|
|
let loc = document.location
|
|
|
|
|
|
if( loc.host.match(/^localhost/) ){
|
|
|
|
|
|
$('a-scene').setAttribute('stats')
|
|
|
|
|
|
XRF.debug = 1
|
|
|
|
|
|
}
|
2023-06-02 09:42:52 +02:00
|
|
|
|
|
|
|
|
|
|
// add screenshot component with camera to capture bigger size equirects
|
2023-09-21 13:05:30 +02:00
|
|
|
|
// document.querySelector('a-scene').components.screenshot.capture('perspective')
|
2023-05-12 22:06:21 +02:00
|
|
|
|
$('a-scene').setAttribute("screenshot",{camera: "[camera]",width: 4096*2, height:2048*2})
|
|
|
|
|
|
|
2023-05-23 14:45:55 +02:00
|
|
|
|
if( window.outerWidth > 800 )
|
|
|
|
|
|
setTimeout( () => window.notify("use WASD-keys and mouse-drag to move around",{timeout:false}),2000 )
|
2023-05-22 14:10:44 +02:00
|
|
|
|
|
|
|
|
|
|
window.AFRAME.XRF.addEventListener('href', (data) => data.selected ? window.notify(`href: ${data.xrf.string}`) : false )
|
|
|
|
|
|
|
2023-07-04 17:15:23 +02:00
|
|
|
|
// enable user-uploaded asset files
|
|
|
|
|
|
let fileLoaders = loadFile({
|
|
|
|
|
|
".gltf": (file) => file.arrayBuffer().then( (data) => xrf.navigator.to(file.name,null, (new xrf.loaders.gltf()), data) ),
|
|
|
|
|
|
".glb": (file) => file.arrayBuffer().then( (data) => xrf.navigator.to(file.name,null, (new xrf.loaders.gltf()), data) )
|
|
|
|
|
|
})
|
|
|
|
|
|
$("#overlay > input[type=submit]").addEventListener("click", fileLoaders )
|
|
|
|
|
|
|
2023-05-22 18:58:05 +02:00
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
2023-05-09 17:42:29 +02:00
|
|
|
|
</html>
|
