おもちゃのカスタマイズツール

「Toy Customizer」は、QMLで構築されたインタラクティブな3Dアプリケーションであり、ユーザーは3Dアクセサリーや顔の特徴を玩具に配置し、リアルタイムで玩具キャラクターをカスタマイズすることができます。この例では、Qt Quick 3Dシーンと標準のQt Quick コントロールを組み合わせて、直感的なユーザーインターフェースを実現する方法を示しています。

例の動作確認

このサンプルは、以下の手順で実行できます。

• Qt Creator

  Welcome モードを開き、Examples からこのサンプルを選択します。詳細については、Qt Creator の「チュートリアル: ビルドと実行」を参照してください。

• Qt Extension for Visual Studio Code

  Command Palette から `Qt: Open Qt examples ` コマンドを実行し、リストからサンプルを選択します。詳細については、Qt Extension for Visual Studio Code の「チュートリアル：ビルドと実行」を参照してください。

概要

このサンプルでは、Qt Quick 3D を使用してリアルタイムでレンダリングされる 3D おもちゃモデルを紹介しています。ユーザーインターフェースでは、ユーザーはさまざまな玩具から選択したり、さまざまな 3D アクセサリーや顔のアイテムを取り付けたり、3D ビューで結果を表示しながらそれらのアクセサリーの色を調整したりすることができます。

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

この例の主な特徴は以下の通りです：

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

アプリケーションの構造

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

• 最初のページ：おもちゃが画面内に登場し、短いダンスアニメーションを順番に実行します。
• ギャラリーページ：おもちゃがグリッド状に表示され、ユーザーは1つを選択できます。
• 確認ページ：選択したおもちゃの詳細が表示され、確認が求められます。
• カスタマイズページ：ユーザーがアクセサリーやおもちゃの名前を選択します。
• 注文概要ページ：注文を確定する前に、現在の注文内容をまとめます。
• 最終ページ：注文が完了したことを確認し、ユーザーが新しい注文を開始できるようにします。

アセット

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

アニメーション

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

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

また、この例では、PrincipledMaterial を共有して、base color 、roughness 、culling mode 、opacity などを含む、アニメーション化されたキャラクターの物理ベースの外観を定義しています。 このマテリアルでは、ベースカラーとして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 を通じてインタラクティブになっており、ユーザーはおもちゃを回転させたり、取り付けられた付属品3D models をさまざまな角度から確認したりできます。一方、DragHandler が回転ジェスチャーを処理します。

ソースファイル

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