共通
共通
たとえば、タグをボタンに置き換える場合は以下のように書く
// toButtonでボタンに変更する
"タグ名": (replaceTag) => replaceTag.toButton?.create({
// ボタンの初期化情報
})
.onClick((ctx) => { // クリックされたイベント通知
// クリックを受け取ったタイミングで実行する関数
})
// 他にイベントがあれば後ろにつなげる
初期化情報
以下のパラメータは共通情報として、どの物体でも適用できる。
| 変数名 | 備考 |
|---|---|
| position | 表示位置。タグからの相対位置で表す |
| angle | 表示角度。degreeで表す |
| scale | 表示倍率 |
| isBillboard | ビルボード（カメラの角度に関わらず、ずっと同じ方向を向く物体）にする |
物体によっては、これ以外の固有の情報を取る
イベント
対象が発行するイベントを、onでサブスクライブする
※同じ関数を複数回呼び出した場合は、上書きではなく、それぞれの関数が呼ばれる
イベント一覧
| 関数名 | 実行タイミング |
|---|---|
| onLoad | リソースの読み込みが完了した |
| onUpdateState | タグのリアルタイム状態が更新された |
| onUpdateValue | タグに紐づいたデータが更新された |
| onUpdateCameraAngle | カメラのアングルが更新された |
| onTick | レンダリングを実行した（1/60秒ごとに1回実行される） |
| onEffect | effectDependsOnで参照したオブジェクトが更新された |
| onVisible | 表示状態が表示中に更新された |
| onHide | 表示状態が非表示に更新された |
| onClick | （クリック可能なオブジェクトのみ）対象がクリックされた |
イベントコンテキスト
イベント関数は以下の属性を持った引数を受け取る。直接参照するか、分割代入で取り出す
.onLoad((context) => {
const { self, tagName } = context;
});
| 変数名 | 必須 | 備考 |
|---|---|---|
| self | ◯ | 置き換えたあとのタグオブジェクト |
| tagName | ◯ | タグ名 |
| breadcrumb | ◯ | Groupで階層があるとき、階層を含んだタグ名 |
| rootScene | ◯ | Three.jsのSceneオブジェクト。useStoreでレンダラやライトを参照できる |
| state | onUpdateStateで通知された状態 | |
| values | onUpdateValueで通知されたIoTデータ | |
| cameraState | カメラの状態 | |
| matrix | カメラの角度 |
イベントによっては、これ以外の変数を持つこともある