mirror of https://github.com/bjornbytes/lovr.git
109 lines
2.9 KiB
HTML
109 lines
2.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'sans-serif';
|
|
}
|
|
|
|
#canvas {
|
|
display: block;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
max-width: 1080px;
|
|
width: 80%;
|
|
height: auto;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
|
|
margin: 40px auto;
|
|
outline: none;
|
|
}
|
|
|
|
button {
|
|
display: block;
|
|
margin: 0 auto;
|
|
font-size: 18px;
|
|
border-radius: 4px;
|
|
padding: 8px 16px;
|
|
}
|
|
</style>
|
|
|
|
<meta charset="utf-8"/>
|
|
<title>LÖVR</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<canvas id="canvas" width="1080" height="600" tabIndex="1"></canvas>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var container = document.querySelector('.container');
|
|
var canvas = document.getElementById('canvas');
|
|
var button = document.createElement('button');
|
|
button.textContent = 'Enter VR';
|
|
|
|
var Module = window.Module = {
|
|
arguments: [],
|
|
preRun: [],
|
|
postRun: [],
|
|
print: console.log.bind(console),
|
|
printErr: console.error.bind(console),
|
|
thisProgram: './lovr',
|
|
canvas: canvas
|
|
};
|
|
|
|
// To run a LÖVR project on this page, create a .lovr (zip) file of its folder and serve it
|
|
// alongside the HTML file. Then set the 'project' variable below to the project's filename.
|
|
// This downloads the .lovr file into the virtual filesystem and adds it as a virtual command
|
|
// line argument before booting up LÖVR.
|
|
// Example: var project = 'app.lovr';
|
|
var project = null;
|
|
if (project) {
|
|
Module.arguments.push(project);
|
|
Module.preRun.push(function() {
|
|
Module.FS_createPreloadedFile('/', project, project, true, false);
|
|
});
|
|
}
|
|
|
|
// If WebXR is supported and immersive sessions are supported, add a button to the DOM that
|
|
// controls starting/stopping the immersive session.
|
|
if (navigator.xr) {
|
|
navigator.xr.isSessionSupported('immersive-vr').then(function(supported) {
|
|
if (!supported) return;
|
|
|
|
container.appendChild(button);
|
|
|
|
var active = false;
|
|
|
|
function onEnter() {
|
|
active = true;
|
|
button.textContent = 'Exit VR';
|
|
}
|
|
|
|
function onExit() {
|
|
active = false;
|
|
button.textContent = 'Enter VR';
|
|
}
|
|
|
|
button.addEventListener('click', function() {
|
|
if (!active) {
|
|
Module.lovr.enterVR().then(function(session) {
|
|
session.addEventListener('end', onExit);
|
|
onEnter();
|
|
});
|
|
} else {
|
|
Module.lovr.exitVR().then(onExit);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
|
|
{{{ SCRIPT }}}
|
|
</body>
|
|
</html>
|