<div>Position x = <span id='position-x'></span></div>
<div>Position y = <span id='position-y'></span></div>
<div>Position z = <span id='position-z'></span></div>
<script>

// check webvr is available
if (navigator.getVRDisplays) {
	// Do nothing
} else if (navigator.getVRDevices) {
	alert("Your browser supports WebVR but not the latest version. See <a href='http://webvr.info'>webvr.info</a> for more info.");
} else {
	alert("Your browser does not support WebVR. See <a href='http://webvr.info'>webvr.info</a> for assistance.");
}


var vrDisplay = null
var frameData = new VRFrameData();


// get vrDisplay
navigator.getVRDisplays().then(function (vrDisplays) {
	if( vrDisplays.length === 0 )	alert('no vrDisplays available')
	vrDisplay = vrDisplays[0]
	console.log('vrDisplays.displayName :', vrDisplay.displayName)

	var canvasElement = document.createElement('canvas')
	document.body.appendChild(canvasElement)

	vrDisplay.requestPresent([{ source: canvasElement }]).then(function() {
		console.log('vrdisplay request accepted')
	});
});

// loop and display webvr position
requestAnimationFrame(function callback(){
	requestAnimationFrame(callback)
	
	// check vrDisplay is already initialized
	if( vrDisplay === null )	return

	// read frameData
	vrDisplay.getFrameData(frameData);
	
	// display frameData.pose.position
	document.querySelector('#position-x').innerHTML = frameData.pose.position[0].toFixed(4)
	document.querySelector('#position-y').innerHTML = frameData.pose.position[1].toFixed(4)
	document.querySelector('#position-z').innerHTML = frameData.pose.position[2].toFixed(4)
})
</script>