このコンフィギュレーターは、プロダクトデザインチームが設計したシステムの動作を動的に可視化する手段として活用できます。ユーザーがエアコンのリアルタイムなパフォーマンス、素材の構成、さらには寸法やユーザーインターフェース（UI）を確認できるため、複数の部門で役立つ実用的なツールとなります。また、エアコンコンフィギュレーターは、消費者が冷却要件や省エネの好みに応じて詳細を選択し、リアルタイムで冷房システムを設定・テストできるデジタルな可視化ツールでもあります。
このエアコンコンフィギュレーターの目的は、カスタムの フローティングUI、インタラクション、アニメーションを使用して、すべての機能を説明することです。.
フローティングUIに必要な機能：
アニメーションの要件：
このプロジェクトは、 Vectary Studioで一からモデリングされました。 プリミティブオブジェクト、エディットモード、モディファイアを使用しています。エアコンの上部は、最初に Figma で描かれて.svgファイルとしてインポートされ、ジオメトリに変換された上で、 ブーリアン処理によるカットアウトの作成に使用されました。.
このプロジェクトをいくつかのカテゴリーに分けて見ていきましょう。まずはアニメーションからです。アニメーションは、Start、Stop、Fan、そしてSwing modeの合計4つ。その名の通り、それぞれが特定の機能を実行します。
制作する 単一のアニメーションではなく、複数のアニメーションを使用することで、 それらをより詳細にコントロールできるようになります。インタラクションを設定する際、アニメーションの時間に合わせたディレイ（遅延）を設定することで、1つの連続したアニメーションのような表現が可能です。これにより、1つのアニメーションが終了すると同時に次のアニメーションが開始されます。このアプローチにより、後からフローティングUI要素と組み合わせてインタラクションを構築する際に、アニメーションの管理が非常にスムーズになります。また、必ず適切な 条件を設定してください。そうしないと、意図した順序で動作しない可能性があります。たとえば、Swing modeはスイングアニメーションをトリガーしますが、これはStartアニメーションが完了した後にのみ再生される必要があります。
シーン全体は、 ニュートラルなライトグレー/ホワイトのカラー構成に設定されています。室内のエアコンは通常、部屋になじんであまり目立たないようにするため、ホワイトカラーとメタリック素材を選択しました。このエアコンの優れたデザイン特徴は、動作していないときに内部コンポーネントを隠すフロントカバーです。カバーの上には、 ガラスマテリアル が適用された薄いジオメトリがあり、奥行きと美しい反射を生み出しています。温度とアイコンはこのガラスパネルの下に配置されています。外側のパーツにはライトマップがベイクされ、内側のパーツには アンビエントオクルージョン （AO）が使用されています。AOテクスチャは、 ライトマップと比較してサイズが小さいため、高いディテールを必要としない領域に最適です。
ノイズとベンドモディファイアを適用した2つのプレーンに対して、アニメーションマテリアルは Lottieファイル （.json形式）を使用して適用されており、いずれも エミッシブに設定され、 一定の不透明度を持たせています。
ヒント：グラウンドプレーンは回転できません。エアコン背後の壁に影を均一かつ綺麗に広げるには、AOマップをベイクしたプレーンを使用してください。
フローティングUIは、 実際のエアコンのリモコンをシンプルにしたデザインを模しています。電源のオン/オフボタン、温度調整ボタン、スイングモードや空気清浄機能のオン/オフボタンが用意されています。コーナーにあるロゴアイコンをクリックすることでFUIの表示/非表示を切り替えられるため、FUIが常にCanvasを覆ってしまうのを防ぐことができます。
空気清浄機アイコンは、オフを示す色とオンを示す緑色の2つのアイコン状態の表示を切り替えます。さらに、エアコン本体内にある3Dの葉のアイコンの表示/非表示もトリガーします。
Swing modeは、Startアニメーションが完了していることを条件に、Swingアニメーションをトリガーします。
電源ボタンアイコンは、表示/非表示のインタラクションで2つのアイコンを切り替える手法を採用しており、条件を設定する必要がありません。電源ボタンを操作すると、アニメーションマテリアルによる空気の流れの表示、電源ボタンの「オン」状態への切り替え、Startアニメーションの再生、3Dテキストでの温度表示など、複数のアクションがトリガーされます。電源ボタンをオフにすると、Stopアニメーションがトリガーされ、矢印付きの空気の流れのアニメーションマテリアルが非表示になります。
このプロジェクトで最も重要な要素は、Events（イベント）の使用です。これにより、 要素の動作に基づいた特定のロジックを定義できます。このシーンでは、イベントが温度設定を制御します。まず、ロード時（on-load）のイベント値を設定する必要があります。ここではNumberタイプのイベントを使用し、値を24に設定した新しい「Temp_def」イベントを作成します。これにより、プロジェクトを開くと、FUIおよびエアコン本体のデフォルト温度が24に設定されます。このTemp_defは、3DテキストやフローティングUIのテキストフィールドなど、Studio内の他の要素に組み込むことができます。
次に、クリック時にTemp_defが1増加するように定義する必要があります。新しいインタラクションは次のようになります。
温度を下げるインタラクションは、Downアイコンのクリック時に設定し、最小値の条件としてイベントタイプをnumber、イベントをTemp_def、値を18より大きい（greater than 18）に指定します。そして、アクションをイベント、タイプをnumber、イベントをTemp_def、値をTemp_def-1に設定します。
この設定により、上または下のアイコンをクリックしたときに、 温度が1ずつ増減するようになります。なお、最低温度は18、最高温度は28となります。
