テクノロジーを学ぶなら、実際つくってみるのが一番!
パソコンを持っている高専生、大学生にオススメは、VRアプリづくり。HTMLを書くだけで、自分だけのサイバー空間をかんたん自由に創ることができますよ。

前提知識
- エディタが使える
- ファイルと拡張子を知っている
- ブラウザでファイルを開ける
- ChromeやSafariを使っている

では早速、HTMLを書いてみましょう。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script> </head> <body> <a-scene id="scene"> <a-box position="0 -.5 0" width="80" height="1" depth="100" color="green"></a-box> <a-box position="-4 1 -5" width="4" height="4" depth="4" color="white" src="https://fkpc.github.io/kanirobovr/assets/kanirobo/kanirobo.outline_mini.png"></a-box> <a-sphere position="0 1 -3" radius="1" color="red"></a-sphere> </a-scene> </body> </html>

こちらコピペでもOKです。test.html として保存し、ブラウザで開いてみましょう!

A-Frameは、webVRをかんたんにつくることができるライブラリ、a-ではじまるタグを使って、サイバー空間を創ることができます。a-sceneタグ内に、箱を表現するa-boxや、球を表現するa-spheneなど記述していきます。(詳細は、A-Frameを参照ください)

HTMLでは、<ではじまり>で終わるものをタグと呼び、囲み内の先頭のキーワードがタグ名と呼びます。スラッシュ"/"で始まるタグを閉じタグとして階層構造を表現します。HTMLの最新メジャーバージョンであるHTML5を表す <!DOCTYPE html> と、htmlタグから始めましょう。(HTML/CSSはじめのいっぽ

2025年、大阪万博が決まりました。大阪万博といえば太陽の塔。なんと大きさは70mとのこと。そのスケール感を見てみたくなったので、コーン(a-cone)を使って、それっぽいものをつくってみました。

太陽の塔のスケール確認(Oculus Quest使用時のテレポート対応版)
PCで見る場合、マウスで見渡せ、カーソルキーで移動。
スマホで見る場合、VRモードにするとスマホVRゴーグルでぐるぐる見渡せます
Oculus Questで見る場合、VRモードにすると歩き回れます(テレポートにも対応)

アニメーションするだけならHTMLだけでOK!animationプロパティをいろいろつけてみましょう!

京都芸術大学、クロステックデザインコースの学生による作品を一部紹介!

ステキなカラーリングのVR森!


たくさん並んだ鳥居!京都っぽい!


五輪!意図せずできたかすれ具合もまたオシャレ


島、浮き沈みするアニメーションつき


謎空間に浮かぶダンベル、サイケなVR筋トレアプリができそう!

画像を用意して、テクスチャーとして表面に貼り付けたりするとリアル感増したりしますよ!
JavaScriptでかんたんに操作する例、テレポート追加例付き。ぜひ遊んでみてください!
A-Frame examples

links
- つくる場とみせる場、もくもく会で作ってNTで展示! 実寸テニスコートで遊ぶVRゲーム at SCC (Sabae Creative Community)
- NT鯖江で初出展「IchigoJam VR」BASICプログラミングで月を出現させるバーチャル体験

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS