2023-05-09 17:42:29 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<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/axist.min.css" />
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="./../../assets/style.css"/>
|
2023-05-12 22:06:21 +02:00
|
|
|
<script async src="./../../assets/alpine.min.js" defer></script>
|
|
|
|
|
<script src="https://aframe.io/releases/1.4.2/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-09 17:42:29 +02:00
|
|
|
<script src="./../../../dist/xrfragment.aframe.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-05-10 19:12:15 +02:00
|
|
|
<div id="overlay" x-data="{ urls: ['#pos=0,1.6,15&rot=0,360,0'] }">
|
2023-05-09 17:42:29 +02:00
|
|
|
<img src="./../../assets/logo.png" class="logo"/>
|
|
|
|
|
<input type="submit" value="load 3D asset"></input>
|
2023-05-10 19:12:15 +02:00
|
|
|
<input type="text" id="uri" list="urls" value="#pos=0,1.6,15&rot=0,360,0" x-on:change="document.location.hash = $('#uri').value"/>
|
2023-05-09 17:42:29 +02:00
|
|
|
<datalist id="urls" >
|
|
|
|
|
<template x-for="url in urls">
|
|
|
|
|
<option x-bind:value="url" selected></option>
|
|
|
|
|
</template>
|
|
|
|
|
</datalist>
|
|
|
|
|
</div>
|
2023-05-17 21:31:28 +02:00
|
|
|
<a class="btn-foot" id="source" target="_blank" href="https://github.com/coderofsalvation/xrfragment/blob/main/example/aframe/sandbox/index.html">sourcecode</a>
|
|
|
|
|
<a class="btn-foot" id="model" target="_blank" href="">⬇️ model</a>
|
2023-05-09 17:42:29 +02:00
|
|
|
<textarea style="display:none"></textarea>
|
2023-05-12 22:06:21 +02:00
|
|
|
<a-scene light="defaultLightsEnabled: false">
|
|
|
|
|
<a-entity xrf id="player" >
|
|
|
|
|
<a-entity camera position="0 1.6 15" wasd-controls id="camera"></a-entity>
|
|
|
|
|
<a-entity id="left-hand" laser-controls="hand: left" raycaster="objects:.collidable;far:5500" oculus-touch-controls="hand: left" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: #floor"></a-entity>
|
|
|
|
|
<a-entity id="right-hand" laser-controls="hand: right" raycaster="objects:.collidable;far:5500" oculus-touch-controls="hand: right" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: #floor"></a-entity>
|
2023-05-09 17:42:29 +02:00
|
|
|
</a-entity>
|
2023-05-17 21:31:28 +02:00
|
|
|
<a-entity id="home" xrf="example3.gltf#pos=1,2,3"></a-entity>
|
2023-05-12 22:06:21 +02:00
|
|
|
<a-entity id="floor" xrf-get="floor"></a-entity>
|
2023-05-10 19:12:15 +02:00
|
|
|
|
2023-05-09 17:42:29 +02:00
|
|
|
</a-scene>
|
|
|
|
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
import { loadFile, setupConsole } from './../../assets/utils.js';
|
|
|
|
|
window.$ = (s) => document.querySelector(s)
|
|
|
|
|
|
|
|
|
|
if( document.location.search.length > 2 )
|
2023-05-12 22:06:21 +02:00
|
|
|
$('#home').setAttribute('xrf', document.location.search.substr(1) )
|
2023-05-09 17:42:29 +02:00
|
|
|
|
|
|
|
|
$('a-scene').addEventListener('loaded', () => {
|
|
|
|
|
setupConsole( $('textarea') )
|
|
|
|
|
|
2023-05-18 12:32:57 +02:00
|
|
|
let nav = window.AFRAME.XRF.navigator
|
|
|
|
|
nav.to = ((to) => (url,e) => {
|
|
|
|
|
to(url,e)
|
|
|
|
|
reflectUrl()
|
|
|
|
|
})(nav.to)
|
|
|
|
|
|
|
|
|
|
const reflectUrl = () => $('#uri').value = document.location.search.substr(1) + document.location.hash
|
|
|
|
|
reflectUrl()
|
2023-05-12 22:06:21 +02:00
|
|
|
// update url when sandbox-url is updated
|
2023-05-18 12:32:57 +02:00
|
|
|
//window.addEventListener('hashchange', () => {
|
|
|
|
|
// window.AFRAME.XRF.eval( $('#uri').value = document.location.hash )
|
|
|
|
|
//})
|
2023-05-17 21:31:28 +02:00
|
|
|
//if( document.location.hash.length < 2 ) document.location.hash = $('#uri').value
|
2023-05-12 22:06:21 +02:00
|
|
|
|
|
|
|
|
// add look-controls at last (otherwise it'll be buggy after scene-updates)
|
|
|
|
|
$('[camera]').setAttribute("look-controls","")
|
|
|
|
|
// add screenshot component with camera to capture proper equirects
|
|
|
|
|
$('a-scene').setAttribute("screenshot",{camera: "[camera]",width: 4096*2, height:2048*2})
|
|
|
|
|
|
2023-05-09 17:42:29 +02:00
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
