今見てくれてる人の数

ホンキートンク・スーダラブルース

ゆるコラム、oF、邦ロックや歌謡曲、小説の感想。ドラクエ、JavaScript、ドラゴンボール超など。湘南あたりを転がってる石コロのゆるゆる生きてく超雑多な軌跡です。

【WebVR日記3】A-Frameに入門。画像を表示。<a-image>使う。

今回の完成図。

前回の記事で実践した、360度全天球画像の中に

ピヨピヨちゃんを表示させます。

f:id:sudara_bluse:20171030121853p:plain

 

前回の記事はこちら。

www.sudara-bluse.tokyo

 

 

今回は<a-image>というタグを使って、ピヨちゃんを表示するだけなのですが、

これがかなーり苦戦しました、、、、!

ずっとピヨちゃんが真っ暗のCUBEになってしまい表示されませんでした。

原因は、、、、。

aframe.jsのバージョンでした!!!!

皆さんもきをつけてください。

本記事はver0.2.0を読み込んでいます。(古め?)

 

実装方法

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
<!-- ver0.2.0を読み込み-->
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script> </head> <body>
       <a-assets>
           <img id="piyo" src="img/piyo.png">
       </a-assets>
       <a-scene>
            <a-image id="piyo" src="#piyo" scale="1 1 1" position="0 0 0"></a-image> <a-sky src="sample-photo.jpg" rotation="0 170 0"></a-sky> </a-scene> </body> </html>

 

< a-assets>タグの中に記載したリソース(画像、音、3Dモデルなど)

は事前に読み込まれるため、実際に表示する際の遅延を軽減するそうです。

 

どうやら<a-image>というタグが画像が貼ってある板ポリみたいなもの

を表示するタグらしいのですが、それが最新版だと動かないみたいです。

 

<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>

を読み込んでるので注意!

 

あとはビデオと3Dモデルの読み込み表示もやって見たいのですが、

早速<a-video>がスマホのブラウザで表示されず苦戦してます笑

PCでは映るのに、、、

続く。

 

Hello Worldした記事です。

www.sudara-bluse.tokyo