Dynamic Mediaでの3Dアセットの操作

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

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

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

3D の靴

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

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

次のワークフローの手順説明は、Dynamic Media - Scene7モードで3Dアセットをすばやく使い始めるのに役立つように設計されています。

重要

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

Dynamic Mediaで3DCloud Servicesを操作する前に、Experience Manager管理者がDynamic Media - Scene7モードでDynamic Mediaアセットを有効にし、設定済みであることを確認してください。

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

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

  2. 3D アセットの管理

  3. 3D アセットの公開

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

この節では、3D アセットの表示およびインタラクション方法を、アセットの詳細ページ内から、または Sites の 3D メディアコンポーネント内からの 2 通り説明します。

このインタラクティブ 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には、Dynamic Media 3Dメディアコンポーネントが含まれており、Adobe Experience Manager Sitesで使用して、Webページ上で3Dモデルをインタラクティブに表示できます。

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

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

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

  3. 編集」を選択して、テンプレートを開きます。

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

    3d-media-component-structure

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

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

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

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

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

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

Webコンテンツ管理システムとしてExperience Managerを使用する場合は、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サイトページエディターで、アセット​アイコンを選択し、サイドパネルで​アセット​を開きます。

  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の取得も参照してください。

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

WCMとしてExperience Managerを使用する場合は、この公開方法を使用して、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​を選択して、Webページにコピーして使用できる3Dアセットの直接実稼動URLを表示できます。

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

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

  • URL - サードパーティの Web コンテンツ管理システムを使用していて、ディメンショナルビューアを使用して Dynamic Media 3D アセットを Web ページにリンクする場合は、「URL」を使用します。

    WebアプリケーションへのURLのリンクを参照してください。

  • 埋め込み - Web ページに埋め込まれた Dynamic Media 3D アセットをディメンショナルビューアで表示する場合は、「埋め込み」を使用します。埋め込みコードをクリップボードにコピーして、Web ページに貼り付けることができます。埋め込み​ダイアログボックスでは、コードの編集はできません。

    WebページにDynamic Mediaビデオ、画像ビューア、またはディメンショナルビューアを埋め込むを参照してください。

このページ