福野泰介の一日一創 - create every day

49,800円という衝撃価格のモバイルVR「Oculus Quest」が好調

開発の楽しさを伝えるため、50行マイクラ風に続く第二弾、今回はVRらくがきアプリを48行で作成。
Tilt Brushは気持ち良いけど、起動に時間がかかるのがネック(あと、有料)。
今回作った、お絵かきツールは、超軽量なので起動も一瞬!(無料&オープンソース on GitHub

drawline-VR
フレームワーク、A-Frameを使っている。線をa-lineでだらだらと追加しているが、割りとすぐに重くなってしまうのは、どうにかできるのか!?フレームワークやWebVRの限界なのかも?


さらさらと描く様子を、本体へ録画して、USBケーブル転送。(転送は開発モードをOFFにしてAndroid File Transferを使用)

<!DOCTYPE html><html><head><meta charset="utf-8"/> <title>drawline-VR for Oculus Quest</title> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script>'use strict' const list = [] let line = [] let bkp = null AFRAME.registerComponent('input-listen', { init: function() { this.el.addEventListener('triggerdown', function(evt) { bkp = handright.getAttribute('position').clone() list.push(line) }) this.el.addEventListener('triggerup', function(evt) { line = [] bkp = null }) const removeLine = function() { const line = list.pop() if (line) for (let i = 0; i < line.length; i++) document.querySelector('a-scene').removeChild(line[i]) return line } this.el.addEventListener('gripdown', function(evt) { removeLine() line = [] bkp = null }) this.el.addEventListener('bbuttondown', function(evt) { while (removeLine()); }) }, tick: function() { if (bkp) { const p = handright.getAttribute('position').clone() const aline = document.createElement('a-entity') aline.setAttribute('line', { start: bkp, end: p, color: "#FFF" }) document.querySelector('a-scene').appendChild(aline) line.push(aline) bkp = p } } }) </script></head><body><a-scene> <a-sky color="#546c4c"></a-sky> <a-entity id='handright' oculus-touch-controls='hand: right' input-listen></a-entity> </a-scene></body></html>a

ご自由に改造、活用ください!

福井県の昭和おもしろスポット2箇所紹介。

こちら福井県庁内1Fにある喫茶店。昭和な雰囲気。


なぜかダンベルが!?レトロなレジも必見です。


懐かしの2つの時計が掲げてあったお店を発見、世代が違うと全くわからないことがわかった。(on Twitter)

links
- 一日一創 VRカテゴリ
- 一日一創 VRアプリ一覧

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