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

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

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

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で3Dアセットを操作する前に、Experience Manager管理者がDynamic Media-Scene7モードでDynamic MediaCloud Servicesを有効にし、設定していることを確認してください。

「Dynamic Media - Scene7 モードの設定」の 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 シーンとオブジェクトの周囲でビューを周回させます。 左クリックしながらドラッグします。 一本指で押しながらドラッグします。
    カメラのパン 表示を左、右、上または下にパンします。 右クリックしながらドラッグします。 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 シーンとオブジェクトの周囲でビューを周回させます。 左クリックしながらドラッグします。 一本指で押しながらドラッグします。
    カメラのパン 表示を左、右、上または下にパンします。 右クリックしながらドラッグします。 2本指で押しながらドラッグします。
    カメラのズーム 3Dシーンの領域の内外を移動します。 スクロールホイール 2本指のピンチ。
    カメラを再入力 3Dシーン内のオブジェクト上の点にカメラを再入力します。 ダブルクリック. ダブルタップ.
    リセット ページ右下隅近くにあるリセットアイコンをタップして、表示ターゲットポイントを3Dアセットの中央に戻します。 リセットを使用しても、アセット全体を表示したり、適切な表示サイズで表示するために、カメラを近づけたり遠ざけたりできます。
    全画面表示モード フルスクリーンモードに切り替えるには、ページ右下隅のフルスクリーンアイコンをタップします。

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

Dynamic Media には、Dynamic Media 3D メディアコンポーネントが含まれており、AEM Sites で使用して、Web ページ上で 3D モデルをインタラクティブに表示できます。

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

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

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

  3. 編集」をタップしてテンプレートを開きます。

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

    3d-media-component-structure

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

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

  7. プロパティ」セクションの「許可されているコンポーネント」タブで、Dynamic Media​までスクロールし、リストを展開して「3D Media.」を確認します。

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

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

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

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

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

  1. AEM 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. AEM Sites のページエディターで、前にページに追加した 3D メディアビューア​コンポーネントを選択します。

  2. 設定​アイコン(レンチ)をタップして、コンポーネント設定ダイアログボックスを開きます。

    3d-media-component-config

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

    3d-media-component-edit-config

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

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

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

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

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

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

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

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

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

メモ

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

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

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

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

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

WCMとしてExperience Managerを使用する場合は、このパブリッシング方法を使用して、Dynamic Media3DアセットをWebページに直接追加します。

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

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

静的なDynamic Media3Dアセットをパブリッシュするには:

  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 を表示し、Web ページにコピーして使用できます。

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

WCMとしてExperience Managerを使用​しない​場合は、次の2つの方法でDynamic Media3Dアセットをパブリッシュします。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now