3D タイル

• 概要
• 動作に必要なファイル
  • 3D モデルファイル
  • 3D 設定ファイル
    • camera
    • clearColor
    • animations
      • アニメーション
    • messages
      • メッセージ
    • staticMessages
      • 静的メッセージ

概要

3DCG による時系列データの可視化 UI です。

例）

• 開閉センサの開 (1)／閉 (0) に応じてドアの 3DCG を 90 度回転させる。
• 温度センサが 28 ℃以上のとき部屋の色を赤く表示する。

動作に必要なファイル

1. 3D モデルファイル
2. 3D 設定ファイル

3D モデルファイル

3D モデルファイルの対応形式は以下のとおりです。

• COLLADA ファイル (*.dae)
• Google Earth ファイル (*.kmz)
• glTF 2.0 ファイル (*.gltf)
• glTF 2.0 binary ファイル (*.glb)

Blender などの 3D モデリングツールを使ってエクスポートできます。

3D モデリングの注意点

Blender などのツールで 3D モデリングをする際の注意点について説明します。

3D モデルのポリゴンデータは、複数のノードのツリーで構成されています。

例）

• House
  • LivingRoom
    • Door1
    • Door2
    • TV
    • Table
    • Chair1
    • Chair2

RealBoard は時系列データのポイントとノードを関連付け、時系列データの変化に合わせてノードを移動・回転・拡大縮小するといったアニメーション機能を提供します。 3D 設定ファイル上で、アニメーション対象のノード名を指定する必要があります。

• 例：開閉センサのポイント値が 0 から 1 に変化したとき、ノード Door1 を X 方向に 100 移動

ポリゴンを適切なノード単位に分割し、わかりやすいノード名を命名することを推奨します。

3D 設定ファイル

時系列データと 3DCG をマッピングするための設定ファイルです。 ファイルは JSON 形式のテキストファイルです。 カメラ位置、背景色、アニメーションなどの設定を記述します。

{
    "camera": { 省略 ... },
    "clearColor": "909090",
    "animations": [ 省略 ... ],
    "messages": [ 省略 ... ],
    "staticMessages": [ 省略 ... ]
}

以下、3D 設定ファイルのフォーマットについて説明します。

camera

カメラ設定は 3D モデルの見え方に影響します。 3D モデルをどこから撮影してどれくらいの範囲を 2D キャンバスに描画するかを決めます。 オブジェクト型 で記述します。省略可能です。

"camera": {
    "position": { "x": 0, "y": 0, "z": 0 },
    "target": { "x": 0, "y": 10, "z": 0 },
    "fov": 50,
    "near": 0.1,
    "far": 2000
}

near と far はカメラが撮影する範囲を決めるパラメータです。 near から far までが撮影され 2D キャンバス上に描画されます。

3D モデルによっては寸法が小さすぎて撮影範囲に入らないケースがあります。その場合は near を小さくして前方面をカメラに近づけてください。

clearColor

背景色の RGB カラーコード（16 進表記）です。文字列型 で記述します。省略可能です。デフォルト "909090" です。

"clearColor": "909090"

animations

アニメーション の 配列型 で記述します。省略可能です。デフォルトは空です。

"animations": [ 省略 ... ]

アニメーション

アニメーション設定です。オブジェクト型 で記述します。 3D ノードにポイントを関連付けます。 ポイント値が変化したとき、3D ノードのプロパティ（位置、大きさ、色など）が連動して変化します。

{
  "pointId": "/demo/sensor/001/value",
  "nodeName": "TargetNode",
  "property": "scale",
  "init": { "x": 0.01, "y": 0.01, "z": 0.01 },
  "keyframes": [
    {
      "in": 0,
      "out": { "x": 0.01, "y": 0.01, "z": 0.01 }
    },
    {
      "in": 100,
      "out": { "x": 100, "y": 100, "z": 100 }
    }
  ],
  "relative": false,
  "linear": true,
  "duration": 500,
  "yoyo": false
}

messages

メッセージ の 配列型 で記述します。省略可能です。デフォルトは空です。

"messages": [ 省略 ... ]

メッセージ

ポイント ID と連動するメッセージの設定です。オブジェクト型 で記述します。

最終的にメッセージとして出力される文字列は各パラメータによって調整されます。 switch の条件分岐による置換、decimal の小数点桁数設定、textFormat の表示形式設定の順に評価されます。

{
  "pointId": "/demo/sensor/002/value",
  "switch": [
    {
      "case": [0, 25],
      "to": "入力は 0 以上 25 未満"
    },
    {
      "case": [25, 50],
      "to": "入力は 25 以上 50 未満"
    },
    {
      "case": ["A", "B", "C"],
      "to": "入力は文字列 A or B or C"
    },
    {
      "case": [-1, 100, 999],
      "to": "入力は数値 -1 or 100 or 999"
    },
    {
      "case": [1234],
      "to": "入力は数値 1234"
    },
    {
      "case": [],
      "to": "どの条件にも当てはまらない (default)"
    }
  ],
  "decimal": "2",
  "textFormat": "出力テキスト： ${value}",
  "position": { "x": 5, "y": 2, "z": 10 },
  "fontFace": "Arial",
  "fontSize": 90,
  "textHeight": 5,
  "color": "000000",
  "backgroundColor": "ffffff"
}

staticMessages

静的メッセージ の 配列型 で記述します。省略可能です。デフォルトは空です。

"staticMessages": [ 省略 ... ]

静的メッセージ

固定の文字列を表示する静的メッセージの設定です。オブジェクト型 で記述します。

{
  "text": "静的なメッセージ",
  "position": { "x": 5, "y": 2, "z": 5 },
  "fontFace": "Arial",
  "fontSize": 90,
  "textHeight": 10,
  "color": "ffffff",
  "backgroundColor": "000000"
}