3D アセットの表示

重要

AEM 6.4でのAEM 3Dのサポートは終了しました。 Adobeでは、AEMの3Dアセット機能をCloud ServiceまたはAEM 6.5.3以降として使用することをお勧めします。 を表示3Dアセットに追加します。

このドキュメントでは、3D アセットをアセットの詳細で表示する方法と 3D コンポーネント内のアセットをサイトで表示する方法の両方について説明します。

アセットの詳細ページでの 3D アセットの表示

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

chlimage_1-139

AEM 3D のデフォルトのステージを使用する他に、サードパーティ製アプリケーションで作成して AEM にアップロードしたステージも使用できます。

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

メモ

3D アセットを表示するには、デバイスまたはデスクトップのブラウザーが WebGL に対応している必要があります。また、基盤となるグラフィックハードウェアには、目的のサイズと複雑度のモデルをレンダリングできるだけの性能とメモリが必要です。シャドウの表示などの特定のプレビュー機能は、すべてのブラウザーで利用できません。

3D アセットを表示する際のパフォーマンスに関する考慮事項

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

  • サーバーへの帯域幅と遅延。
  • モデルサイズ(面の数)。
  • マップの数とサイズ。
  • ステージの複雑さ。例えば、IBL 画像のサイズなどです。

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

表示3Dアセット:

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

    AEM での 3D アセットのアップロードと処理を参照してください。

  2. AEMの​ナビゲーション​ページで、アセット​をタップします。

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

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

  5. 3D アセットのカードをタップして、アセットの詳細ページで開きます。

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

    • アセットの詳細ページの右下隅にあるカメラコントロールパレットを使用して、アセットの様々な表示を変更します。

      従来の Apple のシングルボタンマウスなど、スクロールホイールのない非接触型入力デバイスを使用している場合は、ズームモードまたはパースペクティブモードでも 3D アセットのズームまたはパースペクティブを変更できます。このアクションは、SHIFT キーを押しながらマウスボタンを押して上または下方向にドラッグすることによって、実行します。

      一般的なノートコンピューターのタッチパッドを使用していると、多くの場合、2 本指を使用したジェスチャでズーム動作またはパースペクティブ動作をコントロールすることは困難です。そのような場合は、SHIFT キーを押しながらアクションを実行します。そうすると、ピンチジェスチャの速度が低下し、必要とする正確なズームレベルまたはパースペクティブを実現しやすくなります。または、SHIFTキーを押しながら1本の指で上下にドラッグして、ズームや遠近法の動作に影響を与えることもできます。

    カメラコントロール名
    説明

    ズーム

    または

    パースペクティブ

    タップまたはクリックしてズームモードとパースペクティブモードを切り替えます。

    または、ALT/OPTION キーを押しながらアクションを実行して、一時的にパースペクティブモードに切り替えます。
    キーを放すとズームモードに戻ります。

    • ズーム — ドリーインおよびドリーアウトの動作で、カメラを表示しているアセットに近づくか遠ざけ
      ます。ズームは、マウスのスクロールホイール(利用可能な場合)、モバイルデバイスでの 2 本の指によるピンチ操作、あるいは Shift キーを押したまま左マウスボタンを使用して上または下にドラッグしたときのデフォルトの動作です。
    • パースペクティブ-表示内のアセットの相対サイズを維持しながら、表示の焦点距離(の場とも呼ばれます)を変更します。パースペクティブは、スクロールホイール(利用可能な場合)、モバイルデバイスでの 2 本の指によるピンチ操作、あるいは Shift キーを押したまま左マウスボタンを使用して上または下にドラッグする動作の代替の動作です。

    オービット

    または

    パン

    タップまたはクリックしてオービットモードとパンモードを切り替えます。

    または、ALT/OPTION キーを押しながらアクションを実行して、一時的にパンモードに切り替えます。キーを放すとオービットモードに戻ります。

    • [軌道]:3Dアセットの中心付近にあるターゲット点を中心とする球上のビューカメラを既定値に移動します。オービットは、モバイルデバイスでの左ボタンドラッグまたはシングルタッチドラッグのデフォルトの動作です。
    • [パン]:ビュー平面内のカメラを移動します。ターゲットポイントはカメラ対応して移動するので、以降のオービットアクションでは、カメラは新しいターゲットポイントを中心として移動します。パンは、左ボタンドラッグおよびシングルタッチドラッグの代替動作です。

    調査

    または

    ターゲット

    タップまたはクリックして調査モードとターゲットモードを切り替えます。

    • Examine-Tapキーを押すか、クリックしてターゲットモードに入ります。
    • ターゲット- 3Dアセットの任意の場所をタップまたはクリックして、アセットのその部分の表示を中央に配置します。
      オービットアクションでは、新しいターゲットポイントが使用されます。
    リセット タップまたはクリックして、視野のターゲットポイントをモデルの中心に戻します。リセットでも、アセット全体を表示したり、適切な表示サイズで表示するために、カメラを近づけたり遠ざけたりします。
    • アセットの詳細ページの右上隅近くにある​ステージセレクター​アイコンをタップします。 3D アセットに適用する背景とライティングを含むステージ名を選択します。

    chlimage_1-140

    ステージは、3Dモデルが表示される環境 — 背景、接地面、照明を提供します。

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

    • アセットの詳細ページの右上隅近くにある「カメラセレクター」アイコンをタップし、3Dアセットに適用するカメラ表示を選択します。

    chlimage_1-141

    多くの場合、ステージには事前定義済みのカメラが含まれています。現在のカメラを再選択して、事前定義済みの設定に戻すことができます。

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

  7. ページの右上隅にある「保存」をタップします。

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

    • 3D アセットをレンダリングします。

      3D アセットのレンダリングを参照してください。

    • ページの右上隅にある「閉じる」をタップして、アセットページに戻ります。

Sites 3D コンポーネント内の 3D アセットの表示

メモ

この節は、Adobe Dimension以外の3Dアセットタイプで使用される従来のwebGLビューアにのみ適用されます。

デバイスのタイプに応じて、様々な方法で 3D コンポーネント機能にアクセスします。

詳しくは、次のトピックを参照してください。

3Dコンポーネントを含むWebページのプレビューも参照してください。

screen_shot_2017-12-11at145654

タッチスクリーンデバイス

タッチスクリーンデバイスで 3D コンポーネントを操作するには:

  1. 1 本の指でドラッグまたはスワイプして、オブジェクトの周囲で視点(「カメラ」)を移動(「オービット」)します。あらゆる方向からオブジェクトを表示できます。

  2. 2 本の指でピンチして、カメラをオブジェクトに近づけたり、オブジェクトから遠ざけたりします。このアクションはズームインまたはズームアウトと同様です。このアクションを使用して、オブジェクトを詳しく調べることができます。また、「+」ボタンを押したままにしてカメラをオブジェクトに近づけたり、「-」ボタンを押したままにしてカメラをオブジェクトから遠ざけたりすることもできます。

  3. 2 本の指でドラッグして、カメラをパンします。このアクションではカメラを横方向に移動して、ズームインしたままオブジェクトの様々な部分を見ることができます。または、「オービット/パンの切り替え」ボタンをタップしてパンモードに切り替え、1本指のドラッグでカメラをパンします。 「オービット/パンの切り替え」ボタンをタップして、オービット​モードに戻ります。

  4. ビューアをリセット​をタップして、カメラをリセットします。このアクションにより、オブジェクト全体の表示に戻り、自動スピンが有効になっている場合は自動スピンが再開されます。

  5. 全画面表示​をタップして、全画面表示モードに切り替えます(デバイスでサポートされている場合)。全画面表示​を再度タップすると、3D ビューアはページ埋め込みモードに戻ります。

タッチパッドデバイス

タッチパッドデバイスで 3D コンポーネントを操作するには:

  1. (左)タッチパッドボタンを押しながら 1 本の指でドラッグして、オブジェクトの周囲で視点(「カメラ」)を移動(「オービット」)します。あらゆる方向からオブジェクトを表示できます。

  2. タッチパッドボタンを押し込まずに 2 本の指で下方向または上方向にドラッグして、カメラをオブジェクトに近づけたり、オブジェクトから遠ざけたりします。このアクションはズームインまたはズームアウトと同様です。このアクションを使用して、オブジェクトを詳しく調べることができます。または、ズームイン​ボタンまたは​ズームアウト​ボタンを押したままにして、カメラをオブジェクトの近くまたは遠くに移動します。

  3. Alt/option​キーと(左)タッチパッドボタンを押しながら1本指でドラッグし、カメラをパンします。 このアクションではカメラを横方向に移動して、ズームインしたままオブジェクトの様々な部分を見ることができます。または、[オービット/パンの切り替え]ボタンをクリックして[パン]モードに切り替え、(左)ボタンを押しながら1本指でドラッグしてカメラをパンします。 [オービット/パンの切り替え]ボタンをもう一度クリックして、[オービット]モードに戻ります。

  4. ビューアをリセット」をクリックして、カメラをリセットします。 このアクションにより、オブジェクト全体の表示に戻り、自動スピンが有効になっている場合は自動スピンが再開されます。

  5. フルスクリーン」をクリックしてフルスクリーンモードに切り替えます。 キーボードの​Escape​キーを使用するか、「フルスクリーン」を再度クリックして、3Dビューアをページ埋め込みモードに戻します。

マウスおよびトラックボールデバイス

マウスおよびトラックボールデバイスで 3D コンポーネントを操作するには:

  1. 左マウスボタンを押しながらドラッグして、オブジェクトの周囲で視点(「カメラ」)を移動(「オービット」)します。あらゆる方向からオブジェクトを表示できます。

  2. スクロールホイールを使用して、カメラをオブジェクトに近づけたり、オブジェクトから遠ざけたりします。このアクションはズームインまたはズームアウトと同様です。このアクションを使用して、オブジェクトを詳しく調べることができます。または、ズームイン​ボタンまたは​ズームアウト​ボタンを押したままにして、カメラをオブジェクトの近くまたは遠くに移動します。

  3. Alt/option​キーを押しながらドラッグし、マウスの左ボタンを押して、カメラをパンします。 このアクションではカメラを横方向に移動して、ズームインしたままオブジェクトの様々な部分を見ることができます。または、[オービット/パンの切り替え]ボタンをクリックして[パン]モードに切り替え、マウスの左ボタンを押しながらドラッグしてカメラをパンします。 [オービット/パンの切り替え]を再度クリックして、[オービット]モードに戻ります。

  4. ビューアをリセット」をクリックして、カメラをリセットします。 このアクションにより、オブジェクト全体の表示に戻り、自動スピンが有効になっている場合は自動スピンが再開されます。

  5. フルスクリーン」をクリックしてフルスクリーンモードに切り替えます。 キーボードの​Escape​キーを使用するか、「フルスクリーン」を再度クリックして、3Dビューアをページ埋め込みモードに戻します。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
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