エイブリッジでは、AR、VRのアプリ開発を行っています。
最近ではOcculus Quest2など安価で高性能な端末が販売されるようになってきており、弊社にも開発のご相談をいただくことが多いです。
基本的にはプラットフォームを決めて、アプリを開発することが多いのですが
最近は「メタバース」というワードも流行って来ており、同じコンテンツをさまざまなプラットフォームで見れるようにしたい！という要望も増えております。
そういう時にうってつけのフレームワークが「A-Frame」というものがあります。
A-FrameはHTMLで3Dコンテンツが表示できるようになるフレームワークです。
A-Frameはブラウザで機能するので、iOS、Android、PC、VRデバイス上で動作するのでサーバーとコンテンツさえ用意すればマルチプラットフォームのアプリを開発することができます。
また、ブラウザベースということで品質が落ちるのでは？という懸念があると思いますがそんなことはありません！
VRデバイスでA-Frameで開発したサイトにアクセスすると、他のブラウザベースではない作り込まれたコンテンツと遜色ない体験ができるようになってます。
以下の手順で簡単に自分のHPに組み込むことができます。
を組み込む。
<a-entity light="type: directional; color: #EEE; intensity: 1" position="1 1 1"></a-entity>
<a-entity
geometry="primitive: box;"
material="color: #FF0000; roughness: 0.5; metalness: 0.2;"
position="0 1 -5"
rotation="0 0 0"
animation="property: rotation;
from: 0 360 0;
to: 0 0 0;
dir: alternate;
dur: 10000;
loop: true;
easing: easeInOutSine">
</a-entity>
<a-plane position="0 0 -5" rotation="-90 0 0" width="10" height="10" color="#CCCCCC"></a-plane>
<a-sky color="#4444EE"></a-sky>
</a-scene>
をbodyタグ内に追加する。
——————
以下、簡単に解説させていただきます。
A-Frame用のシーンを定義するタグになります。
このタグ内にコンテンツを書き込むことになります。
ライト用のタグになります。
ライトはコンテンツの見え方に影響してきます。
現実世界の照明と同じです。
geometry="primitive: box;"
material="color: #FF0000; roughness: 0.5; metalness: 0.2;"
position="0 1 -5"
rotation="0 0 0"
animation="property: rotation;
from: 0 360 0;
to: 0 0 0;
dir: alternate;
dur: 10000;
loop: true;
easing: easeInOutSine">
</a-entity>
上記は、画面中央に表示されているBOXになります。
パラメーターの詳細などは公式サイトのリファレンスを参照してください。
今回は、アニメーションを設定しています。
サンプルを下記URLで公開しています。
https://abridge-co.jp/test/example.blade.php
——————
A-Frame公式サイト
https://aframe.io/