41 lines
1.4 KiB
HTML
41 lines
1.4 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>Augmented Reality</title>
|
|
|
|
<script type="module" src="/src/debug-posit.ts"></script>
|
|
|
|
<script>
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body style="text-align: center; font-family: monospace;">
|
|
|
|
<video id="video" width=320 height=240 autoplay="true" style="display:none;"></video>
|
|
|
|
<div style="margin: 10px;"><strong>-= Augmented Reality =-</strong></div>
|
|
<div style="width: 100%;">
|
|
<div style="width: 650px; margin-left:auto; margin-right:auto;">
|
|
<canvas id="canvas" style="width: 320px; height: 240px; float: left; border: solid 1px black;"></canvas>
|
|
<div id="container" style="width: 320px; height: 240px; float: left; border: solid 1px black; background: green;">
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
<div style="float: left; border: solid 1px black;">
|
|
<div id="container1" style="width: 320px; height: 240px; background: red;"></div>
|
|
<div id="pose1"></div>
|
|
</div>
|
|
<div style="float: left; border: solid 1px black;">
|
|
<div id="container2" style="width: 320px; height: 240px; background: blue;"></div>
|
|
<div id="pose2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="clear: both;"></div>
|
|
<div style="margin: 15px;"><strong>Powered by <a href="http://code.google.com/p/js-aruco/">js-aruco</a> and <a
|
|
href="https://github.com/mrdoob/three.js">Three.js</a></strong></div>
|
|
|
|
</body>
|
|
|
|
</html> |