TwinMakerに良い感じの（ホバー、操作ができる）ボタンを置く

この記事について

• AWS IoT TwinMakerで作成した3D空間に、ホバー、クリック操作ができるボタンを作成します
• この記事では、クリックからECHONET Liteのカーテンが閉まるところまで確認します

どうやって？

• three-mesh-uiを使います
  • VRや3D Webアプリ向けのライブラリです
  • 簡単に良い感じのボタンやテキスト、キーボードを作成して、3D空間上に配置できます

動いているところ

• マウスポインタが「閉じるボタン」に乗るとホバーで色が変わります
• 「閉じるボタン」がクリック操作を受けると、ECHONET Lite シミュレータのカーテンが閉まります。また、部屋の奥にあるテキストの表示が変わります

※gifだとぼやけているので、pngの画像がこちらです

ソースコード

ソースコードはこちらにあります。add-buttonのブランチです
https://github.com/ShotaOki/twinmaker-echonet-direct/tree/add-button

TwinMakerをiot-app-kitで動かして実装します。

実装方法

ボタンの実装部分はThree-Mesh-Uiのサンプルそのままを適用するだけなので、大まかに実装の流れだけを説明します。
https://github.com/felixmariotto/three-mesh-ui

インタラクティブ・ボタンのサンプルそのままで大丈夫です。
https://github.com/felixmariotto/three-mesh-ui/blob/master/examples/interactive_button.js

1. 日本語フォントを持ってくる

3DアプリにはHTMLのようなフォントレンダリングの仕組みがないため、MSDFフォントを使います。画像に文字が敷き詰められていて、そこから目的の文字をピックアップしてくるフォントです。

Three-Mesh-Uiに入っているMSDFフォントは日本語フォントに対応していないので、こちらからNotoの日本語フォントを借用します。
https://github.com/studioTeaTwo/aframe-japanese-font

• noto-sans-cjk-jp-msdf.json
• noto-sans-cjk-jp-msdf.png

コピーしたら、Reactプロジェクトのpublicディレクトリに配置します。

2. フォントをボタンに適用する

フォントは親要素のBlockに適用します。

    // フォントを適用する
	const container = new ThreeMeshUI.Block( {
		justifyContent: 'center',
		contentDirection: 'row-reverse',
		fontFamily: "/noto-sans-cjk-jp-msdf.json",
		fontTexture: "/noto-sans-cjk-jp-msdf.png",
		fontSize: 0.07,
		padding: 0.02,
		borderRadius: 0.11
	} );

あとはThreeMeshUI.Textでテキストを作成して、containerにぶら下げて、クリックイベントを登録すればOKです。

まとめ

TwinMakerとThree-mesh-uiの相性は悪くないので、Three.js向けのUI資産が簡単に使えます。
オリジナルな操作用ボタンを作成して、TwinMakerの3D空間から現実の機器を操作することで、便利なものが作れると思います。