3Dサイトコンポーネントの操作

AEM 3Dには、3Dモデルのインタラクティブな表示をWebページに実装するためのAEM Sitesコンポーネントが含まれています。

3Dコンポーネントを追加した後、そのコンポーネント内の3Dアセットを表示できます。

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

ページ上に配置する前に、ページ内で3Dコンポーネントを有効にする必要があります。 テンプレートでのコンポーネントの有効化について詳しくは、テンプレートの編集を参照してください。

ページテンプレートへの 3D コンポーネントの追加:

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

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

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

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

    image2017-11-14_15-33-57

  5. レイアウトコンテナ​の領域をタップして選択します。

  6. ポリシー」ボタンをタップして、ポリシーエディター​を開きます。

  7. プロパティ」セクションで、3D​チェックマークを選択し、「完了」をタップして変更を保存し、ポリシーエディター​を閉じます。

    これで、このテンプレートを使用するすべてのページに3Dサイトコンポーネントを配置できます。

Web ページへの 3D ビューアコンポーネントの追加

注意

このバージョンの AEM 3D では、Web ページごとに 3D コンポーネントのインスタンスを 1 つだけサポートします。同じページ上の複数の3Dコンポーネントが正しく機能しません。

3D ViewerコンポーネントをWebページに追加するには:

  1. AEM Sitesを開き、3Dコンポーネントを追加するWebページを選択します。

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

    image2017-11-14_15-44-40

  3. パネルセレクターをタップして、サイドパネルを開きます。

  4. プラス記号アイコンをタップして、コンポーネント​リストを開きます。

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

3D コンポーネントの設定

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

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

    次のコンポーネントプロパティを設定できます。

    プロパティ 説明 適用性
    高さ (px) 3D コンポーネントの目的の高さをピクセル単位で指定します。空の場合、デフォルトの 600 ピクセルになります。
    Stage Name

    使用可能なステージのリストから 3D ステージを選択します。ステージは背景とライティングを提供します。

    AEM 3Dサイトでのステージの使用についてを参照してください。

    Adobe Dimensionアセットでは無視されます。
    自動スピン速度(RPM)

    3D ビューアは、読み込みとリセットの後に、カメラの周りを継続的に回ります。自動スピンは、ユーザーが手動で周回操作を開始すると終了します。

    次の値を使用して、RPMでスピン速度を指定できます。

    • 正の値を設定して右へスピン
    • 負の値を左スピンに設定します
    • 0を設定すると、自動スピンが無効になります。

    デフォルトは3 RPMで、完全な回転あたり20秒に相当します。

    注意:スピン の速度は、60/秒のフレームレートを前提とします。この速度は、通常、より強力なグラフィックスハードウェア上の小さいモデルから適度なサイズのモデルで達成されます。 大きいモデルや低速のデバイスは、低い速度で自動スピンします。

    Adobe Dimensionアセットでは無視されます。
    ナビゲーションボタンの色 カラーピッカーを使用して、ビューアのコントロールボタンのメインの色を選択します。 Adobe Dimensionアセットでは無視されます。
    ナビゲーションカーソルを合わせたときの色 カラーピッカーを使用して、ビューアのコントロールボタンのポイント時および選択時の色を選択します。 Adobe Dimensionアセットでは無視されます。
    スウォッチを表示 将来的に使用するため。 Adobe Dimensionアセットでは無視されます。
    GLTFカメラプリセットを表示 Adobe Dimensionアセットに存在する可能性のあるカメラプリセットを表示または非表示にします。 Adobe Dimension資産のみ。
    GLTF背景色 3Dモデルに背景が含まれない場合のデフォルトの背景色。 Adobe Dimension資産のみ。
  3. チェックマークをタップして、変更内容を保存します。

    コンポーネント設定ダイアログで使用できる設定に加えて、多くのグローバル設定を使用でき、CRXDE Liteを使用して変更できます。
    これらのグローバル設定について詳しくは、詳細設定を参照してください。

コンポーネントへの 3D モデルの割り当て

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

  2. 不要なアセットタイプを非表示にするには、3Dモデル​フィルタを選択します。

    screen_shot_2017-12-11at124258

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

  4. 3Dアセットを​アセット​リストから、前にページに配置した​3Dビューア​コンポーネントにドラッグします。

    Adobe Dimensionアセットは、glTFオープン標準に基づく新しいビューア技術を使用してレンダリングされますが、他のすべての3Dアセットタイプは、従来のAEM 3D webGLビューアに依存します。 3Dモデルのタイプに基づいて、適切なビューアが自動的に選択されます。

3Dコンポーネントを含むWebページのプレビュー

Webページが​編集​モードの間、3Dコンポーネントは3Dモデルを表示しますが、モデルとのやり取りは不可能です。

3Dコンポーネントの機能に完全にアクセスして、ページエディターでWebページをプレビューできます。

サイト3Dコンポーネントでの3Dアセットの表示」も参照してください。

3Dコンポーネントを含むWebページをプレビューするには:

  1. 次のいずれかの操作をおこないます。

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

ページとアセットの公開

アセットの公開方法について詳しくは、アセットの公開を参照してください。ページの公開方法について詳しくは、ページの公開を参照してください。

メモ

ページ情報​メニューの​発行ページ​メニュー項目を使用すると、ページとすべてのプライマリページの依存関係が発行されます。 この方法でページを公開した場合、3D モデルや 3D ステージで参照される可能性のあるセカンダリの依存関係(テクスチャマップや IBL 画像など)は公開されません。

Adobeでは、3Dアセットを参照するWebページを公開する前に、すべての3Dアセットとその依存関係をAEM Assetsから直接公開することをお勧めします。

このページ