ビューアーを埋め込む

Any3D のビューアーを自分のページに置けます。埋め込み枠は https のアドレスからモデルを読み込み、フルのビューアーを開くボタンが出ます。

  1. 1

    埋め込み枠を置く

    iframe を Any3D に向け、src クエリにモデルのアドレスを書きます。枠の中はキャンバスだけで、右下にフルのビューアーを開くボタンが出ます。下にサンプルがあります。

    <iframe
      src="https://any3d.cc/ja-JP/embed?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb"
      title="3D モデル"
      style="width:100%;height:480px;border:0"
      loading="lazy"
      allow="fullscreen"
      allowfullscreen
      referrerpolicy="strict-origin-when-cross-origin"
    ></iframe>
    ヒント:下のプロンプトをコピーして AI アシスタント(Cursor、Claude、ChatGPT など)に渡すと、埋め込みコードを自動生成して素早く組み込めます。
    AI 組み込みプロンプト(クリックで開閉)
    Web ページに Any3D 3D ビューアーを埋め込むための <iframe> コードを作成してください。既存のページやコンポーネントを編集している場合は、3D モデルを表示したい位置に <iframe> を配置してください。 埋め込みベース URL:https://any3d.cc/ja-JP/embed URL とパラメータの規則: - 必須パラメータ:src にモデルの HTTPS アドレスをパーセントエンコード(encodeURIComponent)して指定し、独立したクエリパラメータとして渡します(例:https://any3d.cc/ja-JP/embed?src=...)。生のモデルアドレスを直接パスに連結しないでください。3D Tiles は tileset.json のアドレスを指定します。 - 任意パラメータ(不要なものは省略): - autorotate=1:モデルを自動回転させます。省略すると静止します。 - theme=light、theme=dark、theme=system:ページのテーマを設定します。 - bg=transparent:背景を透明にします。 - controls:マウス操作プリセット。空にするか auto にするとファイル形式に合わせて自動選択されます。standard、cad、solidworks、blender、splat、custom も指定できます。 マウス操作: - auto:CAD ファイルは CAD、Gaussian Splatting はスムーズ周回、その他のファイルはオービット。 - standard:オービット。左ドラッグで回転、右ドラッグでパン、ホイールでズーム。 - cad:AutoCAD スタイル。中ドラッグでパン、Shift+中ドラッグで周回、ホイールはカーソル位置へズーム、慣性なし。左ドラッグでも周回、右ドラッグでパン。 - solidworks:SolidWorks スタイル。中ドラッグで周回、Ctrl または Command+中ドラッグでパン、Shift+中ドラッグでズーム。ホイール前方でカーソル位置縮小、慣性なし。 - blender:Blender スタイル。中ドラッグで周回、Shift+中ドラッグでパン、Ctrl または Command+中ドラッグでズーム。ホイールはビュー中心ズーム、慣性なし。 - splat:大きな Gaussian Splatting 向けのスムーズ周回。ドラッグで滑らかに周回、ダブルクリックで注視点設定。 - custom:standard と同じ。 iframe の要件と注意点: - 属性とスタイル:loading="lazy"、style="width:100%;height:480px;border:0" を含めます(コンテナに合わせて調整可能)。 - 権限とポリシー:allow="fullscreen"、allowfullscreen、referrerpolicy="strict-origin-when-cross-origin" が必須です。 - サンドボックス:親ページで iframe に sandbox を設定する場合は、右下のボタンから別タブで完全版ビューアーを開けるよう、allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox を追加してください。 - ホスティングと CORS:モデルを配置したサーバーは https://any3d.cc からの CORS を許可する必要があります。ダウンロードされるのは 1 つのファイル(GLB、STL、OBJ、FBX、PLY など)です。別ファイルのテクスチャはモデルに内包されていない限り読み込まれません。 参考例: <iframe src="https://any3d.cc/ja-JP/embed?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb" title="3D モデル" style="width:100%;height:480px;border:0" loading="lazy" allow="fullscreen" allowfullscreen referrerpolicy="strict-origin-when-cross-origin" ></iframe> 注意:例に含まれるモデルアドレスは仮のものです。コード生成時は src を実際のパーセントエンコード済み HTTPS アドレスに差し替えてください。ファイルに合わせてマウス操作を自動選択する場合は controls を指定しないでください。
  2. 2

    モデルの置き場所

    アドレスは https で、配信元は https://any3d.cc からの読み取りを許可する必要があります。訪れた人のブラウザがそのファイルを 1 つダウンロードします。GLB、STL、OBJ、FBX、PLY などです。3D Tiles は tileset.json のアドレスを使います。Any3D はコピーを保存しません。テクスチャやデータが別ファイルにある場合、GLB のようにモデルへまとめていないと欠けます。

  3. 3

    ページのオプション

    下のクエリは任意です。フルのビューアーを開くボタンは常に出ます。

    パラメータ値効果
    autorotate1モデルを回転します。付けなければ静止したままです。
    themelight | dark | systemページのテーマを指定します。
    bgtransparent背景を透明にします。
    controlsauto | standard | cad | solidworks | blender | splat | customマウス操作。空なら auto で、ファイルに合わせて選びます。
    https://any3d.cc/ja-JP/embed
      ?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb
      &autorotate=1
      &theme=dark
      &bg=transparent
  4. 4

    フルのビューアーを開く

    ボタンは対応する Any3D のビューアーを新しいタブで開き、同じモデルアドレスを渡します。ガウシアンスプラット、3D Tiles、DWG または DXF の図面は専用ビューアーになります。それ以外は 3D モデルビューアーです。親ページが iframe に sandbox を付けている場合、ボタンでタブを開くには allow-popups と allow-popups-to-escape-sandbox が必要です。