2021-10-09
#js #vr #procon32 
学生時代から付き合いある高専プロコン。今年で32回目、昨年に続きオンライン開催となりました。

創った学生と直接あれこれ語り合えるのが最大の魅力、去年はプレゼンを一方的に聞くばかりとなって残念だったので、今年は審査員することに。


福井高専チームもVRによる育児シミュレーションゲーム「マジメン」の発表！


「バーチャルイベント会場」
今年も用意されたバーチャルイベント会場ですが、よくある展示会場そのまま。情報量的に2D版と変わらないので、結局みんな2D版を見ているのでは？

せっかくのバーチャルなので、自由な発想でいきましょう！

公開されている「第32回高専プロコン パンフレット」をpdf2pngを使って画像化。 ブラウザ上でのVRフレームワーク「A-Frame」を使って、バーチャル展示会場もどきのベースプログラムを作ってみました。


「1次元表示バージョン」src on GitHub
いわゆる本と一緒、ずらっと1軸に並んでいます。


「2次元表示バージョン」src on GitHub
平面上にランダムに並べた2次元版。


「3次元表示バージョン」src on GitHub
重力に縛られる必要はないので，空間上にランダムに並べた3次元版。

ソースは、Code for KOSENのGitHubにあります。
超シンプルなコードなので、ぜひいろいろ遊んでみてください！ <!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>procon32 VR</title> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> <a-scene id="scene" background="color: #222"> </a-scene> <script type="module"> import { Procon32 } from "./Procon32.js"; onload = () => { for (let i = 1; i <= Procon32.length; i++) { const x = -10 + i * 1.5; const z = -4; Procon32.createPage(i, x, 2, z, 0, 0, 0, scene); } }; </script> </body> </html>

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS