概要
javascriptで制御できるマイコンボード「obniz」。
javascriptで書けるなら、A-Frameと連携して何かできそう！と思い試みた話です。
試してみたこと
「A-Frameで表現したボタンを押すと、obnizのOLEDにメッセージが表示される」ということに試みました。
結果としては、obnizにつながらないような状況です。
コードを見てコメントいただけると嬉しいです。
※2020/6/4 追記
連携に成功しました！
https://qiita.com/kmaepu/items/d423b97f846dd2d5e0bc
できたこと
A-Frameでボタンのようなものを作れました。（押したら戻ってこない）
あれから少し進化。押したら２度と使えんくなるタイプのボタンができた(笑)#protoout pic.twitter.com/Lur9AcAO0I
— まえぷー@出窓菜園ティスト (@kmaepu) June 3, 2020
できなかったこと
「ボタンを押したらobnizにメッセージが表示される」は実現できませんでした。
エラーは出ていないようなので、obnizの処理が実行されていないのではないかと考えています。
次のように、ボタンを押したらobnizを接続し、コンソールへログ出力させているのですが、ログがでないです。
obniz.onconnect = async function () {
console.log("Connect obniz");
obniz.display.clear();
obniz.display.print("3D A-Frame");
obniz.display.print(" ↑↓");
obniz.display.print("obniz");
}
ソースコード
index.html
<!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@2.3.0/obniz.js" crossorigin="anonymous"></script>
<script>
let obniz = new Obniz("obniz-id"); // obniz idを入力する
async function handlerClick(event) {
console.log('handlerClick');
console.log(event);
event.target.object3D.position.z -= 0.5;
obniz.onconnect = async function () {
console.log("Connect obniz");
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>