モデルとモデルアイテムの直線移動
このエクスペリエンスを使用してアプリケーションパラメータを確認し、アプリケーションパラメータが変更された場合に操作を実行することができます。
1. 新しいモバイルプロジェクトを作成します。
2. 3D キャンバス上の「モデル」ウィジェットをキャンバス上にドラッグアンドドロップします。
3. 「詳細」枠で、「リソース」フィールドの横に表示されている緑色の「+」記号をクリックします。
|
|
このチュートリアルでは、blue_pump.pvz ファイルを使用します。
|
4. 次に、「モデルアイテム」ウィジェットをモデル上にドラッグアンドドロップします。
5. 次に、3 つの 2D ボタンを追加します。キャンバスツールバーで「2D」をクリックし、2D キャンバスを表示します。
6. 3 つの「ボタン」ウィジェットを、キャンバス上の中央パネルにドラッグアンドドロップします。
◦ 最初のボタンの「テキスト」フィールドに「Move Model」と入力します。
◦ 2 番目のボタンの「テキスト」フィールドに「Move Model Item」と入力します。
◦ 3 番目のボタンの「テキスト」フィールドに「Reset」と入力します。
| このチュートリアルでは、既成のスタイルを使用してボタンの色を設定しました。詳細については、 テーマを参照してください。 |
7. 「Move Model」ボタンを選択して、このボタンのプロパティを表示します。
8. 「詳細」枠の「クリック」イベントの横に表示されている「JS」アイコンをクリックし、「定義式」ボックスに「moveModel();」と入力します。
このボタンをクリックすると、JavaScript の moveModel 関数が実行されます。
9. 「Move Model Item」ボタンを選択して、このボタンのプロパティを表示します。
10. 「詳細」枠の「クリック」イベントの横に表示されている「JS」アイコンをクリックし、「定義式」ボックスに「moveModelItem();」と入力します。
このボタンをクリックすると、JavaScript の moveModelItem 関数が実行されます。
11. 「Reset」ボタンを選択して、このボタンのプロパティを表示します。
12. 「詳細」枠の「クリック」イベントの横に表示されている「JS」アイコンをクリックし、「定義式」ボックスに「reset();」と入力します。
このボタンをクリックすると、JavaScript の reset 関数が実行されます。
13. 「データ」枠で、以下に示す 2 つのアプリケーションパラメータを作成します。
◦ xCoordModel - モデルの X 座標の値を駆動します
◦ zCoordModelItem - モデルアイテムの Z 座標の値を駆動します
14. 以下の手順でバインディングを作成します。
◦ xCoordModel アプリケーションパラメータを、「プロジェクト」枠の「model-1」にドラッグアンドドロップします。「バインディングターゲットを選択」ウィンドウで「X 座標」を選択します。
◦ zCoordModelItem アプリケーションパラメータを、「プロジェクト」枠の「modelItem-1」にドラッグアンドドロップします。「バインディングターゲットを選択」ウィンドウで「Z 座標」を選択します。
15. 「プロジェクト」枠で「Home.js」をクリックします。JavaScript エディタで、以下のコードを入力します。
$scope.app.params.xCoordModel = 0;
$scope.app.params.zCoordModelItem = 0.198;
$scope.reset = function() {
$scope.app.params.xCoordModel = 0;
$scope.app.params.zCoordModelItem = 0.198;
};
$scope.moveModel = function() {
$scope.app.params.xCoordModel += 0.1;
};
$scope.moveModelItem = function() {
$scope.app.params.zCoordModelItem += 0.1;
};
16. 「プレビュー」をクリックします。「Move Model」ボタンをクリックすると、モデル全体が移動します。「Move Model Item」ボタンをクリックすると、モデルアイテムだけが移動します。
