94 lines
1.8 KiB
HTML
94 lines
1.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
body{
|
||
|
|
background: #555;
|
||
|
|
height: 100%;
|
||
|
|
margin: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 0;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
img#btn_play:hover {
|
||
|
|
opacity: 1.0;
|
||
|
|
}
|
||
|
|
img#btn_play {
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
width:30%;
|
||
|
|
max-width:400px;
|
||
|
|
transform: translate(-50%,-50%);
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: 0.6;
|
||
|
|
transition: 0.3s;
|
||
|
|
z-index: 999;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<img id="btn_play" src="play.svg"/>
|
||
|
|
|
||
|
|
<a-scene>
|
||
|
|
<a-entity id="player" animation-mixer_disabled gltf-model></a-entity>
|
||
|
|
</a-scene>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
import * as xrforge from './plugin.xrforge.js';
|
||
|
|
import * as level0 from './xrf.level0.js';
|
||
|
|
|
||
|
|
const widget = new Proxy({
|
||
|
|
|
||
|
|
backend: null,
|
||
|
|
player: document.querySelector("#player"),
|
||
|
|
src: document.location.search.substr(1),
|
||
|
|
ext: {},
|
||
|
|
|
||
|
|
init(opts){
|
||
|
|
for( var i in opts) this[i] = opts[i]
|
||
|
|
},
|
||
|
|
|
||
|
|
play(){
|
||
|
|
// set URL
|
||
|
|
player.setAttribute("gltf-model", `url(${widget.src})` )
|
||
|
|
|
||
|
|
document.querySelector("#btn_play").style.display = 'none'
|
||
|
|
|
||
|
|
let script = document.createElement("script")
|
||
|
|
script.src = "https://aframe.io/releases/1.7.0/aframe.min.js"
|
||
|
|
document.head.appendChild(script)
|
||
|
|
|
||
|
|
script = document.createElement("script")
|
||
|
|
script.src = "backend.xrforge.js"
|
||
|
|
document.head.appendChild(script)
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
get(me,k){ return me[k] },
|
||
|
|
|
||
|
|
set(me,k,v){
|
||
|
|
me[k] = v
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
xrforge.init(widget)
|
||
|
|
level0.init(widget)
|
||
|
|
|
||
|
|
document.querySelector("#btn_play").addEventListener("click", () => widget.play() )
|
||
|
|
|
||
|
|
//document.body.style.background = `url(${src.replace( /\.(glb|usdz|gltf|obj|col)$/ , ".png")})`
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|