- 1
加上嵌入框
把 iframe 指向 Any3D,並在 src 查詢參數裡寫上模型網址。嵌入框裡只有畫布,右下角帶有開啟完整檢視器的按鈕。下面有一段範例。
<iframe src="https://any3d.cc/zh-TW/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 接入提示詞(點擊展開/收起)
請幫我產生一段用於在網頁中嵌入 Any3D 3D 檢視器的 <iframe> 程式碼。若是在修改現有頁面或元件,請將 <iframe> 放置在需要展示 3D 模型的位置。 嵌入基準網址:https://any3d.cc/zh-TW/embed 網址與參數規則: - 必須參數:src 為模型的 HTTPS 網址,必須做百分號編碼(encodeURIComponent),且作為獨立查詢參數傳入(例如 https://any3d.cc/zh-TW/embed?src=...),切勿將原始模型網址直接拼入路徑。3D Tiles 格式請傳入 tileset.json 的網址。 - 可選參數(不需要則不寫): - autorotate=1:讓模型自動旋轉。不寫則保持靜止。 - theme=light、theme=dark 或 theme=system:設定頁面主題。 - bg=transparent:使用透明背景。 - controls:滑鼠操作預設。留空或設為 auto,將依檔案類型自動選擇最佳操作方式;亦可指定為 standard(軌道)、cad(AutoCAD 手感)、solidworks、blender、splat(Gaussian Splatting 平滑環繞)、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"。 - 沙箱環境:若外層頁面設定了 sandbox,必須額外加上 allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox,右下角按鈕才能在新分頁開啟完整檢視器。 - 資源與跨域:代管模型的網站必須支援跨來源讀取(CORS 允許 https://any3d.cc)。僅下載單一模型檔案(如 GLB、STL、OBJ、FBX、PLY),外置獨立貼圖若未打包進模型將無法載入。 參考範例: <iframe src="https://any3d.cc/zh-TW/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
模型放在哪裡
網址必須是 https,託管網站必須允許 https://any3d.cc 讀取這個檔案。訪客的瀏覽器會下載這一個檔案,例如 GLB、STL、OBJ、FBX 或 PLY。3D Tiles 請使用 tileset.json 的網址。Any3D 不會保存一份副本。紋理和資料如果在單獨的檔案裡,除非已經打進模型(GLB 就是這樣),否則會缺失。
- 3
頁面選項
下面的查詢參數都是可選的。開啟完整檢視器的按鈕始終顯示。
參數 取值 作用 autorotate1讓模型自動旋轉。不寫則保持靜止。 themelight | dark | system設定頁面主題。 bgtransparent使用透明背景。 controlsauto | standard | cad | solidworks | blender | splat | custom滑鼠操作。留空為 auto,按檔案自動選擇。 https://any3d.cc/zh-TW/embed ?src=https%3A%2F%2Fcdn.example.com%2Fmodel.glb &autorotate=1 &theme=dark &bg=transparent - 4
開啟完整檢視器
按鈕會在新分頁開啟對應的 Any3D 檢視器,並帶上同一個模型網址。Gaussian Splatting、3D Tiles,以及 DWG 或 DXF 圖紙會進入各自的檢視器。其它檔案進入 3D 模型檢視器。如果外層頁面給 iframe 加了 sandbox,需要加上 allow-popups 和 allow-popups-to-escape-sandbox,按鈕才能開啟新分頁。
嵌入檢視器
把 Any3D 檢視器放到你自己的頁面上。嵌入框從 https 網址載入模型,並提供開啟完整檢視器的按鈕。