GitBucket
Newer
KAOKA Daisuke
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style media='screen'>
body {
background-color: #000;
color: grey;
}
.marker-image {
width: auto;
height:40%;
pointer-events: none;
}
@media screen and (orientation:portrait) {
.marker-image {
width:40%;
height: auto;
}
}
.marker-center {
position: absolute;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
.marker-topleft {
position: absolute;
top: 0;
left: 0;
}
.marker-topright {
position: absolute;
top: 0;
right: 0;
}
.marker-bottomleft {
position: absolute;
bottom: 0;
left: 0;
}
.marker-bottomright{
position: absolute;
bottom: 0;
right: 0;
}
.markers-artoolkit {
display : none;
}
.trackingBackend-artoolkit .markers-artoolkit {
background-color: #444;
display : block;
}
.trackingBackend-artoolkit {
display : none;
}
</style>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
<div style='position: absolute; top: 10px; width:100%; text-align: center;';>
<a href='https://github.com/jeromeetienne/AR.js/' target='_blank'>AR.js</a> - Multi marker marker page
by <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
<div style='position: absolute; bottom: 10px; width:100%; text-align: center;';>
Tracking : <span id='currentTracking'></span>
- set
<a href='javascript:void(0)' onclick='setTrackingBackend("artoolkit")'>artoolkit</a> /
</div>
<div class='markers-artoolkit'>
<img class='marker-center marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-hiro.png'>
<img class='marker-topleft marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterA.png'>
<img class='marker-topright marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterB.png'>
<img class='marker-bottomleft marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterC.png'>
<img class='marker-bottomright marker-image' src='../../../../three.js/examples/marker-training/examples/pattern-images/pattern-letterF.png'>
</div>
<script>
// honor trackingBackend
var trackingBackend = location.hash.substring(1) || 'artoolkit'
setTrackingBackend(trackingBackend)
function setTrackingBackend(trackingBackend){
document.body.classList.remove('trackingBackend-artoolkit')
document.querySelector('#currentTracking').innerHTML = trackingBackend
if( trackingBackend === 'artoolkit' ){
document.body.classList.add('trackingBackend-artoolkit')
}else console.assert(false)
}
</script>
</body>