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="main.css">
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="./../../assets/style.css"/>
|
|
|
|
|
<script async src="./../../assets/alpine.min.js"></script>
|
|
|
|
|
<script src="https://aframe.io/releases/1.4.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-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>
|
|
|
|
|
<a id="source" target="_blank" href="https://github.com/coderofsalvation/xrfragment/blob/main/example/aframe/sandbox/index.html">sourcecode</a>
|
|
|
|
|
<a id="model" target="_blank" href="">⬇️ model</a>
|
|
|
|
|
<textarea style="display:none"></textarea>
|
|
|
|
|
<a-scene>
|
2023-05-10 19:12:15 +02:00
|
|
|
<a-entity id="model" xrf gltf-model="./../../assets/example3.gltf" />
|
|
|
|
|
<a-entity id="floor" gltf-to-entity="from: #model; name: floor" />
|
|
|
|
|
|
|
|
|
|
<a-entity xrf id="player">
|
|
|
|
|
<a-entity camera position="0 1.6 15" look-controls wasd-controls></a-entity>
|
|
|
|
|
<a-entity id="left-hand" oculus-touch-controls="hand: left" blink-controls="cameraRig:#player; teleportOrigin: #camera; collisionEntities: #floor"></a-entity>
|
|
|
|
|
<a-entity id="right-hand" 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-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 )
|
|
|
|
|
$('[gltf-model]').setAttribute('gltf-model', document.location.search.substr(1) )
|
|
|
|
|
|
|
|
|
|
$('a-scene').addEventListener('loaded', () => {
|
|
|
|
|
setupConsole( $('textarea') )
|
|
|
|
|
|
|
|
|
|
// init navigator url
|
|
|
|
|
document.location.hash = $('#uri').value
|
|
|
|
|
window.addEventListener('hashchange', () => {
|
|
|
|
|
window.AFRAME.XRF.eval( $('#uri').value = document.location.hash )
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
