Dynamic Media での 3D アセットの使用

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

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

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

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

Dynamic Media でサポートされる 3D 形式

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 でネイティブに表示できます。
メモ

アセットの詳細ページの 3D メディア WCM コンポーネントと 3D プレビューは、最新バージョンの Chrome(97.x)と互換性がありません。3D アセットを操作するには、代わりに Firefox または Safari を使用するか、以前のバージョンの Chrome(96.x)を使用します。

クイックスタート:Dynamic Media 内の 3D アセット

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

重要

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

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

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

  1. 3D アセットのアップロード

  2. 3D アセットの管理

  3. 3D アセットの公開

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

この節では、次の 2 つの方法で 3D アセットの表示とインタラクションをおこなう方法について説明します。をクリックします。また、Experience Manager Sitesの 3D メディアコンポーネント内からアクセスすることもできます。

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

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

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

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

ヒント

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

詳しくは、ビューアプリセットの管理を参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

重要

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

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

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

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

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

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

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

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

3D メディアコンポーネントの操作について

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

ページテンプレートへの 3D メディアコンポーネントの追加

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

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

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

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

    3d-media-component-structure

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

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

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

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

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

Web ページへの 3D メディアコンポーネントの追加

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 メディアコンポーネントの設定

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

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

    3d-media-component-config

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

    3d-media-component-edit-config

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

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

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

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

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

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

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

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

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

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

メモ

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

静的 Dynamic Media 3D アセットの公開

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 アセットの代替の公開方法

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

このページ