Dynamic Media での 3D アセットの使用 working-with-three-d-assets-dm

Dynamic Media を使用すると、3D アセットを、没入感のあるエクスペリエンスとしてアップロード、管理、表示および配信できます。

  • 3D アセットをワンクリックで公開(ツールバーの​ クイック公開 ​を使用)して URL を生成。
  • Adobe Dimension を使用した、高品質でインタラクティブなディメンショナルビューアプリセットで、3D アセットの表示のサポートを最適化。
  • 3D メディア WCM コンポーネントによって、Adobe Experience Manager Sites ページに 3D アセットを簡単に追加可能。

Dynamic Media で 3D アセットを使用するために、追加の設定は必要ありません。

3D の靴 3 次元の靴の詳細ページ。

Dynamic Media でサポートされる 3D 形式 supported-three-d-file-formats-in-dm

Dynamic Media は、次の 3D ファイル形式をサポートしています。

サポートされる 3D 形式も参照してください。

3D ファイル拡張子
ファイル形式
MIME タイプ
備考
GLB
バイナリ GL 伝送
model/gltf-binary
マテリアルとテクスチャを単一のアセットとして含めます。
OBJ
WaveFront 3D オブジェクトファイル
application/x-tgif
STL
ステレオリソグラフィ
application/vnd.ms-pki.stl
USDZ
汎用シーン記述 Zip アーカイブ
model/vnd.usdz+zip
取り込みのみサポート。表示やインタラクションは利用不可。 USDZ は専用の 3D 形式で、Safari や iOS でネイティブに表示できます。
NOTE
アセットの詳細ページの 3D メディア WCM コンポーネントと 3D プレビューは、最新バージョンの Chrome(97.x)と互換性がありません。3D アセットを操作するには、代わりに Firefox または Safari を使用するか、以前のバージョンの Chrome(96.x)を使用します。

クイックスタート:Dynamic Media 内の 3D アセット quick-start-three-d

次のワークフローの手順説明は、Dynamic Media - Scene7 モードの 3D アセットをすぐに使い始めることを目的としたものです。

IMPORTANT
3D アセットは、Dynamic Media - ハイブリッドモードではサポートされていません。

Dynamic Media の 3D アセットを操作する前に、Experience Manager の管理者が既に Dynamic Media - Scene7 モードで Dynamic Media クラウドサービスを有効にして設定を完了していることを確認してください。

「Dynamic Media - Scene7 モードの設定」の Dynamic Media クラウドサービスの設定および Dynamic Media - Scene7 モードのトラブルシューティングを参照してください。

3D アセットの表示とインタラクションについて viewing-three-d-assets

この節では、3D アセットの表示および操作を行う 2 つの方法として、アセットの詳細ページ内から行う方法と、Experience Manager Sites の 3D メディアコンポーネント内から行う方法を説明します。

このインタラクティブ 3D ビューアには、3D アセットをオービット、ズームおよびパンできる、インタラクティブなカメラコントロールのコレクションが含まれます。

アセットの詳細ページビューで 3D アセットを開くのにかかる時間は、いくつかの要因に依存します。要因には以下のものが含まれます。

  • サーバーの帯域幅
  • サーバーの待ち時間
  • 画像の複雑さ

さらに、カメラをインタラクティブに操作する際に、ワークステーション、ノートパソコン、モバイルタッチデバイスなどのクライアントコンピューターの性能を考慮することも重要です。グラフィック性能に優れ、ある程度パワフルなシステムなら、インタラクティブな 3D 表示をよりスムーズで満足なものにすることができます。

TIP
ディメンショナルビューアプリセットをビューアプリセットエディターで開いて、3D ファイルをアップロードせずに 3D アセット内を移動する練習ができます。ディメンショナルビューアプリセットには、操作できる組み込みの 3D アセットがあります。
詳しくは、ビューアプリセットの管理を参照してください。

アセットの詳細ページからの 3D アセットの表示とインタラクション viewing-three-d-assets-from-asset-details-page

ソフトウェアインターフェイスを使用したアセットのプレビュー も参照してください。

アセットの詳細ページから 3D アセットの表示とインタラクションを行うには:

  1. 3D アセットが Experience Manager にアップロードされていることを確認します。

    詳しくは、Dynamic Media で使用する 3D アセットのアップロードを参照してください。

  2. Experience Manager の​ ナビゲーション ​ページで​ アセットファイル ​に移動します。

  3. ページの右上隅付近にある「表示」ドロップダウンリストで「カード表示」を選択します。

  4. 表示する 3D アセットに移動します。

  5. 3D アセットのカードを選択します。

  6. 3D アセットの詳細表示ページで、次のいずれかの操作をおこないます。

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4 6-row-4
    表示 説明 マウス操作 タッチスクリーン操作
    カメラを回転 3D シーンとオブジェクトの周囲でビューを周回させます。 左クリックしながらドラッグします。 1 本指で押しながらドラッグします。
    カメラをパン ビューを左、右、上、下にパンします。 右クリックしながらドラッグします。 2 本指で押しながらドラッグします。
    カメラをズーム 3D シーンの領域の内外に移動します。 ホイールをスクロールします。 2 本指でピンチします。
    カメラを中心に戻す カメラを中心の位置に戻し、3D シーンのオブジェクトに合わせます。 ダブルクリックします。 ダブルクリックします。
    リセット ページの右下隅付近にあるリセットアイコンを選択して、視野のターゲットポイントを 3D アセットの中心に戻します。リセットを使用しても、アセット全体を表示したり、適切な表示サイズで表示するために、カメラを近づけたり遠ざけたりできます。
    全画面表示モード 全画面表示モードに入るには、ページの右下隅にある全画面表示アイコンを選択します。
  7. ページの右上隅にある「閉じる」を選択して、アセットページに戻ります。

3D メディアコンポーネント内の 3D アセットの表示とインタラクション interacting-with-asset-inside-three-d-media-component

Web ページが​ 編集 ​モードの場合、3D アセットとのインタラクションは行えません。アセットをインタラクティブにするには、プレビュー ​機能を使用して、3D メディアコンポーネントの機能にフルアクセスできるページエディターで Web ページを表示します。

IMPORTANT
このタスクは、3D メディアコンポーネントを Web ページに追加し、3D アセットをコンポーネントに割り当てた後にのみ実行できます。詳しくは、Web ページへの 3D メディアコンポーネントの追加および 3D メディアコンポーネントへの 3D アセットの割り当てを参照してください。

ソフトウェアインターフェイスを使用したアセットのプレビュー も参照してください。

3D メディアコンポーネント内の 3D アセットの表示とインタラクションを行うには:

  1. Web ページが​ 編集 ​モードの間に、次のいずれかの操作を行います。

    • ページ右上付近にある「プレビュー」をクリックして、プレビュー ​モードに入ります。
    • ブラウザーのページ URL から /editor.html を削除します。

    3D メディアコンポーネント内に表示される 3D アセット
    プレビュー ​モードで表示された完全にインタラクティブな 3D アセット。

  2. プレビュー ​モードの間に、次のいずれかの操作を行います。

    table 0-row-4 1-row-4 2-row-4 3-row-4 4-row-4 5-row-4 6-row-4
    表示 説明 マウス操作 タッチスクリーン操作
    カメラを回転 3D シーンとオブジェクトの周囲でビューを周回させます。 左クリックしながらドラッグします。 1 本指で押しながらドラッグします。
    カメラをパン ビューを左、右、上、下にパンします。 右クリックしながらドラッグします。 2 本指で押しながらドラッグします。
    カメラをズーム 3D シーンの領域の内外に移動します。 ホイールをスクロールします。 2 本指でピンチします。
    カメラを中心に戻す カメラを中心の位置に戻し、3D シーンのオブジェクトに合わせます。 ダブルクリックします。 ダブルクリックします。
    リセット ページの右下隅付近にあるリセットアイコンを選択して、視野のターゲットポイントを 3D アセットの中心に戻します。リセットを使用しても、アセット全体を表示したり、適切な表示サイズで表示するために、カメラを近づけたり遠ざけたりできます。
    全画面表示モード 全画面表示モードに入るには、ページの右下隅にある全画面表示アイコンを選択します。

3D メディアコンポーネントの操作について working-with-three-d-media-component

Dynamic Media には、web ページ上で 3D モデルのインタラクティブな表示を実現するために Adobe Experience Manager Sites で使用できる、Dynamic Media 3D メディアコンポーネントが含まれています。

ページテンプレートへの 3D メディアコンポーネントの追加 adding-three-d-media-component-to-page-template

  1. ツール一般テンプレート ​に移動します。

  2. 3D コンポーネントを有効にするページテンプレートに移動し、テンプレートを選択します。

  3. 編集」を選択すると、テンプレートを開くことができます。

  4. ページの右上付近にあるドロップダウンメニューで、「構造」モードを選択します(まだアクティブでない場合)。

    3d-media-component-structure

  5. レイアウトコンテナ」領域の空の領域を選択すると、関連するツールバーが開きます。

  6. ツールバーで、ポリシー ​アイコンを選択し、ポリシーエディターを開きます

  7. プロパティ」セクションの「許可されたコンポーネント」タブで、「Dynamic Media」までスクロールし、リストを展開して、「3D メディア」をチェックします。

  8. 完了」を選択して変更を保存し、ポリシーエディター ​を閉じます。

    これで、この Dynamic Media を使用するすべてのページに 3D メディアコンポーネントを配置できます。

Web ページへの 3D メディアコンポーネントの追加 adding-the-three-d-media-component-to-a-web-page

Experience Manager を web コンテンツ管理システムとして使用している場合は、3D メディアコンポーネントを使用して web ページに 3D アセットを追加できます。

ページへの Dynamic Media アセットの追加も参照してください。

Web ページに 3D メディアコンポーネントを追加するには:

  1. Experience Manager Sites を開き、Dynamic Media 3D メディアコンポーネントを追加する Web ページを選択します。

  2. 編集」(鉛筆)アイコンを選択すると、ページエディターでページを開くことができます。ページの右上付近で​ 編集 ​モードが選択されていることを確認します。

    3d-media-component-add

  3. ツールバーで、サイドパネルアイコンを選択して、パネルの表示を切り替えるか、「オン」にします。

  4. サイドパネルで、プラス記号アイコンを選択し、コンポーネント ​リストを開きます。

    3d-media-component-drag-drop

  5. コンポーネント ​リストから、3D メディア ​コンポーネントを、3D ビューアを表示するページ上の場所にドラッグします。

これで、3D アセットをコンポーネントに割り当てる準備が整いました。

詳しくは、3D メディアコンポーネントへの 3D アセットの割り当てを参照してください。

オプション - 3D メディアコンポーネントの設定 configuring-the-three-d-component

  1. Experience Manager Sites のページエディターで、前にページに追加した 3D メディアビューア ​コンポーネントを選択します。

  2. 設定」(レンチ)アイコンを選択すると、コンポーネント設定ダイアログボックスを開くことができます。

    3d-media-component-config

  3. 3D メディアダイアログボックスの「ビューアプリセット」ドロップダウンリストで、「ディメンション」を選択して、ディメンショナルビューアプリセットをコンポーネントに割り当てます。

    3d-media-component-edit-config

  4. 右上隅のチェックマークを選択して、変更を保存します。

3D メディアコンポーネントへの 3D アセットの割り当て assigning-a-three-d-asset-to-the-component

Web ページに 3D メディアコンポーネントを追加した後、3D アセットを割り当てることができます。

Web ページへの 3D メディアコンポーネントの追加を参照してください。

3D メディアコンポーネントに 3D アセットを割り当てるには:

  1. Experience Manager Sites のページエディターで、「アセット」アイコンをクリックして、サイドパネルの「アセット」を開きます。

  2. ドロップダウンリストで、「3D」を選択して 3D アセットファイルタイプのみを表示します。

  3. サイドパネルで、編集中のページに表示する 3D アセットを検索するか、スクロールして見つけます。

  4. 3D アセットを Assets サイドパネルからドラッグし、前にページに追加した 3D メディア ​コンポーネントにドロップします。

    3D メディアコンポーネントへの 3D アセットの割り当て

NOTE
Web ページが Experience Manager Sites 編集 ​モードの場合、3D メディアコンポーネントは 3D アセットを表示しますが、アセットとのインタラクションはできません。アセットをインタラクティブにするには、プレビュー ​機能を使用して、3D メディアコンポーネントの機能にフルアクセスできるページエディターで Web ページを表示します。

静的 Dynamic Media 3D アセットの公開 publishing-three-d-assets

Dynamic Media では、Dynamic Media で​ 静的コンテンツ ​としてサポートされる様々な 3D ファイル形式を使用できます。静的コンテンツとは、3D アセットをアップロードして公開することはできるものの、3D アセットに関連付けられた​ 変数イメージング ​や画像の再調整はサポートされていないことを意味します。これは、Dynamic Media Imaging サーバーが 3D 形式を認識しないためです。したがって、Dynamic Media で 3D アセットを公開すると、インスタント URL をコピーできます。3D アセットの URL は、通常の Dynamic Media の URL 構造に従います。ただし、Dynamic Media 内の従来の画像アセットとは異なり、アセットの URL 内のパラメーターは編集できません。

静的アセットの URL の取得 も参照してください。

カード表示 ​で、アセット名のすぐ下、アセットが発行されたことを示す日時の左側に、小さな地球アイコンが表示されます。リスト表示 ​では、公開されたアセットと公開されていないアセットが「公開」列でわかります。

Experience Manager を WCM として使用している場合は、この公開方法を使用して、Dynamic Media 3D アセットを web ページに直接追加します。

Dynamic Media アセットの公開 も参照してください。

ページの公開 も参照してください。

静的 Dynamic Media 3D アセットを公開するには:

  1. 3D アセット(GLB、OBJ または STL ファイル形式)を開くと、アセットの詳細ページに表示できます。

  2. ツールバーの「クイック公開」を選択します。

    3d-asset-quick-publish

  3. 閉じる」を選択してダイアログボックスを終了し、アセットの詳細ページに戻ります。

  4. 3D アセットのファイル名の左にあるドロップダウンリストから、「レンディション」を選択します。

    3d-asset-renditions

  5. オリジナル」を選択します。3D アセットが公開(「アクティブ化」)されると、次の 3D アセットの条件がすべて満たされた場合、「URL」ボタンがページの左下隅近くに表示されます。

    • 3D アセットがサポートされている形式(GLB、OBJ、STL、USDZ)。
    • 3D アセットが Dynamic Media 画像制作システム(IPS)に取り込まれている。
    • 3D アセットが公開されている。

    3d-asset-url

  6. URL」を選択すると、3D アセットのダイレクト実稼動 URL を表示できます。この URL は、コピーして web ページで使用できます。

ディメンショナルビューアを使用した、Dynamic Media 3D アセットの代替の公開方法 alternate-publish-methods

Experience Manager を WCM として使用して​ いない ​場合は、次の 2 つの方法で Dynamic Media 3D アセットを公開します。

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2