開発の楽しさを伝えるため、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にある喫茶店。昭和な雰囲気。
なぜかダンベルが！？レトロなレジも必見です。
懐かしの２つの時計が掲げてあったお店を発見、世代が違うと全くわからないことがわかった。(on Twitter)
links
- 一日一創 VRカテゴリ
- 一日一創 VRアプリ一覧
Fri Night
