玩具カスタマイザー

Toy CustomizerはQMLで構築されたインタラクティブな3Dアプリケーションで、3Dアクセサリや顔の特徴をリアルタイムにおもちゃに装着することで、おもちゃのキャラクターをパーソナライズすることができます。このアプリケーションは Qt Quick 3Dシーンと標準 Qt Quick Controls直感的なユーザーインターフェースのために。

例の実行

からサンプルを実行するには Qt Creatorからサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択してください。詳細については、Qt Creator:Tutorialを参照してください：ビルドと実行。

概要

この例では、3Dおもちゃのモデルをリアルタイムでレンダリングします。 Qt Quick 3D.ユーザーインターフェースにより、ユーザーは3Dビューで結果を見ながら、さまざまなおもちゃを選択したり、さまざまな3Dアクセサリーや顔のアイテムを取り付けたり、それらのアクセサリーの色を調整したりすることができます。

レイアウトは縦向きと横向きの両方に適応し、このサンプルは WebAssembly (WASM) プラットフォームでも実行できます; 詳細はQt for WebAssembly を参照してください。

詳細は Qt for WebAssembly を参照してください：

• PrincipledMaterial を使って、おもちゃのモデルに物理ベースのマテリアルを定義しています。
• 2D QMLコントロールを3Dシーンと組み合わせる。
• 再利用可能なQMLファイルでコンポーネントを整理し、構造を改善。
• 3Dシーン上でドラッグすることにより、3Dプレビューでおもちゃを回転できるようにする。
• Timeline とTimelineAnimation を使って、最初のページにおもちゃの短い入場アニメーションとダンスアニメーションを追加。

アプリケーションの構造

メインQMLファイル（Main.qml ）は、メインアプリケーションウィンドウを定義し、6つのページ間のナビゲーションを管理します。

• 最初のページ: おもちゃは視界に入ってきて、順番に短いダンスアニメーションを行います。
• ギャラリーページ：おもちゃのグリッドが表示され、ユーザーが選択できます。
• 確認ページ：選択したおもちゃの詳細を表示し、確認を求めます。
• カスタマイズページ：アクセサリーとおもちゃの名前を選択します。
• 注文概要ページ：完了する前に現在の注文を要約します。
• 最終ページ: 注文が完了したことを確認し、新しい注文を開始します。

アセット

アセットがまだ存在しない場合は、ビルド時にダウンロードされます。ダウンロードが完了すると、圧縮アーカイブが展開されます。それ以降のビルドでは、抽出されたアセットファイルのいずれかが変更されている場合、必要なアセットがすべて利用可能であることを確認し、ランタイムの失敗を回避するために、アーカイブが再度抽出されます。アセットの問題やアセット パッケージの更新が原因でビルドが失敗した場合、クリーン ビルドを実行すると、ダウンロードしたアーカイブと抽出したファイルの両方が削除されるため、次のビルドは新しい状態から開始できます。

アニメーション

最初のページにはView3D があります。Texture は、3Dおもちゃに画像ベースの照明を提供するHDRlight probe として使用されます。PerspectiveCamera 、SpotLight ノードが追加され、アニメートされたおもちゃをフレーム化し、シーン上で歩いたり踊ったりする動きを強調します。

キャラクタのスキンメッシュを駆動するSkin コンポーネントがあり、親Node はシーン内でおもちゃのキャラクタを位置決めし、変形させるラッパーとして機能します。歩行とダンスは、TimelineAnimation によって再生されるTimeline によって制御されます。アニメーション データは、KeyframeGroup とKeyframe 要素を使用して定義されるか、keyframeSource を介してバイナリ データからロードされ、キャラクタの動きのキーフレームを提供します。

また、この例では、base color 、roughness 、culling mode 、opacity を含むアニメーション キャラクタの物理ベースの外観を定義するために、共有PrincipledMaterial を使用しています。マテリアルは、texture maps をベースカラーに使用し、normal data は、モデルから URL として提供され、Texture オブジェクトにバインドされてロードされます。AnimationModel.qml は、アニメートされたおもちゃのデータモデルとして機能し、テクスチャとメッシュソース、および各おもちゃの目の位置や回転などの追加メタデータを保存します。

レスポンシブUI

UIは、異なるウィンドウ・サイズやorientations に対応するように設計されています。 おもちゃのギャラリー・ページ（ToyGalleryPage.qml ）では、grid おもちゃのカードがはっきりと見えるように、利用可能な幅に応じて列の数を自動的に調整し、portrait とlandscape のどちらのモードでも一貫したルック＆フィールを維持します。

他のページでは、portrait とlandscape のビューに異なるレイアウトが使用されます。landscape ではアイテムは横並びに配置され、portrait ではコンテンツが縦にスタックするようにシングルカラムレイアウトが使用されます。LayoutItemProxy は、UI 定義を重複させることなく、これらのレイアウト内でアイテムを配置するために使用されます。

アイテムのサイズ、マージン、フォントなど、いくつかのデザイン値は異なるベース解像度で指定されているため、この例ではApplicationConfig.qml を使用して、実際の画面解像度に応じてこれらの値をスケーリングしています。このファイルには、タイポグラフィ設定、フォントファミリー、元のデザイン仕様に由来するウィンドウのジオメトリ定数も一元化されています。

インタラクティブ3Dビュー

カスタマイズページ(ToyCustomizePage.qml)では、3D view 、選択されたアクセサリーと一緒におもちゃが表示されます。玩具は、Node ルートで表現され、それぞれのボディパーツは、Node としてモデル化されています。3Dビューは、OrbitCameraController.qml を通してインタラクティブに表示され、ユーザは、DragHandler が回転ジェスチャーを処理する間、おもちゃを回転させ、付属のアクセサリ3D models をさまざまな角度から調べることができます。

ソースファイル

サンプルプロジェクト @ code.qt.io