もくじ

はじめに 1 目次 2 作るもの・学ぶもの 5 PlayCanvasでスポットライトを追加 5 PlayCanvasで操作した情報をNode-REDで受信・Node-REDからPlayCanvasへデータを送信 6 Node-REDからIoTデバイス・照明を制御 6 構成 7 構成1 7 構成2 7 構成3 7 構成4 8 構成5 8 事前準備 10 PlayCanvasアカウント作成 10 enebularアカウント作成 10 サンプル3Dモデル(プロジェクト)のフォーク 11 IoTデバイス 12 照明 13 PlayCanvasを触ってみよう 14 プロジェクトを開く 14 Editor画面の構成 15 画面操作に慣れよう 16 Launch画面 17 方向性ライト(Directional Light)を追加する 18 2Dスクリーン(2D Screen)を追加する 19 ボタン(Button)を追加する 19 テキスト(Text)を追加する 20 スクロールバー(Scrollbar)を追加する 20 3Dスクリーン(3D Screen)を追加する 21 テキスト(Text)を追加する 22 スポットライト(Spot Light)を追加する 22 オブジェクトを移動・回転・拡大縮小させる 23 オブジェクトを配置する 24 インスペクターでの設定例 24 スクリプトを追加する 29 スクリプトの追加 29 スクリプトの構成 30 enebular(Node-RED)を触ってみよう 32 プロジェクトの作成 32 フローの作成 32 フローエディタの画面構成 34 サンプルフローを作成 35 パレットの追加 35 PlayCanvasとNode-REDを連携させる(Socket IO編) 38 Node-REDの準備 38 各ノードの設定 38 (コラム)CORS 40 PlayCanvasの準備 40 動作確認 41 PlayCanvasとNode-REDを連携させる(MQTT over WebSocket編) 43 Node-REDの準備 43 各ノードの設定 43 PlayCanvasの準備 45 動作確認 47 ローカルのNode-REDとの連携 48 PlayCanvasとIoTデバイスを連携させる 49 M5StickC Plusの準備 50 ローカルのNode-REDの準備 51 動作確認 52 IoTデバイスのLEDと連携させる 52 PlayCanvasと照明を連携させる 55 IKEA TRÅDFRI(トロードフリ)LED電球の準備 55 ローカルのNode-REDの準備 55 動作確認 57 応用 57 参考 59 『イチから作る!PlayCanvasハンズオン』を受講して 60 受講した目的 ハンズオンのゴール設定 60 ハンズオン 62 Babylon.jsとの違い 63 まとめ 65 あとがき 66 著者紹介 67