特別企画：バーチャル３Ｄを作ろう

「バーチャルリアリティ」略して「ＶＲ」、こういう言葉を聞いたことはありますか？　日本語だと仮装現実といい、バーチャルな３D画像を画面に映し出す技術の事をいいます。ＶＲで作った画像をホームページに貼るととても目を引きますね。

自分でもやってみたい！　という君のために、こっそり、バーチャル３Dの作り方を教えます。


（マイクラなどでもワールドという似た機能がありますが、ここでご紹介するのは、HTMLファイルを自力で用意する方法で、ホームページに埋め込んだりできるのが特徴です）

バーチャル「りおん」（のつもり）を作ってみよう。

〔保護者の方・指導者の方へ〕これを実装するには　レンタルサーバー　が必要です。　無料のサービスも沢山ありますが、うっかり課金することもありますので、お子さんが興味をもたれたら、できれば一緒にやってあげることをお勧めします。また、他の方に公開する場合は、なるべく、セキュリティー対策をしたサーバーという事を証明する、SSL認証　付きのアドレス　（ｈｔｔｐｓ・・・で始まる）を使うのが最近のマナーになっています。できればそこも手を貸してあげてください。

なお、オンラインストレージ（Ｇｏｏｇｌｅドライブなど）ではうまくできません。「ホスティング機能」という、ホームページを投影する機能がないためです。

【まず準備】①レンタルサーバー、②MagicaVoxel（マジカボクセル）、③Blender(ブレンダー)　この３つが必要です。


①は登録に個人情報が必要なので、大人とやろう。無料のプランもあるよ。

　

②は３D画像を描くフリーソフトです。ダウンロードの方法をふくめた使い方は　こちら　などを見てみてください。


③GLBという、形と色をセットにしたファイルを作るためのフリーソフトです。　同様に　こちら　などを見てください。

【その１】MagivaVoxel（マジカボクセル）で３D画像を描こう！

実は３D画像というのはとても描くのが大変！！　二次元の絵の１．５倍の手間？

いえ、実感として１０倍ぐらい大変です！！


マジカボクセルは、あの「マイクラ」っていうゲームに出てくる物体や人物の様な、カクカクしたキャラを描くためのソフトです。このカクカクしたキャラだと、描く手間がとても省けるので、初心者の方にはオススメです。


今回は、マジカボクセルで「りおん」を描いてみました。描く方法はネットなどで調べてみてね。本も沢山でています。


書いたら、「OBJファイル」でエクスポートしてください。（エクスポート機能は、右下の「ｅｘｐｏｒｔ」という文字を見つけてクリック！）

【その２】Blender（ブレンダー）でGLBファイルを作ろう！

ブレンダーは、最初開くと、立方体やらがなぜか入っている。これらを全て選択して消してしまおう！

ここに、さっき、マジカボクセルで作成、エクスポートしたOBJファイルを読み込もう！　読み込み方は、メニューから「ｉｍｐｏｒｔ」という文字を探して「ＯＢＪ」を選択して行います。

読み込んだらすぐに、マッピングを行おう！　これば表面の色や模様を付けることを指します。画面上の「Ｔｅｘｔｕｒｅ　Ｐａｉｎｔ」をクリックすると行えるよ！


（じつは、ＯＢＪファイルをエクスポートしたタイミングで、マテリアルファイルという、色や模様を記憶したファイルがこっそり出来ていて、この操作をすることで、マテリアルファイルと合体するというわけです。）

最後に原点を合わせる。十字線の真ん中に立つようにキャラを動かそう。

右下に矢印が見えるね！　ここを触ることで移動するよ！

最後にエクスポートする。「EXPORT」という文字をクリックして、「GLTF・・・」というメニューを選ぶとGLBファイルが作られます。このファイルは、形と色がセットになった情報をもっているよ。

【その３】サーバーにGLBファイルと背景のJPG画像をアップし、HTMLファイルを書こう！

背景画像はできればパノラマ撮影や全天球画像が良い。スマートフォンなどでも撮影できるものがあるので用意して、jpg画像として準備しよう。ここでは中央公園のパノラマ写真を用意したよ。そして、さきほどのリオンと一緒に、サーバーの同じフォルダ内にアップしよう！

３Dのファイルと、背景画像を入れたフォルダ内で、更にHTMLファイルを作り、以下のコードを貼り付けよう。君の作ったＧＬＢファイルや、背景画像を使う場合は、下の方にある赤い文字を使うファイル名に修正してね！（大文字と小文字は正確に！！）

<!DOCTYPE html>

<html>

  <head>

    <title>atapra</title>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

    <script src="https://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/master/dist/aframe-orbit-controls-component.min.js"></script>


  </head>

  <body>

    <a-scene>

        <a-entity

            id="camera"

            camera

            position="0 0 5"

            orbit-controls="

                autoRotate: true;

                autoRotateSpeed:0.2;

                target: #target;

                enableDamping: true;

                dampingFactor: 0.25;

                rotateSpeed:0.14;

                minDistance:3;

                maxDistance:15;"

            mouse-cursor="">

        </a-entity>

      <a-plane  id="target"

      width="0.1" height="0.1" position="0 0 0" rotation="0 0 0" ></a-plane>


<a-gltf-model 


  animation="property: object3D.position.y;

             to: 0.5;

             dir: alternate;

             dur: 3000;

             loop: true"


      src="Rion.glb" position="0 0 0"></a-gltf-model>

     <a-sky src="kouen.JPG" radius="60"></a-sky>    

    </a-scene>

  </body>


</html>


HTMLファイルのURLをブラウザーに入れると、３Dが表示されるはず！！！

【お家の方、指導者の方へ】このHTMLファイルは、「A-Frame」というオープンソースのライブラリを用いています。


HTMLコードの冒頭、

<script src="https://afr・・・・・

の部分で、ライブラリを読み込んでいます。２行ありますが、１つめはA-frame本体、２つめはオービットという、ユーザーが３Dを操作するためのライブラリです。


３Dは、物体の配置、照明の配置、カメラの配置、観察者の視線の設定、と基本この４つが必要で大変なのですがこのライブラリを使う事で、とても実装が簡単になります。うまく行くといいのですが・・・。（私自身も、自宅のＰＣでしかやった事がないので、環境によってはうまく行かないかもしれません。文献はいろいろありますので、お手数ですが、その場合は、なんとか自助努力でご調査お願いします）

こちら　に比較的くわしく解説がありますので、宜しければご参照ください。