はじめに
AR.jsでHTMLを表示する方法について書きました。
やりたいこと
HTMLで書いた内容をAR.jsでARとして表示したい。
完成図
実装
どうやって表示するか
まず、HTMLの内容をどうやって表示するかですが、これにはHTML Shaderという、DOM要素をマテリアルとしてA-Frameのオブジェクト上に貼り付けることができるコンポーネントを使います。
まず、head内で必要なコンポーネントを読み込みます。HTML Shaderにはhtml2canvasが必要らしいので、それも読み込みます。
index.html
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
<script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
次に、a-scene要素の前に表示したい内容をHTMLで書きます。ここでは単純にtestと書いてあるだけですが、当然日本語や画像も入れることができます。
index.html
<div id="test">
<h3>test</h3>
</div>
次に、HTMLを貼り付けるオブジェクトを用意します。material="shader:html;target: #test;"と指定することで先程のdiv要素をマテリアルとして貼り付けています。
index.html
<a-plane width="1" height="1" rotation="-90 0 0" material="shader:html; target: #test"></a-plane>
これで良さそうですが、このままではdiv要素がAR画面の上に来てしまうのでCSSでz-indexを指定して裏に隠します。
style.css
#test {
height: 200px;
width: 200px;
z-index: -50;
background-color: #FFF;
}
ここで問題があり、HTML Shaderの特性上このままでは全体的にぼやけてしまいます。そこで、もとのHTML要素を大きめにすることではっきり見えるようにします。
style.css
#test {
height: 1000px;
width: 1000px;
z-index: -50;
background-color: #FFF;
font-size: 500%;
}
完成したHTMLはこちらです。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
<script src="https://unpkg.com/aframe-html-shader@0.2.0/dist/aframe-html-shader.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<div id="test">
<h3>test</h3>
</div>
<a-scene embedded arjs='debugUIEnabled:false;' vr-mode-ui="enabled: false">
<a-marker preset="hiro">
<a-plane width="1" height="1" rotation="-90 0 0" material="shader:html; target: #test"></a-plane>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
マーカー
