360° Implementation Guide
360° 展示方案指南
從拍攝、製作到網頁呈現——所有方法完整整理，選擇最適合你的方案。
📸
方法一：多角度拍照旋轉 最推薦
MULTI-ANGLE PHOTOGRAPHY SPIN
將產品放在轉盤上，固定相機，每隔固定角度拍一張照片（24~72 張），用 JS 串成可拖曳旋轉的互動效果。業界最常用的產品 360° 展示方式。
拍攝設備需求
- 相機 — 任何可手動曝光的相機（手機也行，單眼更佳）
- 電動轉盤 — 網拍轉盤 NT$500~3,000 或專業級 NT$5,000~30,000
- 三腳架 — 固定相機位置，確保每張高度一致
- 燈光 — 柔光箱 ×2 或環形燈，確保均勻打光
- 背景 — 白色 / 黑色背景布或背景紙
場地佈置
柔光箱 柔光箱
\ ┌─────────────────┐ /
\ │ │ /
\│ 白色背景紙 │/
│ │
│ ┌─────────┐ │
│ │ 轉盤 │ │ ← 每次旋轉 5°~15°
│ │ ┌─────┐ │ │
│ │ │ 產品 │ │ │
│ │ └─────┘ │ │
│ └─────────┘ │
│ │
└────────┬────────┘
│
📷 相機（三腳架固定）
拍攝步驟
Step 1：相機設定
手動模式（M mode），光圈 f/8~f/11、ISO 100、快門依測光調整。關閉自動白平衡，手動設定固定色溫。對焦後切到手動對焦（MF）鎖定。
Step 2：拍攝方式
A. 電動轉盤：設定自動旋轉，每轉 10° 停一下拍一張 → 共 36 張
B. 手動轉盤：每次手轉固定角度，拍一張
C. 人繞著拍：產品固定，人繞著走，每隔固定距離拍（精度較低）
Step 3：建議張數
24 張 = 每 15° 一張（最低限度，有跳動感）
36 張 = 每 10° 一張（推薦，流暢度與檔案大小平衡）
72 張 = 每 5° 一張（絲滑流暢，但檔案多）
Step 4：後製
1. Lightroom 批次調整：白平衡統一、曝光微調
2. Photoshop 批次去背（或用 remove.bg 線上去背）
3. 統一裁切正方形（建議 1000×1000 px）
4. 輸出 JPG（品質 80%），命名 001.jpg ~ 036.jpg
Step 5：網頁串接
用 JS 套件或自己寫程式碼，把照片串成可拖曳旋轉的互動效果。
推薦 JS 套件
js-cloudimage-360-view（免費）
360-image-viewer
SpriteSpin（jQuery）
Sirv 360 Viewer（SaaS）
自己寫 JS
自己寫 JS 的程式碼範例
<div id="viewer" style="width:600px;height:600px;cursor:grab;">
<img id="spin-img" src="images/001.jpg"
style="width:100%;height:100%;object-fit:contain;">
</div>
<script>
const total = 36; // 你有幾張照片
const folder = 'images/'; // 照片資料夾
let current = 1, dragging = false, startX = 0;
const img = document.getElementById('spin-img');
const viewer = document.getElementById('viewer');
// 預載所有圖片
for (let i = 1; i <= total; i++) {
new Image().src = folder + String(i).padStart(3,'0') + '.jpg';
}
viewer.addEventListener('pointerdown', e => {
dragging = true; startX = e.clientX;
});
window.addEventListener('pointerup', () => dragging = false);
window.addEventListener('pointermove', e => {
if (!dragging) return;
const d = e.clientX - startX;
if (Math.abs(d) > 5) {
current += d > 0 ? 1 : -1;
if (current > total) current = 1;
if (current < 1) current = total;
img.src = folder + String(current).padStart(3,'0') + '.jpg';
startX = e.clientX;
}
});
</script>
多排拍攝（上下也能轉）
拍攝 5 排 × 36 張 = 180 張照片
排1：相機在上方 60° 俯視 → 拍 36 張
排2：相機在上方 30° 俯視 → 拍 36 張
排3：相機平視 0° → 拍 36 張（主要排）
排4：相機在下方 -30° 仰視 → 拍 36 張
排5：相機在下方 -60° 仰視 → 拍 36 張
拖曳左右 → 水平旋轉（切換同排不同張）
拖曳上下 → 垂直旋轉（切換不同排同角度）
優點
- 畫質最高（真實照片）
- 客戶信任度最高
- 設備門檻低
- 手機相容好
缺點
- 拍攝耗時 1~2hr/產品
- 後製去背耗時
- 每個產品要重拍
- 多排設置複雜
成本：
NT$500~5,000（自拍）/ NT$3,000~15,000（外包）
🧷
方法二：3D 建模渲染 專業級
3D MODEL + WEBGL (THREE.JS)
用 3D 軟體建立產品模型，匯出為 glTF/GLB，用 Three.js 即時渲染。使用者可真正自由旋轉任意角度，還能加動態光效。
建模方式
- 手動建模 — Blender（免費）/ 3ds Max / SolidWorks
- 3D 掃描 — 用 3D 掃描器掃描實體產品
- 照片建模（Photogrammetry） — 拍 50~200 張照片，軟體重建 3D
- AI 生成 — Meshy / Tripo3D / CSM 等 AI 從照片生成
照片建模拍攝方法
拍攝要點
1. 拍 50~200 張照片，涵蓋所有角度
2. 相鄰照片重疊率 > 60%
3. 繞產品拍 3 圈：平視、俯視 45°、俯視 75°
4. 光線均勻，避免強反光（金屬產品要噴霧消光）
5. 背景簡單不雜亂
俯視 75° 圈 ──→ ○ ○ ○ ○ ○ ○ ○ ○ ○ （15~20 張）
\ /
俯視 45° 圈 ──→ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ （20~30 張）
\ /
平視 0° 圈 ──→ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ （25~40 張）
│
┌───────┐
│ 產 品 │
└───────┘
建模軟體
Meshroom（免費開源）
Agisoft Metashape
RealityCapture
Polycam（手機 App）
KIRI Engine（手機 App）
Luma AI（雲端）
網頁呈現流程
3D 模型（.blend / .obj / .fbx）
│
▼
匯出 glTF / GLB 格式（Blender 直接匯出）
│
▼
壓縮優化（gltf-transform），目標 < 5MB
│
▼
Three.js + GLTFLoader + OrbitControls
│
▼
部署到網站
優點
- 真正任意角度旋轉
- 可加動態光效
- 可展示內部結構
- 一模型多用途
缺點
- 建模技術門檻高
- 外包費用高
- 金屬質感難還原
- 手機效能可能不足
成本：
NT$10,000~80,000（外包）/ 免費（自學 Blender）
🎥
方法三：360° 環景影片/照片 場景展示
360° VIDEO / PANORAMA
用 360° 全景相機拍攝，讓使用者在網頁上自由轉動視角。這是「環境 360°」（觀看者向外看），適合展示使用場景，不適合展示產品細節。
拍攝設備
- Insta360 X4 / X3 — NT$12,000~18,000
- Ricoh Theta Z1 — NT$28,000，畫質極好
- GoPro MAX — NT$15,000，防水耐操
- 手機全景模式 — 免費但品質有限
建議拍攝場景
場景 A：甲板夜間照明
360° 相機放在漁船甲板中央，LED 燈全開，展示夜間照明範圍與身歷其境感。
場景 B：水面集魚效果
相機架在船舷邊，拍攝 LED 燈垂入水中的光照效果和魚群聚集。
場景 C：安裝現場
在港口或船上展示安裝位置、佈線方式、多盞燈排列效果。
網頁播放套件
Pannellum（免費開源）
A-Frame（WebXR）
Photo Sphere Viewer
Kuula（SaaS）
Momento360
Pannellum 使用範例
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.css">
<script src="https://cdn.jsdelivr.net/npm/pannellum/build/pannellum.js">
</script>
<div id="panorama" style="width:100%;height:500px;"></div>
<script>
pannellum.viewer('panorama', {
type: 'equirectangular',
panorama: 'boat-night-360.jpg',
autoLoad: true,
autoRotate: -2,
hotSpots: [{
pitch: -10, yaw: 120,
type: 'info',
text: 'LED 漁業用燈安裝位置'
}]
});
</script>
優點
- 臨場感極強
- 拍攝簡單（一鍵拍）
- 展示場景最佳
- 可加熱點說明
缺點
- 不能仔細看產品細節
- 需購買 360° 相機
- 影片檔案大
- 夜間畫質可能差
成本：
NT$12,000~28,000（相機）+ 軟體免費
💻
方法四：CSS/JS 3D 模擬 零素材
PROGRAMMATIC 3D SIMULATION
不需任何照片或模型，用程式碼直接建構產品的 3D 示意模型。就像本頁上方的 3D 展示。適合 prototype / demo / 提案階段。
適合情境
- 產品還沒做好，需先給客戶看概念
- 沒有拍攝條件，先模擬展示
- 需展示光效、散熱、結構等抽象概念
- Demo / 提案 / 概念驗證階段
技術方案
Three.js（本頁使用）
Babylon.js
CSS 3D Transform
p5.js / WebGL
優點
- 完全免費、零素材
- 馬上做出來
- 可互動（開關燈、換色）
- 改動快速
缺點
- 非真實產品外觀
- 只適合概念展示
- 細節有限
- 正式場合略不足
🔗
方法五：混合方案 商用推薦
HYBRID APPROACH
實務上最好的做法是組合多種方式，在同一個產品頁面提供完整體驗。
建議組合
┌──────────────────────────────────────────┐
│ 產品頁面 │
│ │
│ 區塊 1：多角度拍照旋轉（36 張照片） │
│ → 讓客戶看清楚外觀、質感、做工 │
│ │
│ 區塊 2：3D 互動展示（Three.js） │
│ → 開關燈、換色、透視、爆炸圖 │
│ │
│ 區塊 3：360° 場景體驗（全景照片） │
│ → 漁船上的實際使用情境 │
│ │
│ 區塊 4：產品規格 + 比較表 + CTA │
└──────────────────────────────────────────┘
為什麼混合最好
- 照片 → 真實感和信任
- 3D → 功能亮點展示
- 場景 → 臨場感
- 涵蓋所有需求
總比較表
| 方案 | 真實感 | 互動性 | 成本 | 難度 | 適合 |
| 多角度拍照 |
★★★★★ |
★★★☆☆ |
低 | 低 | 產品細節 |
| 3D 建模 |
★★★★☆ |
★★★★★ |
高 | 高 | 功能展示 |
| 360° 影片 |
★★★★★ |
★★☆☆☆ |
中 | 低 | 場景展示 |
| JS 模擬 |
★★☆☆☆ |
★★★★★ |
免費 | 中 | 概念 Demo |
| 混合方案 |
★★★★★ |
★★★★★ |
中高 | 中高 | 正式商用 |
結論建議
今天 Demo 用
直接用本頁上方的 3D 互動展示（JS 模擬），已包含完整產品文案、互動功能。
正式上線用
拍 36 張多角度照片 + 360° 使用場景影片 → 最佳性價比組合。
預算充足
混合方案全上：多角度照片 + 3D 互動 + 360° 場景 → 最完整的展示體驗。