概要
「Web VR（A-Framee）のボタンを押すと、obnizの画面にメッセージが表示される」
というものが作りたくて奮闘しました
https://qiita.com/kmaepu/items/55689772aa41bd5d8433
こちらの記事ではobnizとの連携まで至りませんでした。
というのをTwitterにつぶやいた所、中の人からアドバイス頂き、実現することができました！
ありがとうございます。
実際の動き
少し見づらいですが、PC画面上のボタンを押すと、obnizの液晶画面に文字が映し出されます。
やりたかったことができた！
— まえぷー@出窓菜園ティスト (@kmaepu) June 4, 2020
Web VR上のボタンを押すとobnizの画面にメッセージが表示される！#obniz pic.twitter.com/MtTR3wpVCw
ソースコード解説
前回の記事にあったところとの差分を抜き出すと次の箇所になります。
let obniz = new Obniz("obniz_id"); // obniz idを入力する
let connected = false;
obniz.onconnect = async function () {
console.log("Connect obniz");
connected = true;
}
obniz.onclose = async function () {
connected = false;
}
async function handlerClick(event) {
console.log('handlerClick');
console.log(event);
event.target.object3D.position.z -= 0.5;
if (connected) {
obniz.display.clear();
obniz.display.print("3D A-Frame");
obniz.display.print(" ↑↓");
obniz.display.print("obniz");
}
}
何が原因だったかというと、obnizのconnectはscriptの走った最初だけ実行し、それ以降に何度もconnnectしようとしても動かないとのことです。
function内で何度もconnnectしちゃいけなかったのか！
ソースコード全文
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!--背景画像-->
<a-sky src="https://aframe.io/aframe/examples/boilerplate/panorama/puydesancy.jpg" rotation="0 -130 0"></a-sky>
<!--仮想ボタン-->
<a-box color="#EEEEEE" position="0 2 -3" height="2" width="2"></a-box>
<a-box color="#C0C0C0" position="0 2 -2.5" height="0.5" width="0.5" onclick="handlerClick(event)"
onmouseenter="handlerMouseEnter(event)" onmouseleave="handlerMouseLeave(event)">
<a-animation attribute="scale" to="-3.5 -5 2" direction="alternate" dur="2000" repeat="indefinite"
easing="linear">
</a-animation>
</a-box>
<!--足もとのブロック-->
<a-box color="#99FFFF" position="0 0 0" height="2" width="2"></a-box>
<!--自分の視点-->
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
<script src="https://unpkg.com/obniz@3.5.0/obniz.js" crossorigin="anonymous"></script>
<script>
let obniz = new Obniz("obniz_id"); // obniz idを入力する
let connected = false;
obniz.onconnect = async function () {
console.log("Connect obniz");
connected = true;
}
obniz.onclose = async function () {
connected = false;
}
async function handlerClick(event) {
console.log('handlerClick');
console.log(event);
event.target.object3D.position.z -= 0.5;
if (connected) {
obniz.display.clear();
obniz.display.print("3D A-Frame");
obniz.display.print(" ↑↓");
obniz.display.print("obniz");
}
}
function handlerMouseEnter(event) {
console.log('handlerMouseEnter');
console.log(event);
}
function handlerMouseLeave(event) {
console.log('handlerMouseLeave');
console.log(event);
}
</script>
</body>
</html>