360 view image library
2025-07-31
🎥 Gợi ý thư viện View360 có thể thêm Text, Hình, YouTube
Nếu bạn đang tìm một thư viện 360 viewer có thể:
- ✅ Hiển thị ảnh panorama (360°)
- 📝 Thêm chữ (text)
- 🖼️ Thêm hình ảnh
- 📺 Thêm video YouTube vào trong không gian 360°
Thì các thư viện sau là những lựa chọn tốt và phổ biến:
🥇 Marzipano – Tốt, nhẹ, mã nguồn mở
✅ Ưu điểm:
- Hỗ trợ ảnh 360° dạng equirectangular và cubemap.
- Có thể thêm hotspot để hiển thị text, ảnh, YouTube, v.v.
- Rất nhẹ và dễ dùng, không cần WebGL phức tạp như Three.js.
💡 Demo hotspot YouTube:
viewer.createHotspot(hotspotElement, { yaw: 1.5, pitch: 0.1 });
Với
hotspotElementlà 1<div>chứa text, ảnh hoặc iframe YouTube.
🥈 PhotoSphere Viewer – Cực đẹp, có plugin hỗ trợ
✅ Ưu điểm:
- UI đẹp.
- Plugin hỗ trợ rất nhiều: markers, gallery, transitions.
- Dễ tích hợp text, ảnh, video, YouTube bằng marker.
📦 Cài đặt:
npm install photo-sphere-viewer
💡 Thêm marker YouTube:
viewer.addMarker({
id: 'video1',
tooltip: 'Xem video',
content: '<iframe width="300" height="200" src="https://www.youtube.com/embed/abc123" frameborder="0" allowfullscreen></iframe>',
latitude: 0.2,
longitude: 0.5,
});
🥉 three.js + panolens.js – Cực mạnh, chuyên nghiệp
Nếu bạn muốn xây dựng 1 trải nghiệm 360° tương tác phức tạp và tùy biến cao → dùng Panolens.js kết hợp three.js.
✅ Ưu điểm:
- Rất linh hoạt: thêm hotspot, camera, hoạt cảnh, văn bản, video, hình ảnh, v.v.
- Hỗ trợ WebVR / WebXR.
💡 Thêm YouTube vào hotspot:
const infospot = new PANOLENS.Infospot(300, PANOLENS.DataImage.Info);
infospot.position.set(5000, 0, 0);
infospot.setHTML('<iframe width="300" height="200" src="https://www.youtube.com/embed/abc123" frameborder="0"></iframe>');
panorama.add(infospot);
🔍 Tổng kết:
| Tên thư viện | Dễ dùng | Tùy biến | Nhẹ | Hỗ trợ YouTube/Text/Ảnh |
|---|---|---|---|---|
| Marzipano | ✅✅✅ | Trung bình | ✅✅✅ | ✅ |
| PhotoSphere Viewer | ✅✅ | Cao | ✅✅ | ✅ |
| Panolens.js | Trung bình | ✅✅✅✅ | ✅ | ✅✅✅ |
👉 Bạn muốn mình gợi ý thêm demo cụ thể cho thư viện nào không?