Show Menu
トピック×

ダイナミックメディアでの3Dアセットの操作

ダイナミックメディアでは、3Dアセットをイマーシブなエクスペリエンスとしてアップロード、管理、表示および配信できます。
  • 3Dアセットのワンクリックで公開(ツールバーの クイック公開 )してURLを生成
  • Adobe Dimensionを使用した高品質でインタラクティブなDimensionalビューアプリセットで、3Dアセットの表示のサポートを最適化しました。
  • 3D Media WCMコンポーネントを使用すると、3DアセットをAEMサイトのページに簡単に追加できます。
ダイナミックメディアで3Dアセットを使用する場合、追加の設定は必要ありません。

ダイナミックメディアでサポートされる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アセット

次の順を追ったワークフローに従って、ダイナミックメディア — Scene7モードで3Dアセットをすばやく習得できます。
3Dアセットは、ダイナミックメディア — ハイブリッドモードではサポートされていません。
ダイナミックメディアで3Dアセットを操作する前に、AEM管理者がダイナミックメディア — Scene7モードでDynamic Media Cloud Servicesを有効にし、設定済みであることを確認してください。
「Dynamic Media - Scene7 モードの設定」の Dynamic Media クラウドサービスの設定 、および Dynamic Media - Scene7 モードのトラブルシューティング を参照してください。
  1. 3Dアセットのアップロード
  2. 3Dアセットの管理
  3. 3Dアセットのパブリッシュ

3Dアセットの表示と操作について

この節では、3Dアセットの表示方法と操作方法を2通り説明します。 アセットの詳細ページ内、およびサイトの3Dメディアコンポーネント内から
インタラクティブ3Dビューアには、3Dアセットの軌道回転、ズーム、パンを行うことができる、インタラクティブカメラコントロールの集まりが含まれます。
アセットの詳細ページの表示で3Dアセットを開くのに要する時間は、いくつかの要因に依存します。 以下の要因が含まれます。
  • サーバーへの帯域幅。
  • サーバーの待ち時間
  • 画像の複雑さ。
また、ワークステーション、ノート、モバイルタッチデバイスなどのクライアントコンピュータの機能も、カメラをインタラクティブに操作する場合には考慮する必要があります。 グラフィック性能に優れ、ある程度パワフルなシステムなら、インタラクティブな 3D 表示をよりスムーズで満足なものにすることができます。
次元ビューアプリセットをビューアプリセットエディタで開いて、3Dファイルをアップロードしなくても3Dアセット内を移動する練習をすることができます。 Dimensionalビューアプリセットには、操作できる組み込みの3Dアセットがあります。

アセットの詳細ページからの3Dアセットの表示と操作

ソフトウェアインターフェイスを使用したアセットの プレビューも参照してください
アセットの詳細ページから3Dアセットを表示し、操作するには
  1. 3D アセットが AEM にアップロードされていることを確認します。
    詳しくは、ダイナミックメディアで使用する3Dアセットの アップロードを参照してください。
  2. AEM の​ ナビゲーション ​ページで、 アセット/ファイル ​をタップします。
  3. Near the upper-right corner of the page, from the View drop-down list, tap Card View .
  4. 表示する 3D アセットに移動します。
  5. 3D アセットのカードをタップして、アセットの詳細ページで開きます。
  6. 3Dアセットの詳細表示ページで、次のいずれかの操作を行います。
    • カメラの回転 - 3Dシーンとオブジェクトの周りに表示を回転させます。
      • マウス :左クリックしながらドラッグします。
      • タッチスクリーン :1 本指で押しながらドラッグします。
    • カメラのパン -表示を左、右、上、下にパンします。
      • マウス :右クリックしながらドラッグします。
      • タッチスクリーン :2 本指で押しながらドラッグします。
    • カメラのズーム — カメラをズームして、3Dシーンの領域内外を移動します。
      • マウス :ホイールをスクロールします。
      • タッチスクリーン :2 本指でピンチします。
    • カメラを再入力 - 3Dシーン内のオブジェクト上の点にカメラを再入力します。
      • マウス :ダブルクリックします。
      • タッチスクリーン :ダブルタップします。
    • リセット — ページ右下付近のリセットアイコンをタップし、表示ターゲットポイントを3Dアセットの中央に戻します。 リセットを使用しても、アセット全体を表示したり、適切な表示サイズで表示するために、カメラを近づけたり遠ざけたりできます。
    • フルスクリーンモード — フルスクリーンモードに切り替えるには、ページ右下隅のフルスクリーンアイコンをタップします。
  7. ページの右上隅にある「 閉じる 」をタップして、アセットページに戻ります。

3Dメディアコンポーネント内の3Dアセットの表示と操作

Webページが 編集 モードの場合、3Dアセットとのやり取りはできません。 アセットをインタラクティブにするには、 プレビュー 機能を使用して、3D Mediaコンポーネントの機能にフルアクセスして、ページエディターでWebページを表示します。
このタスクは、3DメディアコンポーネントをWebページに追加し、3Dアセットをコンポーネントに割り当てた後にのみ実行できます。 詳しくは、Webページへの3Dメディアコンポーネントの 追加 および3Dメディアコンポーネントへの3Dアセットの 割り当てを参照してください。
ソフトウェアインターフェイスを使用したアセットの プレビューも参照してください。
3D Mediaコンポーネント内の3Dアセットを表示し、操作するには
  1. Webページが 編集モードの間に 、次のいずれかの操作を行います。
    • ページ右上付近にある「 プレビュー 」をクリックして プレビュー モードに入ります。
    • ブラウザー /editor.html のページURLから削除します。
完全にインタラクティブな3Dアセット( 完全にインタラクティブな3Dアセット ( プレビューモードで表示される)。
  1. プレビュー ・モードの間に、次のいずれかの操作を行います。
    • カメラの回転 - 3Dシーンとオブジェクトの周りに表示を回転させます。
      • マウス :左クリックしながらドラッグします。
      • タッチスクリーン :1 本指で押しながらドラッグします。
    • カメラのパン -表示を左、右、上、下にパンします。
      • マウス :右クリックしながらドラッグします。
      • タッチスクリーン :2 本指で押しながらドラッグします。
    • カメラのズーム — カメラをズームして、3Dシーンの領域内外を移動します。
      • マウス :ホイールをスクロールします。
      • タッチスクリーン :2 本指でピンチします。
    • カメラを再入力 - 3Dシーン内のオブジェクト上の点にカメラを再入力します。
      • マウス :ダブルクリックします。
      • タッチスクリーン :ダブルタップします。
    • リセット — ページ右下付近のリセットアイコンをタップし、表示ターゲットポイントを3Dアセットの中央に戻します。 リセットを使用しても、アセット全体を表示したり、適切な表示サイズで表示するために、カメラを近づけたり遠ざけたりできます。
    • フルスクリーンモード — フルスクリーンモードに切り替えるには、ページ右下隅のフルスクリーンアイコンをタップします。

3D Mediaコンポーネントの操作について

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

Adding the 3D Media component to the page template

  1. ツール/一般/テンプレート ​に移動します。
  2. 3D コンポーネントを有効にするページテンプレートに移動し、テンプレートを選択します。
  3. Tap Edit to open the template.
  4. ページの右上付近にあるドロップダウンメニューで、「 構造 」モードを選択します(まだアクティブでない場合)。
  5. レイアウトコンテナ 」領域の空の領域をタップして選択し、関連するツールバーを開きます。
  6. ツールバーで、 ポリシー アイコンをタップし、 ポリシーエディターを開きます
  7. プロパティ 」セクションの「 許可されているコンポーネント 」タブで、「 ダイナミックメディア 」までスクロールし、リストを展開して、「 ​3Dメディア」を確認します。
  8. 完了 」をタップして変更を保存し、 ポリシーエディターを閉じます
    これで、このテンプレートを使用するすべてのページに、ダイナミックメディア3Dメディアコンポーネントを配置できます。

Adding the 3D Media component to a web page

Webコンテンツ管理ーシステムとしてAdobe Experience Managerを使用している場合は、3D Mediaコンポーネントを使用してWebページに3Dアセットを追加できます。
  1. AEMサイトを開き、ダイナミックメディア3Dメディアコンポーネントを追加するWebページを選択します。
  2. Tap the Edit (pencil) icon to open the page into the page editor. ページの右上付近で 「編集 」モードが選択されていることを確認します。
  3. ツールバーで、サイドパネルアイコンをタップして、パネルの表示を切り替えるか、「オン」にします。
  4. サイドパネルで、プラス記号アイコンをタップし、 コンポーネント リストを開きます。
  5. 3D Media コンポーネントをコンポーネント ​リストから、3Dビューアを表示するページ上の場所にドラッグします。
これで、3Dアセットをコンポーネントに割り当てる準備が整いました。
詳しくは、3Dメディアコンポーネントへの3Dアセットの 割り当てを参照してください。

オプション — 3Dメディアコンポーネントの設定

  1. In the AEM Sites page editor, select the 3D Media Viewer component that you previously added to the page.
  2. Tap the Configuration icon (wrench) to open the component configuration dialog box.
  3. 3Dメディアダイアログボックスの「ビューアプリセット」ドロップダウンリストで、「 次元 」を選択して、次元ビューアプリセットをコンポーネントに割り当てます。
  4. 右上隅のチェックマークをタップして、変更を保存します。

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

Webページに3Dメディアコンポーネントを追加した後、3Dアセットを割り当てることができます。
  1. In the AEM Sites page editor, click the Assets icon to open Assets in the side panel.
  2. ドロップダウンリストで、 3D を選択して3Dアセットファイルタイプのみを表示します。
  3. サイドパネルで、編集するページ上で表示する3Dアセットを検索またはスクロールします。
  4. 3Dアセットをアセットサイドパネルからドラッグし、前にページに追加した 3D Media コンポーネントにドロップします。
WebページがAEMサイトの 編集 モードの場合、3D Mediaコンポーネントは3Dアセットを表示しますが、アセットとのやり取りは不可能です。 アセットをインタラクティブにするには、 プレビュー 機能を使用して、3D Mediaコンポーネントの機能にフルアクセスして、ページエディターでWebページを表示します。

静的ダイナミックメディア3Dアセットの公開

ダイナミックメディアには、ダイナミックメディアで 静的コンテンツとしてサポートされる様々な3Dファイル形式があり 、 静的コンテンツとは、3Dアセットをアップロードして公開することはできますが、3Dアセットに関連付けられた ダイナミック イメージングや画像の再編集はサポートされていないことを意味します。 理由は、Dynamic Media Imaging Serverが3D形式を認識しないからです。 したがって、ダイナミックメディアで3Dアセットを公開すると、インスタントURLをコピーできます。 3DアセットのURLは、通常のダイナミックメディアのURL構造に従います。 ただし、ダイナミックメディアの従来の画像アセットとは異なり、アセットのURL内のパラメーターを編集することはできません。
カー ド表示では 、アセット名のすぐ下、アセットが公開されたことを示す日時の左側に、小さなグローブアイコンが表示されます。 リスト表示 ​では、公開されたアセットと公開されていないアセットが「 公開 」列でわかります。
WCMとしてAEMを使用している場合は、この公開方法を使用してダイナミックメディア3DアセットをWebページに直接追加します。
静的ダイナミックメディア3Dアセットを公開するには
  1. 3Dアセット(GLB、OBJ、またはSTLファイル形式)を開き、アセットの詳細ページに表示します。
  2. On the toolbar, tap Quick Publish .
  3. 閉じる 」をタップしてダイアログボックスを終了し、アセットの詳細ページに戻ります。
  4. 3Dアセットのファイル名の左にあるドロップダウンリストから、「 レンディション 」をタップします。
  5. オリジナル 」をタップします。 3Dアセットが公開(「アクティブ化」)されると、次の3Dアセットの条件がすべて満たされた場合、 URL ボタンがページの左下隅近くに表示されます。
    • 3Dアセットはサポートされている形式(GLB、OBJ、STL、USDZ)です。
    • 3Dアセットがダイナミックメディアイメージ制作システム(IPS)に取り込まれました。
    • 3Dアセットが公開されます。
  6. URL 」をタップして3Dアセットの直接実稼動URLを表示し、Webページにコピーして使用できます。

Dimensionalビューアを使用してダイナミックメディア3Dアセットを公開するための代替方法

AEMをWCMとして使用していない場合は、ダイナミックメディア3Dアセットを公開するには 、次の 2つの方法を使用します。
  • URL — サードパーティのWebコンテンツ管理ーシステムを使用していて、Dimensional Viewerを使用してダイナミックメディア3DアセットをWebページにリンクする場合は、 ​URLを使用します。
  • 埋め込み - Webページに埋め込まれたダイナミックメディア3Dアセットを、ディメンションビューアを使用して表示する場合に、「 埋め込み 」を使用します。 埋め込みコードをクリップボードにコピーして、Web ページに貼り付けることができます。Editing of the code is not permitted in the Embed dialog box.
    詳しくは、ダイナミックメディアビデオ、画像ビューアまたはディメンションビューアのWebページへの埋め込みを参照してください。 Embedding the Dynamic Media Video, Image viewer, or Dimensional viewer on a web page