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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

見本のりおんのGLBファイルです

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

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

見本の画像です

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

<!DOCTYPE html>

<html>

<head>

<title>atapra</title>

</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コードの冒頭、

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

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

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

みんなの発表会に戻る➡

Page updated

Google Sites

Report abuse