obniz を使って A のアイデンティティ を見つけるサイトを作った。

11641 ワード
3D HTML obniz Netlify A-Frame HTML テキストリンク

手元の様子↓

サイトの様子↓

ふー。obniz で サイトのオブジェクトを動かせるのは楽しいですね。
ちなみにサイトのURLは->https://a-identity.ml/ になりますが、html に obniz_id を入力しないと動かせないので、obniz を所持している方のみ遊べます。obniz を持っていない方は、これを機会に購入ましょう。(製品詳細:https://obniz.io/ja/products/obnizboard/)

今回記述した html はこちらです。
Obniz_ID 記述を、自分の所持している Obniz_ID に書き直しましょう。

index.html
| <!DOCTYPE html> |
|:--|
| <html> |
|  |
| <head> |
|   <meta charset="utf-8"> |
|   <title>A←→</title> |
|   <meta name="description" content="Hello, WebVR! • A-Frame"> |
|   <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> |
|   <script src="https://unpkg.com/[email protected]/obniz.js" crossorigin="anonymous"></script> |
| </head> |
|  |
| <body> |
|   <a-scene background="color: #FAFAFA"> |
|     |
|     <a-text id="cylinder" position="0.5 1 -2" color="#000000" value="A"></a-text> |

|     <a-text position="-2 1 -2" color="#000000" value="pple"></a-text> |
|     <a-text position="-5 1 -2" color="#000000" value="ndroid"></a-text> |
|     <a-text position="-8 1 -2" color="#000000" value="ction"></a-text> |
|     <a-text position="-11 1 -2" color="#000000" value="rt"></a-text> |
|      |
|   </a-scene> |
|  |
|   <script> |
|     var sceneEl = document.querySelector('a-scene'); |
|     var cylinder = sceneEl.querySelector('#cylinder'); |
|  |
|     // 初期位置の記録 |
|     let defaultX = cylinder.object3D.position.x; |
|  |
|     var obniz = new Obniz("Obniz_ID");  // 自分のObniz_IDをいれましょう。 |
|  |
|     obniz.onconnect = async function () { |
|       obniz.display.clear(); |
|       obniz.display.print("3D A-Frame"); |
|       obniz.display.print("　↑↓"); |
|       obniz.display.print("obniz"); |
|       obniz.switch.onchange = function (state) { |
|         if (state === "push") { |
|           obniz.display.print("push"); |
|           cylinder.object3D.position.x = defaultX; |
|         } else if (state === "right") { |
|           obniz.display.print("right"); |
|           cylinder.object3D.position.x += 0.3; |
|         } else if (state === "left") { |
|           obniz.display.print("left"); |
|           cylinder.object3D.position.x -= 0.3; |
|         } else { |
|           obniz.display.clear(); |
|         } |
|       } |
|     } |
|  |
|   </script> |
| </body> |
|  |
| </html> |

ローカル環境でも遊べますが、デプロイしたい方は下記サイトを参考にするといいと思います。
https://qiita.com/oganyanATF/items/7fb681e863d8681c9039

最後までご覧いただきありがとうございました。