最近、3Dオブジェクトの3D、より正確には360°ビューをProtoPieで生成し、スワイプやボタンで簡単に操作できるようにしようとしました。
その工程は当初想定していたよりも簡単でしたが、この効果をProtoPieで実現する最適な方法を見つけるまでには少し時間がかかりました。手順は長く見えるかもしれませんが、実際は思っているよりずっと簡単です。
以下に手順を順を追ってご紹介します。ただし、どんな良いレシピでもそうであるように、まずは私たちのPieを作るためのいくつかの重要な材料が必要です。
このチュートリアルの最終結果。
ステップ01：材料
ProtoPie Studioに実際の3Dオブジェクトを直接統合することは現時点ではできないため、3Dオブジェクトから24枚の画像、つまり24フレームを生成することでこの効果をシミュレーションします。
注：Connect 2.7のリリースにより、ProtoPie Connectで3Dオブジェクトを統合できるようになりました。
任意の3Dソフトウェアで、オブジェクトの周囲を360°回転するカメラを作成します。次に、レンダリング設定を24フレームに設定すれば、ほら！これで静止フレームの完成です。
ステップ02：オーブンを準備する
ProtoPie Studioでは、まず新しいプロジェクトを作成し、レンダリングした画像をすべて読み込みます。これらの画像を完全に重なるように配置し、まとめてグループ化します。このグループは「frames」とラベル付けします。グループ内の各フレームの不透明度を0にし、frame 1だけを100に設定してください。
その後、variablesの下に新しい変数を作成し、名前を「xPos_var」にします。
ステップ03：火力を上げる
まず、TriggersメニューからChainを作成し、「xPos_var」変数にリンクします。
次に、ChainにOpacityレスポンスを追加し、最初のフレーム名を割り当てます。すべてのフレームをChainトリガーに含めるまで、この手順を繰り返して各フレームにこれらのレスポンスを追加します。私は最初のフレームを複製し、複製するたびに新しいレイヤーを作成しました。
3Dレンダリングの各フレームにChainトリガーとOpacityレスポンスを使用します。
ステップ04：現在位置は？
ここではいったんChainを脇に置き、このチュートリアルの後半で再び使います。
まず、現在位置を特定する必要があります。はじめに長方形を作成し、「xPos Dot」と名付け、画面の左側のどこかに配置します。見分けやすいように鮮やかな色にしました。
最後に、この「xPos Dot」をグループ化します。なぜでしょうか？これは、この長方形の開始位置をx = 0、y = 0として設定するためです。これにより作業が簡単になります。
X軸上にトラッキング用の点を作成し、パノラマ内の位置を追跡します。
ステップ05：ドラッグしてみましょう。
ここでの目的は、長方形の位置をマウス／タッチ位置に連動させ、その位置をChainに戻して伝えることです。これにより、オブジェクトが本当に回転しているように感じられます。
さあ、始めましょう！
まずDragトリガーを追加し、framesグループにドラッグを設定します。
次にMoveレスポンスを追加し、xPos Dotを割り当てます。方向を両方向に変更し、カスタムの最小値=0、最大値=1201に制限します。
Dragトリガーを使うことで、xPos Dotを画面上で動かせます。
ステップ06：位置を完璧に調整する
これでxPos Dotを動かせるようになりましたが、その位置を検出する必要があります。
まずDetectトリガーを追加し、xPos Dot = x に設定します。
次にAssignレスポンスを追加し、以前ステップ2で作成した変数（xPos_var）に割り当てます。
このAssignトリガーのformulaセクションでは、xPos Dotを追加し、その後ろに.xを付けます。「xPos Dot.x」のような形になります。
xPosドットを追跡し、その値を後でChainトリガーに割り当てます。
プレビューを押すと、鮮やかな色の長方形を動かせるようになります。
ステップ07：メインの材料をChainに組み込みましょう
目標は、変数で追跡した「xPos Dot」の位置情報をChainがどのように使うかを指示することです。そのために、以前作成したChainトリガーにアクセスし、1番目のOpacityレイヤーを選択します。
ここでは範囲を調整する必要があります。
まず range: 0 = opacity: 100 と range: 50 = 100 を追加します
これにより、xPos Dotが0から50の範囲にあるときに最初のフレームを表示するよう、Chainに指示できます。
次に2つ目の範囲を追加する必要があります。これは 51 = 0 と 51 = 0 に設定します。
これにより、xPos Dotが51の範囲を超えたときにこのフレームを非表示にするようChainに指示できます。
パノラマで各フレームをいつ表示するかをChainに指示します
ステップ08：最後の焼き上げ
次のステップは、このPieで最も手間のかかる部分です。非常に繰り返し作業ですが、結果は素晴らしいものになります！
これまでの手順をすべてのフレームに対して繰り返し、それと同時に各フレームに3つ目の範囲を追加します。
毎回範囲を50ずつ増やし、1つ目の範囲には-1、3つ目の範囲には+1の値を設定します。これにより、Chainは特定の値の上または下にあるフレームを非表示にします。
フレームはすべて同じではありません。各フレームの範囲に細心の注意を払う必要があります。
注: frame 2の値は100 to 150、frame 3 = 150 to 200、以降も同様です。
私たちのPieはもう食べ頃です！
各フレームにこれらの値を組み込めば、回転は実質的に完成です！「xPos Dot」の不透明度を0にして非表示にすれば完了です。
注: ボタンによる手動回転を有効にするには、Tapトリガーと「xPos Dot, 」へのMoveレスポンスを追加し、タップごとに101ずつ移動させます。
読んでいただきありがとうございました！
ProtoPieで3Dオブジェクトを使ったプロトタイピングを始めましょう
ProtoPieでプロトタイピングを始め、ダイナミックな3Dオブジェクトをデザインに取り入れて、創造の幅を広げ、没入感のあるインタラクティブな体験でユーザーエンゲージメントを高めましょう。
著者について：
Evert Martin、受賞歴のあるInertとToyotaのシニアHMIデザイナーは、没入感のあるユーザーインターフェースを生み出す専門知識で知られています。車両やアプリケーション向けのグローバルなプロトタイピング施策を主導し、革新性と実用性をシームレスに融合しています。献身的な姿勢が評価され、Evertは受賞歴のあるアクセシビリティ設計と、自動車におけるユーザーエンゲージメントの再構築で高く評価されています。
