Orthoverse∅のコンテンツの作り方
Orthoverse∅のコンテンツ作成の方法を説明します。
基本
マークアップテキストを書いてWebでアクセスできるように公開するだけです。
とりあえず手っ取り早い方法として、GithubPagesがお勧めです。
もちろん、自分でWebサーバーをたててもよいでしょう。
書いたテキストがそのまま公開されるようにしてください。
広告のタグ挿入や、その他のヘッダーなどが勝手に追加されるものでは動作しない可能性が高いです。
例
以下のリポジトリで試験用のコンテンツを公開しています。
https://github.com/oho-sugu/ovtestpages
参考情報
タグはMozillaのA-Frameを参考にしています。
使えるタグ・機能
Cubeを出す
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hello World</title>
<meta name='description' content='Hello World'>
</head>
<body>
<a-scene>
<a-box color='white' depth='1' height='1' width='1'>
</a-scene>
</body>
DOCTYPEとか見てないのでなんでもいいんですが、htmlに一応擬態します。
うまくやればA-Frameと互換性のある仕組みができそうなので、今後の課題です。
HTMLと同じタグは適当。パーサーでは読み飛ばしています。
重要なのは、<a-scene>と<a-box>で、
<a-scene>で囲まれた領域が3Dコンテンツで解釈されレンダリング・実行されます。
<a-box>の属性で、サイズや色を指定しています。
これで、原点に1m四方の白いキューブが表示されます。
座標系は？
現在のOrthoverse∅のコンテンツから見える座標系は、コンテンツを配置した空間IDの矩形の中心点の地表が原点0となります。
単位はmになるので、ここで指定した大きさがそのまま現実空間に重畳されます。
位置
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Hello World</title>
<meta name='description' content='Hello World'>
</head>
<body>
<a-scene>
<a-box color='white' depth='10' height='10' width='10' position='0 20 0'>
</a-scene>
</body>
position属性で位置を指定します。
上の例では10m四方の大きなキューブが20m上空に重畳されます。
アニメーション
<a-box position=' 0 0 0' animation='property: object3D.position.z; to: 2; dur: 3000; loop: true; easing: easeinsine;' color='white' depth='0.2' height='0.2' width='0.2'></a-box>
こんな感じでアニメーションを属性で設定することもできます。
Z軸に初期位置から＋2mまで、3000msで移動、ループする、サインカーブでイージング、などの設定が可能です。
上記のURLの例のファイルには対応しているイージングパターンを網羅して挙げてあります。
画像を貼り付け
<a-scene>
<a-assets>
<img id="test" src="https://3.bp.blogspot.com/-Qgaed374Dcs/VtlMwoqu74I/AAAAAAAA4VU/JNzq8TSeQ-4/s800/ar_kakuchou_genjitsu.png">
</a-assets>
<a-entity geometry="primitive: plane" material="src: #test" rotation="0 180 0"></a-entity>
</a-scene>
<a-assets>タグを使って、外部リソースを参照することができます。
試しにいらすとやさんのARの画像を板ポリに貼ってみています。
id属性を参照のために使います。
モデルの読み込み
<a-scene>
<a-assets>
<a-asset-item id="gltf" src="https://aframe.io/aframe/examples/assets/models/tree1.glb">
</a-assets>
<a-entity gltf-model="obj: #gltf"></a-entity>
</a-scene>
3Dモデルを読み込むこともできます。対応しているのは、gltf/glb、VRM、obj（テクスチャなし）などです。
スクリプティング
<script type='text/lua'>
i = 0;
function start()
return
end
function update()
i=i+1
document:GetEntityByID('test'):GetComponentBase('rotation'):Set('x',''..i)
return
end
</script>
</head>
<body>
<a-scene scale="0.1 0.1 0.1">
<a-box id='test' color='blue' depth='1' height='1' width='1' position='1 1 1' rotation='30 0 30' scale='1.5 1.5 1.5'>
</a-scene>
</body>
スクリプトも動きます。現在は位置や回転をスクリプトから操作できます。
おわりに
一部でA-Frameとの互換性が取れていなかったり奇妙な動作があったりと、
まだ開発途中な状況ですが、今後より使えるものになるようにしていきます。